import { jsxs as r, jsx as e, Fragment as o } from "react/jsx-runtime";
import { Link as c } from "react-router-dom";
import { useTranslation as b } from "react-i18next";
import { TrendingUp as u, Users as x, Zap as g, Clock as n, Bell as p, ArrowRight as i, Shield as N, AlertTriangle as h, Edit as f, X as y, Check as w, HelpCircle as S, MessageSquare as k, Info as R } from "lucide-react";
const m = {
  Supervisor: { color: "bg-blue-500/10 text-blue-600 border-blue-500/20", description: "Premier niveau d'escalade" },
  Manager: { color: "bg-orange-500/10 text-orange-600 border-orange-500/20", description: "Deuxieme niveau d'escalade" },
  Director: { color: "bg-red-500/10 text-red-600 border-red-500/20", description: "Niveau maximum d'escalade" }
}, q = [
  { type: "ResponseBreach", label: "Response SLA Breach", icon: n, description: "Declenchee quand le temps de premiere reponse SLA est depasse" },
  { type: "ResolutionBreach", label: "Resolution SLA Breach", icon: h, description: "Declenchee quand le temps de resolution SLA est depasse" },
  { type: "ManualRequest", label: "Manual Request", icon: p, description: "Escalade manuelle demandee par un agent" }
], L = [
  { level: "Supervisor", trigger: "ResponseBreach", delay: 0, role: "Support Supervisor", active: !0 },
  { level: "Supervisor", trigger: "ResolutionBreach", delay: 30, role: "Support Supervisor", active: !0 },
  { level: "Manager", trigger: "ResponseBreach", delay: 60, role: "Support Manager", active: !0 },
  { level: "Manager", trigger: "ResolutionBreach", delay: 120, role: "Support Manager", active: !0 },
  { level: "Director", trigger: "ResolutionBreach", delay: 240, role: "IT Director", active: !0 }
], A = [
  { step: 1, title: "Detection du depassement", description: "Le systeme detecte qu'un SLA a ete depasse (reponse ou resolution)" },
  { step: 2, title: "Verification du delai", description: "Si un delai est configure, le systeme attend la duree specifiee" },
  { step: 3, title: "Escalade automatique", description: "Le ticket est escalade au niveau configure et les notifications sont envoyees" },
  { step: 4, title: "Escalades successives", description: "Si le probleme persiste, le ticket peut etre escalade aux niveaux superieurs" }
], D = [
  {
    question: "Que se passe-t-il si une regle d'escalade est desactivee ?",
    answer: "Les regles desactivees sont ignorees lors du traitement des escalades. Le systeme passe directement au niveau suivant si disponible, ou ne declenche pas d'escalade si c'est la seule regle pour ce type de depassement."
  },
  {
    question: "Comment fonctionne le delai apres depassement ?",
    answer: "Le delai permet d'eviter les escalades immediates. Par exemple, un delai de 30 minutes laisse le temps a l'agent de resoudre le probleme avant de notifier le superviseur. Un delai de 0 signifie une escalade immediate."
  },
  {
    question: "Puis-je configurer plusieurs roles pour le meme niveau ?",
    answer: "Non, chaque regle ne peut notifier qu'un seul role. Pour notifier plusieurs personnes, creez plusieurs regles avec le meme niveau et type de declencheur, ou utilisez un role de groupe."
  },
  {
    question: "L'escalade est-elle reversible ?",
    answer: "L'escalade elle-meme ne peut pas etre annulee automatiquement. Cependant, le ticket peut etre reassigne manuellement a un agent de niveau inferieur une fois le probleme resolu ou stabilise."
  }
], j = [
  { method: "GET", url: "/api/support/sla/escalation-rules", description: "Liste des regles d'escalade" },
  { method: "GET", url: "/api/support/sla/escalation-rules/{id}", description: "Detail d'une regle" },
  { method: "PUT", url: "/api/support/sla/escalation-rules/{id}", description: "Modifier une regle d'escalade" },
  { method: "POST", url: "/api/support/tickets/{id}/escalate", description: "Escalader manuellement un ticket" }
];
function C() {
  const { t: d } = b("docs");
  return /* @__PURE__ */ r("div", { className: "space-y-8", children: [
    /* @__PURE__ */ r("div", { className: "flex items-center gap-2 text-sm text-[var(--text-secondary)]", children: [
      /* @__PURE__ */ e(c, { to: "/system/docs", className: "hover:text-[var(--color-primary-600)]", children: d("breadcrumb.documentation") }),
      /* @__PURE__ */ e("span", { children: "/" }),
      /* @__PURE__ */ e(c, { to: "/system/docs/user", className: "hover:text-[var(--color-primary-600)]", children: d("breadcrumb.user") }),
      /* @__PURE__ */ e("span", { children: "/" }),
      /* @__PURE__ */ e(c, { to: "/system/docs/user/support", className: "hover:text-[var(--color-primary-600)]", children: d("breadcrumb.support") }),
      /* @__PURE__ */ e("span", { children: "/" }),
      /* @__PURE__ */ e("span", { children: d("support.escalation.title") })
    ] }),
    /* @__PURE__ */ r("div", { children: [
      /* @__PURE__ */ r("h1", { className: "text-3xl font-bold mb-4 flex items-center gap-3", children: [
        /* @__PURE__ */ e(u, { className: "w-8 h-8 text-[var(--color-primary-600)]" }),
        "Configuration Escalade"
      ] }),
      /* @__PURE__ */ e("p", { className: "text-lg text-[var(--text-secondary)]", children: "Regles d'escalade automatique et hierarchie de notification pour les depassements SLA." }),
      /* @__PURE__ */ r("div", { className: "mt-4 flex items-center gap-2", children: [
        /* @__PURE__ */ e("span", { className: "px-3 py-1 text-xs rounded-full bg-orange-500/10 text-orange-600 border border-orange-500/20", children: "Automatisation" }),
        /* @__PURE__ */ e("span", { className: "px-3 py-1 text-xs rounded-full bg-red-500/10 text-red-600 border border-red-500/20", children: "SLA" })
      ] })
    ] }),
    /* @__PURE__ */ r("div", { className: "card p-4 bg-[var(--bg-secondary)]", children: [
      /* @__PURE__ */ e("h2", { className: "font-semibold mb-3", children: "Table des matieres" }),
      /* @__PURE__ */ r("nav", { className: "grid grid-cols-2 md:grid-cols-4 gap-2 text-sm", children: [
        /* @__PURE__ */ e("a", { href: "#introduction", className: "text-[var(--color-primary-600)] hover:underline", children: "1. Introduction" }),
        /* @__PURE__ */ e("a", { href: "#access", className: "text-[var(--color-primary-600)] hover:underline", children: "2. Acces" }),
        /* @__PURE__ */ e("a", { href: "#hierarchy", className: "text-[var(--color-primary-600)] hover:underline", children: "3. Hierarchie" }),
        /* @__PURE__ */ e("a", { href: "#triggers", className: "text-[var(--color-primary-600)] hover:underline", children: "4. Declencheurs" }),
        /* @__PURE__ */ e("a", { href: "#rules", className: "text-[var(--color-primary-600)] hover:underline", children: "5. Configuration" }),
        /* @__PURE__ */ e("a", { href: "#workflow", className: "text-[var(--color-primary-600)] hover:underline", children: "6. Fonctionnement" }),
        /* @__PURE__ */ e("a", { href: "#faq", className: "text-[var(--color-primary-600)] hover:underline", children: "7. FAQ" }),
        /* @__PURE__ */ e("a", { href: "#api", className: "text-[var(--color-primary-600)] hover:underline", children: "8. Reference API" })
      ] })
    ] }),
    /* @__PURE__ */ r("section", { id: "introduction", className: "card p-6", children: [
      /* @__PURE__ */ r("h2", { className: "text-xl font-semibold mb-4 flex items-center gap-2", children: [
        /* @__PURE__ */ e("span", { className: "w-8 h-8 rounded-full bg-[var(--color-primary-600)] text-white flex items-center justify-center text-sm font-bold", children: "1" }),
        "Introduction"
      ] }),
      /* @__PURE__ */ e("p", { className: "text-[var(--text-secondary)] mb-4", children: "Le systeme d'escalade permet de notifier automatiquement les responsables lorsqu'un ticket depasse les delais SLA garantis. Il s'organise en trois niveaux hierarchiques avec des regles configurables." }),
      /* @__PURE__ */ r("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [
        /* @__PURE__ */ r("div", { className: "flex items-start gap-3", children: [
          /* @__PURE__ */ e("div", { className: "w-8 h-8 rounded-full bg-blue-500/10 flex items-center justify-center flex-shrink-0", children: /* @__PURE__ */ e(x, { className: "w-4 h-4 text-blue-500" }) }),
          /* @__PURE__ */ r("div", { children: [
            /* @__PURE__ */ e("div", { className: "font-medium", children: "3 niveaux" }),
            /* @__PURE__ */ e("div", { className: "text-sm text-[var(--text-secondary)]", children: "Supervisor → Manager → Director" })
          ] })
        ] }),
        /* @__PURE__ */ r("div", { className: "flex items-start gap-3", children: [
          /* @__PURE__ */ e("div", { className: "w-8 h-8 rounded-full bg-orange-500/10 flex items-center justify-center flex-shrink-0", children: /* @__PURE__ */ e(g, { className: "w-4 h-4 text-orange-500" }) }),
          /* @__PURE__ */ r("div", { children: [
            /* @__PURE__ */ e("div", { className: "font-medium", children: "3 declencheurs" }),
            /* @__PURE__ */ e("div", { className: "text-sm text-[var(--text-secondary)]", children: "Response, Resolution, Manuel" })
          ] })
        ] }),
        /* @__PURE__ */ r("div", { className: "flex items-start gap-3", children: [
          /* @__PURE__ */ e("div", { className: "w-8 h-8 rounded-full bg-purple-500/10 flex items-center justify-center flex-shrink-0", children: /* @__PURE__ */ e(n, { className: "w-4 h-4 text-purple-500" }) }),
          /* @__PURE__ */ r("div", { children: [
            /* @__PURE__ */ e("div", { className: "font-medium", children: "Delais configurables" }),
            /* @__PURE__ */ e("div", { className: "text-sm text-[var(--text-secondary)]", children: "De immediat a plusieurs heures" })
          ] })
        ] }),
        /* @__PURE__ */ r("div", { className: "flex items-start gap-3", children: [
          /* @__PURE__ */ e("div", { className: "w-8 h-8 rounded-full bg-green-500/10 flex items-center justify-center flex-shrink-0", children: /* @__PURE__ */ e(p, { className: "w-4 h-4 text-green-500" }) }),
          /* @__PURE__ */ r("div", { children: [
            /* @__PURE__ */ e("div", { className: "font-medium", children: "Notifications par role" }),
            /* @__PURE__ */ e("div", { className: "text-sm text-[var(--text-secondary)]", children: "Assignation de roles par niveau" })
          ] })
        ] })
      ] })
    ] }),
    /* @__PURE__ */ r("section", { id: "access", className: "card p-6", children: [
      /* @__PURE__ */ r("h2", { className: "text-xl font-semibold mb-4 flex items-center gap-2", children: [
        /* @__PURE__ */ e("span", { className: "w-8 h-8 rounded-full bg-[var(--color-primary-600)] text-white flex items-center justify-center text-sm font-bold", children: "2" }),
        "Acces au module"
      ] }),
      /* @__PURE__ */ r("div", { className: "mb-4", children: [
        /* @__PURE__ */ e("div", { className: "text-sm font-medium mb-2", children: "Navigation" }),
        /* @__PURE__ */ r("div", { className: "flex items-center gap-2 text-sm bg-[var(--bg-secondary)] p-3 rounded-lg", children: [
          /* @__PURE__ */ e("span", { className: "px-2 py-1 bg-[var(--bg-primary)] rounded", children: "Support" }),
          /* @__PURE__ */ e(i, { className: "w-4 h-4 text-[var(--text-tertiary)]" }),
          /* @__PURE__ */ e("span", { className: "px-2 py-1 bg-[var(--color-primary-600)] text-white rounded", children: "Escalation" })
        ] })
      ] }),
      /* @__PURE__ */ r("div", { className: "mb-4", children: [
        /* @__PURE__ */ e("div", { className: "text-sm font-medium mb-2", children: "URL directe" }),
        /* @__PURE__ */ e("code", { className: "block p-3 bg-[var(--bg-secondary)] rounded-lg text-sm font-mono", children: "/support/escalation" })
      ] }),
      /* @__PURE__ */ r("div", { children: [
        /* @__PURE__ */ r("div", { className: "flex items-center gap-2 mb-2", children: [
          /* @__PURE__ */ e(N, { className: "w-4 h-4 text-[var(--color-primary-600)]" }),
          /* @__PURE__ */ e("span", { className: "text-sm font-medium", children: "Permissions requises" })
        ] }),
        /* @__PURE__ */ r("table", { className: "w-full text-sm", children: [
          /* @__PURE__ */ e("thead", { children: /* @__PURE__ */ r("tr", { className: "bg-[var(--bg-secondary)]", children: [
            /* @__PURE__ */ e("th", { className: "text-left py-2 px-3 rounded-tl-lg", children: "Action" }),
            /* @__PURE__ */ e("th", { className: "text-left py-2 px-3 rounded-tr-lg", children: "Permission" })
          ] }) }),
          /* @__PURE__ */ r("tbody", { children: [
            /* @__PURE__ */ r("tr", { className: "border-b border-[var(--border-color)]", children: [
              /* @__PURE__ */ e("td", { className: "py-2 px-3", children: "Voir les regles" }),
              /* @__PURE__ */ e("td", { className: "py-2 px-3", children: /* @__PURE__ */ e("code", { className: "text-xs bg-[var(--bg-secondary)] px-2 py-0.5 rounded", children: "support.escalation.read" }) })
            ] }),
            /* @__PURE__ */ r("tr", { children: [
              /* @__PURE__ */ e("td", { className: "py-2 px-3", children: "Modifier les regles" }),
              /* @__PURE__ */ e("td", { className: "py-2 px-3", children: /* @__PURE__ */ e("code", { className: "text-xs bg-[var(--bg-secondary)] px-2 py-0.5 rounded", children: "support.escalation.update" }) })
            ] })
          ] })
        ] })
      ] })
    ] }),
    /* @__PURE__ */ r("section", { id: "hierarchy", className: "card p-6", children: [
      /* @__PURE__ */ r("h2", { className: "text-xl font-semibold mb-4 flex items-center gap-2", children: [
        /* @__PURE__ */ e("span", { className: "w-8 h-8 rounded-full bg-[var(--color-primary-600)] text-white flex items-center justify-center text-sm font-bold", children: "3" }),
        "Hierarchie d'escalade"
      ] }),
      /* @__PURE__ */ e("p", { className: "text-[var(--text-secondary)] mb-4", children: "Les tickets sont escalades progressivement a travers trois niveaux de responsabilite." }),
      /* @__PURE__ */ e("div", { className: "p-4 bg-[var(--bg-secondary)] rounded-lg mb-6", children: /* @__PURE__ */ e("div", { className: "flex items-center justify-center gap-4 flex-wrap", children: Object.entries(m).map(([s, t], l) => /* @__PURE__ */ r("div", { className: "flex items-center gap-4", children: [
        /* @__PURE__ */ e("div", { className: `px-6 py-3 rounded-lg font-medium border ${t.color}`, children: /* @__PURE__ */ r("div", { className: "text-center", children: [
          /* @__PURE__ */ r("div", { className: "text-xs opacity-70", children: [
            "Level ",
            l + 1
          ] }),
          /* @__PURE__ */ e("div", { className: "font-bold", children: s })
        ] }) }),
        l < 2 && /* @__PURE__ */ e(i, { className: "w-6 h-6 text-[var(--text-tertiary)]" })
      ] }, s)) }) }),
      /* @__PURE__ */ e("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-4", children: Object.entries(m).map(([s, t], l) => /* @__PURE__ */ r("div", { className: `p-4 rounded-lg border ${t.color}`, children: [
        /* @__PURE__ */ r("h3", { className: "font-semibold mb-2", children: [
          "Niveau ",
          l + 1,
          ": ",
          s
        ] }),
        /* @__PURE__ */ e("p", { className: "text-sm opacity-80", children: t.description }),
        /* @__PURE__ */ r("div", { className: "mt-3 text-sm", children: [
          /* @__PURE__ */ e("strong", { children: "Responsabilites:" }),
          /* @__PURE__ */ r("ul", { className: "mt-1 space-y-1 list-disc list-inside opacity-80", children: [
            s === "Supervisor" && /* @__PURE__ */ r(o, { children: [
              /* @__PURE__ */ e("li", { children: "Suivi des tickets en depassement" }),
              /* @__PURE__ */ e("li", { children: "Reassignation si necessaire" })
            ] }),
            s === "Manager" && /* @__PURE__ */ r(o, { children: [
              /* @__PURE__ */ e("li", { children: "Gestion des cas complexes" }),
              /* @__PURE__ */ e("li", { children: "Allocation de ressources" })
            ] }),
            s === "Director" && /* @__PURE__ */ r(o, { children: [
              /* @__PURE__ */ e("li", { children: "Decisions strategiques" }),
              /* @__PURE__ */ e("li", { children: "Communication client VIP" })
            ] })
          ] })
        ] })
      ] }, s)) })
    ] }),
    /* @__PURE__ */ r("section", { id: "triggers", className: "card p-6", children: [
      /* @__PURE__ */ r("h2", { className: "text-xl font-semibold mb-4 flex items-center gap-2", children: [
        /* @__PURE__ */ e("span", { className: "w-8 h-8 rounded-full bg-[var(--color-primary-600)] text-white flex items-center justify-center text-sm font-bold", children: "4" }),
        "Types de declencheurs"
      ] }),
      /* @__PURE__ */ e("p", { className: "text-[var(--text-secondary)] mb-4", children: "Trois types d'evenements peuvent declencher une escalade." }),
      /* @__PURE__ */ e("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-4", children: q.map((s) => /* @__PURE__ */ r("div", { className: "p-4 border border-[var(--border-color)] rounded-lg", children: [
        /* @__PURE__ */ r("div", { className: "flex items-center gap-2 mb-3", children: [
          /* @__PURE__ */ e(s.icon, { className: "w-5 h-5 text-[var(--color-primary-600)]" }),
          /* @__PURE__ */ e("h3", { className: "font-semibold", children: s.label })
        ] }),
        /* @__PURE__ */ e("p", { className: "text-sm text-[var(--text-secondary)]", children: s.description })
      ] }, s.type)) }),
      /* @__PURE__ */ r("div", { className: "mt-4 p-4 rounded-lg bg-amber-500/10 border border-amber-500/20 flex items-start gap-3", children: [
        /* @__PURE__ */ e(h, { className: "w-5 h-5 text-amber-600 flex-shrink-0 mt-0.5" }),
        /* @__PURE__ */ r("div", { children: [
          /* @__PURE__ */ e("div", { className: "font-medium text-amber-600", children: "Important" }),
          /* @__PURE__ */ e("p", { className: "text-sm text-[var(--text-secondary)]", children: 'Les escalades de type "Response Breach" sont generalement configurees avec des delais plus courts car la premiere reponse est critique pour la satisfaction client.' })
        ] })
      ] })
    ] }),
    /* @__PURE__ */ r("section", { id: "rules", className: "card p-6", children: [
      /* @__PURE__ */ r("h2", { className: "text-xl font-semibold mb-4 flex items-center gap-2", children: [
        /* @__PURE__ */ e("span", { className: "w-8 h-8 rounded-full bg-[var(--color-primary-600)] text-white flex items-center justify-center text-sm font-bold", children: "5" }),
        "Configuration des regles"
      ] }),
      /* @__PURE__ */ e("p", { className: "text-[var(--text-secondary)] mb-4", children: "Chaque regle d'escalade definit: le niveau, le type de declencheur, le delai et le role a notifier." }),
      /* @__PURE__ */ r("div", { className: "border border-[var(--border-color)] rounded-lg overflow-hidden", children: [
        /* @__PURE__ */ r("div", { className: "p-4 border-b border-[var(--border-color)]", children: [
          /* @__PURE__ */ r("div", { className: "flex items-center gap-2", children: [
            /* @__PURE__ */ e(u, { className: "w-5 h-5" }),
            /* @__PURE__ */ e("span", { className: "font-bold", children: "Escalation Configuration" })
          ] }),
          /* @__PURE__ */ e("div", { className: "text-sm text-[var(--text-secondary)]", children: "Configure escalation hierarchy and notification rules" })
        ] }),
        /* @__PURE__ */ r("div", { className: "p-4 border-b border-[var(--border-color)] bg-[var(--bg-secondary)]", children: [
          /* @__PURE__ */ r("div", { className: "flex items-center gap-2 mb-3", children: [
            /* @__PURE__ */ e(x, { className: "w-4 h-4" }),
            /* @__PURE__ */ e("span", { className: "font-medium", children: "Escalation Hierarchy" })
          ] }),
          /* @__PURE__ */ r("div", { className: "flex items-center gap-4", children: [
            /* @__PURE__ */ e("div", { className: "px-4 py-2 rounded-lg font-medium bg-blue-500/10 text-blue-600", children: "Supervisor" }),
            /* @__PURE__ */ e(i, { className: "w-4 h-4 text-[var(--text-tertiary)]" }),
            /* @__PURE__ */ e("div", { className: "px-4 py-2 rounded-lg font-medium bg-orange-500/10 text-orange-600", children: "Manager" }),
            /* @__PURE__ */ e(i, { className: "w-4 h-4 text-[var(--text-tertiary)]" }),
            /* @__PURE__ */ e("div", { className: "px-4 py-2 rounded-lg font-medium bg-red-500/10 text-red-600", children: "Director" })
          ] })
        ] }),
        ["Supervisor", "Manager", "Director"].map((s, t) => {
          const l = L.filter((a) => a.level === s), v = m[s];
          return /* @__PURE__ */ r("div", { className: "border-b border-[var(--border-color)] last:border-b-0", children: [
            /* @__PURE__ */ r("div", { className: `px-4 py-2 font-semibold ${v.color}`, children: [
              "Level ",
              t + 1,
              ": ",
              s
            ] }),
            /* @__PURE__ */ e("div", { className: "divide-y divide-[var(--border-color)]", children: l.map((a) => /* @__PURE__ */ r("div", { className: "p-4 flex items-center justify-between", children: [
              /* @__PURE__ */ r("div", { className: "flex items-center gap-4", children: [
                /* @__PURE__ */ r("div", { className: "flex items-center gap-2", children: [
                  a.trigger === "ResponseBreach" ? /* @__PURE__ */ e(n, { className: "w-4 h-4 text-[var(--text-secondary)]" }) : /* @__PURE__ */ e(h, { className: "w-4 h-4 text-[var(--text-secondary)]" }),
                  /* @__PURE__ */ e("span", { className: "font-medium", children: a.trigger === "ResponseBreach" ? "Response SLA Breach" : "Resolution SLA Breach" })
                ] }),
                /* @__PURE__ */ r("div", { className: "text-sm text-[var(--text-secondary)]", children: [
                  /* @__PURE__ */ e(n, { className: "w-3 h-3 inline mr-1" }),
                  a.delay === 0 ? "Immediate" : `${a.delay}min`
                ] }),
                /* @__PURE__ */ r("div", { className: "text-sm text-[var(--text-secondary)]", children: [
                  /* @__PURE__ */ e(p, { className: "w-3 h-3 inline mr-1" }),
                  a.role
                ] })
              ] }),
              /* @__PURE__ */ r("button", { className: "px-3 py-1 border border-[var(--border-color)] rounded text-sm flex items-center gap-1", children: [
                /* @__PURE__ */ e(f, { className: "w-3 h-3" }),
                "Edit"
              ] })
            ] }, `${s}-${a.delay}-${a.role}`)) })
          ] }, s);
        })
      ] }),
      /* @__PURE__ */ r("div", { className: "mt-6", children: [
        /* @__PURE__ */ e("h3", { className: "font-medium mb-3", children: "Formulaire d'edition" }),
        /* @__PURE__ */ r("div", { className: "p-4 border border-[var(--border-color)] rounded-lg bg-[var(--bg-secondary)]", children: [
          /* @__PURE__ */ r("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-4", children: [
            /* @__PURE__ */ r("div", { children: [
              /* @__PURE__ */ e("label", { className: "block text-sm font-medium mb-1", children: "Delay After Breach" }),
              /* @__PURE__ */ r("div", { className: "flex items-center gap-2", children: [
                /* @__PURE__ */ e("input", { type: "number", value: "30", className: "w-20 p-2 border border-[var(--border-color)] rounded bg-[var(--bg-primary)]", readOnly: !0 }),
                /* @__PURE__ */ e("span", { className: "text-sm text-[var(--text-secondary)]", children: "minutes" })
              ] })
            ] }),
            /* @__PURE__ */ r("div", { children: [
              /* @__PURE__ */ e("label", { className: "block text-sm font-medium mb-1", children: "Notify Role" }),
              /* @__PURE__ */ e("select", { className: "w-full p-2 border border-[var(--border-color)] rounded bg-[var(--bg-primary)]", children: /* @__PURE__ */ e("option", { children: "Support Supervisor" }) })
            ] }),
            /* @__PURE__ */ r("div", { children: [
              /* @__PURE__ */ e("label", { className: "block text-sm font-medium mb-1", children: "Status" }),
              /* @__PURE__ */ r("label", { className: "flex items-center gap-2", children: [
                /* @__PURE__ */ e("input", { type: "checkbox", checked: !0, className: "rounded", readOnly: !0 }),
                /* @__PURE__ */ e("span", { className: "text-sm", children: "Active" })
              ] })
            ] })
          ] }),
          /* @__PURE__ */ r("div", { className: "mt-4 flex justify-end gap-2", children: [
            /* @__PURE__ */ r("button", { className: "px-3 py-1.5 border border-[var(--border-color)] rounded text-sm flex items-center gap-1", children: [
              /* @__PURE__ */ e(y, { className: "w-3 h-3" }),
              "Cancel"
            ] }),
            /* @__PURE__ */ r("button", { className: "px-3 py-1.5 bg-[var(--color-primary-600)] text-white rounded text-sm flex items-center gap-1", children: [
              /* @__PURE__ */ e(w, { className: "w-3 h-3" }),
              "Save"
            ] })
          ] })
        ] })
      ] })
    ] }),
    /* @__PURE__ */ r("section", { id: "workflow", className: "card p-6", children: [
      /* @__PURE__ */ r("h2", { className: "text-xl font-semibold mb-4 flex items-center gap-2", children: [
        /* @__PURE__ */ e("span", { className: "w-8 h-8 rounded-full bg-[var(--color-primary-600)] text-white flex items-center justify-center text-sm font-bold", children: "6" }),
        "Comment fonctionne l'escalade"
      ] }),
      /* @__PURE__ */ e("p", { className: "text-[var(--text-secondary)] mb-4", children: "Le processus d'escalade suit une sequence d'etapes bien definie." }),
      /* @__PURE__ */ e("div", { className: "space-y-4", children: A.map((s) => /* @__PURE__ */ r("div", { className: "flex gap-4", children: [
        /* @__PURE__ */ e("div", { className: "w-10 h-10 rounded-full bg-blue-500 text-white flex items-center justify-center font-bold flex-shrink-0", children: s.step }),
        /* @__PURE__ */ r("div", { className: "flex-1 pt-2", children: [
          /* @__PURE__ */ e("h4", { className: "font-medium", children: s.title }),
          /* @__PURE__ */ e("p", { className: "text-sm text-[var(--text-secondary)]", children: s.description })
        ] })
      ] }, s.step)) }),
      /* @__PURE__ */ r("div", { className: "mt-6 p-4 bg-[var(--bg-secondary)] rounded-lg", children: [
        /* @__PURE__ */ e("h3", { className: "font-medium mb-3", children: "Exemple de scenario" }),
        /* @__PURE__ */ r("div", { className: "space-y-2 text-sm", children: [
          /* @__PURE__ */ r("p", { children: [
            /* @__PURE__ */ e("strong", { children: "Ticket critique:" }),
            " SLA Resolution = 4h"
          ] }),
          /* @__PURE__ */ r("div", { className: "pl-4 border-l-2 border-[var(--color-primary-600)] space-y-2 text-[var(--text-secondary)]", children: [
            /* @__PURE__ */ r("p", { children: [
              /* @__PURE__ */ e("span", { className: "font-medium text-[var(--text-primary)]", children: "T+0:" }),
              " Ticket cree, compteur SLA demarre"
            ] }),
            /* @__PURE__ */ r("p", { children: [
              /* @__PURE__ */ e("span", { className: "font-medium text-[var(--text-primary)]", children: "T+4h:" }),
              " SLA depasse → Escalade Supervisor immediate"
            ] }),
            /* @__PURE__ */ r("p", { children: [
              /* @__PURE__ */ e("span", { className: "font-medium text-[var(--text-primary)]", children: "T+6h:" }),
              " Non resolu → Delai 2h atteint → Escalade Manager"
            ] }),
            /* @__PURE__ */ r("p", { children: [
              /* @__PURE__ */ e("span", { className: "font-medium text-[var(--text-primary)]", children: "T+10h:" }),
              " Non resolu → Delai 4h atteint → Escalade Director"
            ] })
          ] })
        ] })
      ] })
    ] }),
    /* @__PURE__ */ r("section", { id: "faq", className: "card p-6", children: [
      /* @__PURE__ */ r("h2", { className: "text-xl font-semibold mb-4 flex items-center gap-2", children: [
        /* @__PURE__ */ e("span", { className: "w-8 h-8 rounded-full bg-[var(--color-primary-600)] text-white flex items-center justify-center text-sm font-bold", children: "7" }),
        /* @__PURE__ */ e(S, { className: "w-5 h-5" }),
        "Questions frequentes"
      ] }),
      /* @__PURE__ */ e("div", { className: "space-y-4", children: D.map((s) => /* @__PURE__ */ e("div", { className: "p-4 bg-[var(--bg-secondary)] rounded-lg", children: /* @__PURE__ */ r("div", { className: "flex items-start gap-3", children: [
        /* @__PURE__ */ e(k, { className: "w-5 h-5 text-[var(--color-primary-600)] flex-shrink-0 mt-0.5" }),
        /* @__PURE__ */ r("div", { children: [
          /* @__PURE__ */ e("h4", { className: "font-medium mb-2", children: s.question }),
          /* @__PURE__ */ e("p", { className: "text-sm text-[var(--text-secondary)]", children: s.answer })
        ] })
      ] }) }, s.question)) })
    ] }),
    /* @__PURE__ */ r("section", { id: "api", className: "card p-6", children: [
      /* @__PURE__ */ r("h2", { className: "text-xl font-semibold mb-4 flex items-center gap-2", children: [
        /* @__PURE__ */ e("span", { className: "w-8 h-8 rounded-full bg-[var(--color-primary-600)] text-white flex items-center justify-center text-sm font-bold", children: "8" }),
        "Reference API"
      ] }),
      /* @__PURE__ */ e("div", { className: "overflow-x-auto", children: /* @__PURE__ */ r("table", { className: "w-full text-sm", children: [
        /* @__PURE__ */ e("thead", { children: /* @__PURE__ */ r("tr", { className: "bg-[var(--bg-secondary)]", children: [
          /* @__PURE__ */ e("th", { className: "text-left py-2 px-3 rounded-tl-lg", children: "Methode" }),
          /* @__PURE__ */ e("th", { className: "text-left py-2 px-3", children: "Endpoint" }),
          /* @__PURE__ */ e("th", { className: "text-left py-2 px-3 rounded-tr-lg", children: "Description" })
        ] }) }),
        /* @__PURE__ */ e("tbody", { children: j.map((s, t) => /* @__PURE__ */ r("tr", { className: "border-b border-[var(--border-color)]", children: [
          /* @__PURE__ */ e("td", { className: "py-2 px-3", children: /* @__PURE__ */ e("span", { className: `px-2 py-0.5 rounded text-xs font-medium ${s.method === "GET" ? "bg-green-500/10 text-green-600" : s.method === "POST" ? "bg-yellow-500/10 text-yellow-600" : "bg-blue-500/10 text-blue-600"}`, children: s.method }) }),
          /* @__PURE__ */ e("td", { className: "py-2 px-3 font-mono text-xs", children: s.url }),
          /* @__PURE__ */ e("td", { className: "py-2 px-3 text-[var(--text-secondary)]", children: s.description })
        ] }, `${s.method}-${s.url}-${t}`)) })
      ] }) })
    ] }),
    /* @__PURE__ */ r("div", { className: "p-4 rounded-lg bg-blue-500/10 border border-blue-500/20 flex items-start gap-3", children: [
      /* @__PURE__ */ e(R, { className: "w-5 h-5 text-blue-600 flex-shrink-0 mt-0.5" }),
      /* @__PURE__ */ r("div", { children: [
        /* @__PURE__ */ e("div", { className: "font-medium text-blue-600", children: "Documentation complete" }),
        /* @__PURE__ */ e("p", { className: "text-sm text-[var(--text-secondary)]", children: "Vous avez parcouru l'ensemble de la documentation du module Support. Retournez a l'index pour explorer d'autres sections." })
      ] })
    ] }),
    /* @__PURE__ */ r("div", { className: "flex justify-between pt-6 border-t border-[var(--border-color)]", children: [
      /* @__PURE__ */ r(
        c,
        {
          to: "/system/docs/user/support-templates",
          className: "flex items-center gap-2 text-[var(--text-secondary)] hover:text-[var(--color-primary-600)]",
          children: [
            /* @__PURE__ */ e(i, { className: "w-4 h-4 rotate-180" }),
            "Templates de Reponse"
          ]
        }
      ),
      /* @__PURE__ */ r(
        c,
        {
          to: "/system/docs/user/support",
          className: "flex items-center gap-2 text-[var(--color-primary-600)] hover:underline",
          children: [
            "Index Module Support",
            /* @__PURE__ */ e(i, { className: "w-4 h-4" })
          ]
        }
      )
    ] })
  ] });
}
export {
  C as SupportEscalationDocPage
};
//# sourceMappingURL=SupportEscalationDocPage-C481D7pF.js.map
