import { jsxs as a, jsx as e } from "react/jsx-runtime";
import { Link as c } from "react-router-dom";
import { useTranslation as h } from "react-i18next";
import { Clock as n, CheckCircle as d, Shield as p, TrendingUp as x, Users as N, Bell as u, ArrowRight as s, AlertTriangle as o, XCircle as i, Pause as b, Info as y } from "lucide-react";
const v = [
  { priority: "Critical", color: "#dc2626", responseTime: 15, resolutionTime: 120, status: "Active" },
  { priority: "High", color: "#f97316", responseTime: 30, resolutionTime: 240, status: "Active" },
  { priority: "Medium", color: "#eab308", responseTime: 60, resolutionTime: 480, status: "Active" },
  { priority: "Low", color: "#3b82f6", responseTime: 120, resolutionTime: 1440, status: "Active" }
], g = [
  { level: "Supervisor", trigger: "Response SLA Breached", delay: "0 minutes", status: "Active" },
  { level: "Manager", trigger: "Resolution SLA Breached", delay: "30 minutes", status: "Active" },
  { level: "Director", trigger: "Resolution SLA Breached", delay: "2 hours", status: "Active" }
], m = (t) => t >= 1440 ? `${t / 1440}j` : t >= 60 ? `${t / 60}h` : `${t}min`;
function L() {
  const { t } = h("docs");
  return /* @__PURE__ */ a("div", { className: "space-y-8", children: [
    /* @__PURE__ */ a("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: t("breadcrumb.documentation") }),
      /* @__PURE__ */ e("span", { children: "/" }),
      /* @__PURE__ */ e(c, { to: "/system/docs/user", className: "hover:text-[var(--color-primary-600)]", children: t("breadcrumb.user") }),
      /* @__PURE__ */ e("span", { children: "/" }),
      /* @__PURE__ */ e("span", { children: t("support.sla.title") })
    ] }),
    /* @__PURE__ */ a("div", { children: [
      /* @__PURE__ */ a("h1", { className: "text-3xl font-bold mb-4 flex items-center gap-3", children: [
        /* @__PURE__ */ e(n, { className: "w-8 h-8 text-[var(--color-primary-600)]" }),
        t("support.sla.title")
      ] }),
      /* @__PURE__ */ e("p", { className: "text-lg text-[var(--text-secondary)]", children: t("support.sla.subtitle") }),
      /* @__PURE__ */ a("div", { className: "mt-4 flex items-center gap-2", children: [
        /* @__PURE__ */ e("span", { className: "px-3 py-1 text-xs rounded-full bg-cyan-500/10 text-cyan-600 border border-cyan-500/20", children: "Support" }),
        /* @__PURE__ */ e("span", { className: "px-3 py-1 text-xs rounded-full bg-purple-500/10 text-purple-600 border border-purple-500/20", children: "Administration" })
      ] })
    ] }),
    /* @__PURE__ */ a("div", { className: "card p-4 bg-[var(--bg-secondary)]", children: [
      /* @__PURE__ */ e("h3", { className: "font-semibold mb-3", children: "Table des matieres" }),
      /* @__PURE__ */ a("div", { 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 au module" }),
        /* @__PURE__ */ e("a", { href: "#performance", className: "text-[var(--color-primary-600)] hover:underline", children: "3. Performance SLA" }),
        /* @__PURE__ */ e("a", { href: "#configuration", className: "text-[var(--color-primary-600)] hover:underline", children: "4. Configuration" }),
        /* @__PURE__ */ e("a", { href: "#escalation", className: "text-[var(--color-primary-600)] hover:underline", children: "5. Regles d'escalade" }),
        /* @__PURE__ */ e("a", { href: "#indicators", className: "text-[var(--color-primary-600)] hover:underline", children: "6. Indicateurs" }),
        /* @__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__ */ a("section", { id: "introduction", className: "space-y-4", children: [
      /* @__PURE__ */ a("h2", { className: "text-2xl font-bold 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", "aria-label": "Section 1", children: "1" }),
        "Introduction"
      ] }),
      /* @__PURE__ */ a("div", { className: "card p-6", children: [
        /* @__PURE__ */ e("h3", { className: "font-semibold mb-3", children: "Qu'est-ce qu'un SLA ?" }),
        /* @__PURE__ */ a("p", { className: "text-[var(--text-secondary)] mb-4", children: [
          "Un ",
          /* @__PURE__ */ e("strong", { children: "SLA (Service Level Agreement)" }),
          " est un contrat definissant les niveaux de service garantis. Dans le contexte du support, il definit :"
        ] }),
        /* @__PURE__ */ a("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [
          /* @__PURE__ */ a("div", { className: "p-4 rounded-lg bg-[var(--bg-secondary)] border-l-4 border-blue-500", children: [
            /* @__PURE__ */ a("div", { className: "flex items-center gap-2 font-semibold mb-2", children: [
              /* @__PURE__ */ e(n, { className: "w-4 h-4 text-blue-500" }),
              "Temps de reponse"
            ] }),
            /* @__PURE__ */ e("p", { className: "text-sm text-[var(--text-secondary)]", children: "Delai maximum pour la premiere reponse d'un agent apres creation du ticket" })
          ] }),
          /* @__PURE__ */ a("div", { className: "p-4 rounded-lg bg-[var(--bg-secondary)] border-l-4 border-green-500", children: [
            /* @__PURE__ */ a("div", { className: "flex items-center gap-2 font-semibold mb-2", children: [
              /* @__PURE__ */ e(d, { className: "w-4 h-4 text-green-500" }),
              "Temps de resolution"
            ] }),
            /* @__PURE__ */ e("p", { className: "text-sm text-[var(--text-secondary)]", children: "Delai maximum pour resoudre completement et fermer le ticket" })
          ] })
        ] })
      ] }),
      /* @__PURE__ */ a("div", { className: "card p-6", children: [
        /* @__PURE__ */ e("h3", { className: "font-semibold mb-3", children: "Pourquoi configurer les SLA ?" }),
        /* @__PURE__ */ a("div", { className: "grid grid-cols-2 md:grid-cols-4 gap-4", children: [
          /* @__PURE__ */ a("div", { className: "text-center p-4", children: [
            /* @__PURE__ */ e(p, { className: "w-8 h-8 mx-auto text-[var(--color-primary-600)] mb-2" }),
            /* @__PURE__ */ e("div", { className: "font-medium", children: "Qualite de service" }),
            /* @__PURE__ */ e("p", { className: "text-xs text-[var(--text-tertiary)]", children: "Delais previsibles" })
          ] }),
          /* @__PURE__ */ a("div", { className: "text-center p-4", children: [
            /* @__PURE__ */ e(x, { className: "w-8 h-8 mx-auto text-[var(--color-primary-600)] mb-2" }),
            /* @__PURE__ */ e("div", { className: "font-medium", children: "Priorisation" }),
            /* @__PURE__ */ e("p", { className: "text-xs text-[var(--text-tertiary)]", children: "Tickets urgents en premier" })
          ] }),
          /* @__PURE__ */ a("div", { className: "text-center p-4", children: [
            /* @__PURE__ */ e(N, { className: "w-8 h-8 mx-auto text-[var(--color-primary-600)] mb-2" }),
            /* @__PURE__ */ e("div", { className: "font-medium", children: "Performance" }),
            /* @__PURE__ */ e("p", { className: "text-xs text-[var(--text-tertiary)]", children: "Suivi de l'equipe" })
          ] }),
          /* @__PURE__ */ a("div", { className: "text-center p-4", children: [
            /* @__PURE__ */ e(u, { className: "w-8 h-8 mx-auto text-[var(--color-primary-600)] mb-2" }),
            /* @__PURE__ */ e("div", { className: "font-medium", children: "Escalade" }),
            /* @__PURE__ */ e("p", { className: "text-xs text-[var(--text-tertiary)]", children: "Alertes automatiques" })
          ] })
        ] })
      ] })
    ] }),
    /* @__PURE__ */ a("section", { id: "access", className: "space-y-4", children: [
      /* @__PURE__ */ a("h2", { className: "text-2xl font-bold 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", "aria-label": "Section 2", children: "2" }),
        "Acces au module"
      ] }),
      /* @__PURE__ */ a("div", { className: "card p-6", children: [
        /* @__PURE__ */ e("h3", { className: "font-semibold mb-3", children: "Navigation" }),
        /* @__PURE__ */ a("div", { className: "flex items-center gap-2 p-3 bg-[var(--bg-secondary)] rounded-lg font-mono text-sm", children: [
          /* @__PURE__ */ e("span", { className: "text-[var(--text-tertiary)]", children: "Support" }),
          /* @__PURE__ */ e(s, { className: "w-4 h-4 text-[var(--text-tertiary)]" }),
          /* @__PURE__ */ e("span", { className: "text-[var(--text-tertiary)]", children: "Administration" }),
          /* @__PURE__ */ e(s, { className: "w-4 h-4 text-[var(--text-tertiary)]" }),
          /* @__PURE__ */ e("span", { className: "text-[var(--color-primary-600)] font-semibold", children: "SLA Configuration" })
        ] }),
        /* @__PURE__ */ a("div", { className: "mt-3 text-sm", children: [
          /* @__PURE__ */ e("strong", { children: "URL :" }),
          " ",
          /* @__PURE__ */ e("code", { className: "px-2 py-1 bg-[var(--bg-secondary)] rounded", children: "/support/admin/sla" })
        ] })
      ] }),
      /* @__PURE__ */ a("div", { className: "card p-6", children: [
        /* @__PURE__ */ e("h3", { className: "font-semibold mb-3", children: "Permissions requises" }),
        /* @__PURE__ */ a("table", { className: "w-full text-sm", children: [
          /* @__PURE__ */ e("thead", { children: /* @__PURE__ */ a("tr", { className: "border-b border-[var(--border-color)]", children: [
            /* @__PURE__ */ e("th", { className: "text-left py-2", children: "Permission" }),
            /* @__PURE__ */ e("th", { className: "text-left py-2", children: "Code" }),
            /* @__PURE__ */ e("th", { className: "text-left py-2", children: "Description" })
          ] }) }),
          /* @__PURE__ */ a("tbody", { children: [
            /* @__PURE__ */ a("tr", { className: "border-b border-[var(--border-color)]", children: [
              /* @__PURE__ */ e("td", { className: "py-2", children: "Voir SLA" }),
              /* @__PURE__ */ e("td", { className: "py-2", children: /* @__PURE__ */ e("code", { className: "px-2 py-0.5 bg-[var(--bg-secondary)] rounded text-xs", children: "support.sla.read" }) }),
              /* @__PURE__ */ e("td", { className: "py-2 text-[var(--text-secondary)]", children: "Consulter les configurations" })
            ] }),
            /* @__PURE__ */ a("tr", { children: [
              /* @__PURE__ */ e("td", { className: "py-2", children: "Modifier SLA" }),
              /* @__PURE__ */ e("td", { className: "py-2", children: /* @__PURE__ */ e("code", { className: "px-2 py-0.5 bg-[var(--bg-secondary)] rounded text-xs", children: "support.sla.update" }) }),
              /* @__PURE__ */ e("td", { className: "py-2 text-[var(--text-secondary)]", children: "Modifier les temps" })
            ] })
          ] })
        ] })
      ] })
    ] }),
    /* @__PURE__ */ a("section", { id: "performance", className: "space-y-4", children: [
      /* @__PURE__ */ a("h2", { className: "text-2xl font-bold 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", "aria-label": "Section 3", children: "3" }),
        "Performance SLA"
      ] }),
      /* @__PURE__ */ a("div", { className: "card p-6", children: [
        /* @__PURE__ */ e("h3", { className: "font-semibold mb-4", children: "Current SLA Performance" }),
        /* @__PURE__ */ a("div", { className: "grid grid-cols-2 md:grid-cols-4 gap-4 mb-4", children: [
          /* @__PURE__ */ a("div", { className: "p-4 rounded-lg bg-[var(--bg-secondary)] text-center", children: [
            /* @__PURE__ */ e("div", { className: "text-2xl font-bold", children: "125" }),
            /* @__PURE__ */ e("div", { className: "text-sm text-[var(--text-secondary)]", children: "Total Tickets" })
          ] }),
          /* @__PURE__ */ a("div", { className: "p-4 rounded-lg bg-green-500/10 text-center", children: [
            /* @__PURE__ */ e("div", { className: "text-2xl font-bold text-green-600", children: "112" }),
            /* @__PURE__ */ e("div", { className: "text-sm text-green-600", children: "Within SLA" })
          ] }),
          /* @__PURE__ */ a("div", { className: "p-4 rounded-lg bg-red-500/10 text-center", children: [
            /* @__PURE__ */ e("div", { className: "text-2xl font-bold text-red-600", children: "13" }),
            /* @__PURE__ */ e("div", { className: "text-sm text-red-600", children: "Breached" })
          ] }),
          /* @__PURE__ */ a("div", { className: "p-4 rounded-lg bg-green-500/10 text-center", children: [
            /* @__PURE__ */ e("div", { className: "text-2xl font-bold text-green-600", children: "89.6%" }),
            /* @__PURE__ */ e("div", { className: "text-sm text-green-600", children: "Compliance" })
          ] })
        ] }),
        /* @__PURE__ */ a("div", { className: "flex flex-wrap gap-2", children: [
          /* @__PURE__ */ e("span", { className: "text-sm text-[var(--text-secondary)]", children: "Breaches by Priority:" }),
          /* @__PURE__ */ e("span", { className: "px-2 py-1 text-xs rounded bg-red-600 text-white", children: "Critical: 2" }),
          /* @__PURE__ */ e("span", { className: "px-2 py-1 text-xs rounded bg-orange-500 text-white", children: "High: 5" }),
          /* @__PURE__ */ e("span", { className: "px-2 py-1 text-xs rounded bg-yellow-500 text-black", children: "Medium: 4" }),
          /* @__PURE__ */ e("span", { className: "px-2 py-1 text-xs rounded bg-blue-500 text-white", children: "Low: 2" })
        ] })
      ] }),
      /* @__PURE__ */ a("div", { className: "card p-6", children: [
        /* @__PURE__ */ e("h3", { className: "font-semibold mb-3", children: "Metriques expliquees" }),
        /* @__PURE__ */ a("table", { className: "w-full text-sm", children: [
          /* @__PURE__ */ e("thead", { children: /* @__PURE__ */ a("tr", { className: "border-b border-[var(--border-color)]", children: [
            /* @__PURE__ */ e("th", { className: "text-left py-2", children: "Metrique" }),
            /* @__PURE__ */ e("th", { className: "text-left py-2", children: "Description" }),
            /* @__PURE__ */ e("th", { className: "text-left py-2", children: "Couleur" })
          ] }) }),
          /* @__PURE__ */ a("tbody", { children: [
            /* @__PURE__ */ a("tr", { className: "border-b border-[var(--border-color)]", children: [
              /* @__PURE__ */ e("td", { className: "py-2 font-medium", children: "Total Tickets" }),
              /* @__PURE__ */ e("td", { className: "py-2 text-[var(--text-secondary)]", children: "Nombre total de tickets dans la periode" }),
              /* @__PURE__ */ a("td", { className: "py-2", children: [
                /* @__PURE__ */ e("span", { className: "w-3 h-3 inline-block rounded bg-gray-400" }),
                " Neutre"
              ] })
            ] }),
            /* @__PURE__ */ a("tr", { className: "border-b border-[var(--border-color)]", children: [
              /* @__PURE__ */ e("td", { className: "py-2 font-medium", children: "Within SLA" }),
              /* @__PURE__ */ e("td", { className: "py-2 text-[var(--text-secondary)]", children: "Tickets traites dans les delais" }),
              /* @__PURE__ */ a("td", { className: "py-2", children: [
                /* @__PURE__ */ e("span", { className: "w-3 h-3 inline-block rounded bg-green-500" }),
                " Vert"
              ] })
            ] }),
            /* @__PURE__ */ a("tr", { className: "border-b border-[var(--border-color)]", children: [
              /* @__PURE__ */ e("td", { className: "py-2 font-medium", children: "Breached" }),
              /* @__PURE__ */ e("td", { className: "py-2 text-[var(--text-secondary)]", children: "Tickets ayant depasse le SLA" }),
              /* @__PURE__ */ a("td", { className: "py-2", children: [
                /* @__PURE__ */ e("span", { className: "w-3 h-3 inline-block rounded bg-red-500" }),
                " Rouge"
              ] })
            ] }),
            /* @__PURE__ */ a("tr", { children: [
              /* @__PURE__ */ e("td", { className: "py-2 font-medium", children: "Compliance %" }),
              /* @__PURE__ */ e("td", { className: "py-2 text-[var(--text-secondary)]", children: "Pourcentage de conformite (objectif > 90%)" }),
              /* @__PURE__ */ a("td", { className: "py-2", children: [
                /* @__PURE__ */ e("span", { className: "w-3 h-3 inline-block rounded bg-green-500" }),
                " Vert si ≥90%"
              ] })
            ] })
          ] })
        ] })
      ] })
    ] }),
    /* @__PURE__ */ a("section", { id: "configuration", className: "space-y-4", children: [
      /* @__PURE__ */ a("h2", { className: "text-2xl font-bold 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", "aria-label": "Section 4", children: "4" }),
        "Configuration des temps"
      ] }),
      /* @__PURE__ */ a("div", { className: "card p-6", children: [
        /* @__PURE__ */ e("h3", { className: "font-semibold mb-4", children: "Response & Resolution Times" }),
        /* @__PURE__ */ e("div", { className: "overflow-x-auto", children: /* @__PURE__ */ a("table", { className: "w-full text-sm", children: [
          /* @__PURE__ */ e("thead", { children: /* @__PURE__ */ a("tr", { className: "bg-[var(--bg-secondary)]", children: [
            /* @__PURE__ */ e("th", { className: "text-left py-3 px-4", children: "Priority" }),
            /* @__PURE__ */ e("th", { className: "text-left py-3 px-4", children: "Response Time" }),
            /* @__PURE__ */ e("th", { className: "text-left py-3 px-4", children: "Resolution Time" }),
            /* @__PURE__ */ e("th", { className: "text-left py-3 px-4", children: "Status" }),
            /* @__PURE__ */ e("th", { className: "text-left py-3 px-4", children: "Actions" })
          ] }) }),
          /* @__PURE__ */ e("tbody", { children: v.map((r, l) => /* @__PURE__ */ a("tr", { className: l % 2 === 1 ? "bg-[var(--bg-secondary)]/50" : "", children: [
            /* @__PURE__ */ e("td", { className: "py-3 px-4", children: /* @__PURE__ */ a("div", { className: "flex items-center gap-2", children: [
              /* @__PURE__ */ e("span", { className: "w-3 h-3 rounded-full", style: { backgroundColor: r.color } }),
              r.priority
            ] }) }),
            /* @__PURE__ */ e("td", { className: "py-3 px-4", children: /* @__PURE__ */ a("div", { className: "flex items-center gap-2", children: [
              /* @__PURE__ */ e(
                "input",
                {
                  type: "text",
                  value: r.responseTime,
                  readOnly: !0,
                  className: "w-16 px-2 py-1 bg-[var(--bg-secondary)] border border-[var(--border-color)] rounded text-center"
                }
              ),
              /* @__PURE__ */ a("span", { className: "text-[var(--text-tertiary)]", children: [
                "min (",
                m(r.responseTime),
                ")"
              ] })
            ] }) }),
            /* @__PURE__ */ e("td", { className: "py-3 px-4", children: /* @__PURE__ */ a("div", { className: "flex items-center gap-2", children: [
              /* @__PURE__ */ e(
                "input",
                {
                  type: "text",
                  value: r.resolutionTime,
                  readOnly: !0,
                  className: "w-16 px-2 py-1 bg-[var(--bg-secondary)] border border-[var(--border-color)] rounded text-center"
                }
              ),
              /* @__PURE__ */ a("span", { className: "text-[var(--text-tertiary)]", children: [
                "min (",
                m(r.resolutionTime),
                ")"
              ] })
            ] }) }),
            /* @__PURE__ */ e("td", { className: "py-3 px-4", children: /* @__PURE__ */ e("span", { className: "px-2 py-1 text-xs rounded-full bg-green-500/10 text-green-600", children: r.status }) }),
            /* @__PURE__ */ e("td", { className: "py-3 px-4", children: /* @__PURE__ */ e("button", { className: "px-3 py-1 text-xs bg-[var(--bg-tertiary)] text-[var(--text-tertiary)] rounded", children: "Save" }) })
          ] }, r.priority)) })
        ] }) })
      ] }),
      /* @__PURE__ */ a("div", { className: "card p-6", children: [
        /* @__PURE__ */ e("h3", { className: "font-semibold mb-3", children: "Valeurs recommandees" }),
        /* @__PURE__ */ a("table", { className: "w-full text-sm", children: [
          /* @__PURE__ */ e("thead", { children: /* @__PURE__ */ a("tr", { className: "border-b border-[var(--border-color)]", children: [
            /* @__PURE__ */ e("th", { className: "text-left py-2", children: "Priorite" }),
            /* @__PURE__ */ e("th", { className: "text-left py-2", children: "Temps de reponse" }),
            /* @__PURE__ */ e("th", { className: "text-left py-2", children: "Temps de resolution" }),
            /* @__PURE__ */ e("th", { className: "text-left py-2", children: "Cas d'usage" })
          ] }) }),
          /* @__PURE__ */ a("tbody", { children: [
            /* @__PURE__ */ a("tr", { className: "border-b border-[var(--border-color)]", children: [
              /* @__PURE__ */ e("td", { className: "py-2", children: /* @__PURE__ */ a("span", { className: "flex items-center gap-2", children: [
                /* @__PURE__ */ e("span", { className: "w-3 h-3 rounded-full bg-red-600" }),
                " Critical"
              ] }) }),
              /* @__PURE__ */ e("td", { className: "py-2", children: "15 minutes" }),
              /* @__PURE__ */ e("td", { className: "py-2", children: "2 heures" }),
              /* @__PURE__ */ e("td", { className: "py-2 text-[var(--text-secondary)]", children: "Systeme en panne, perte de donnees" })
            ] }),
            /* @__PURE__ */ a("tr", { className: "border-b border-[var(--border-color)]", children: [
              /* @__PURE__ */ e("td", { className: "py-2", children: /* @__PURE__ */ a("span", { className: "flex items-center gap-2", children: [
                /* @__PURE__ */ e("span", { className: "w-3 h-3 rounded-full bg-orange-500" }),
                " High"
              ] }) }),
              /* @__PURE__ */ e("td", { className: "py-2", children: "30 minutes" }),
              /* @__PURE__ */ e("td", { className: "py-2", children: "4 heures" }),
              /* @__PURE__ */ e("td", { className: "py-2 text-[var(--text-secondary)]", children: "Fonctionnalite majeure indisponible" })
            ] }),
            /* @__PURE__ */ a("tr", { className: "border-b border-[var(--border-color)]", children: [
              /* @__PURE__ */ e("td", { className: "py-2", children: /* @__PURE__ */ a("span", { className: "flex items-center gap-2", children: [
                /* @__PURE__ */ e("span", { className: "w-3 h-3 rounded-full bg-yellow-500" }),
                " Medium"
              ] }) }),
              /* @__PURE__ */ e("td", { className: "py-2", children: "1 heure" }),
              /* @__PURE__ */ e("td", { className: "py-2", children: "8 heures" }),
              /* @__PURE__ */ e("td", { className: "py-2 text-[var(--text-secondary)]", children: "Probleme impactant le travail" })
            ] }),
            /* @__PURE__ */ a("tr", { children: [
              /* @__PURE__ */ e("td", { className: "py-2", children: /* @__PURE__ */ a("span", { className: "flex items-center gap-2", children: [
                /* @__PURE__ */ e("span", { className: "w-3 h-3 rounded-full bg-blue-500" }),
                " Low"
              ] }) }),
              /* @__PURE__ */ e("td", { className: "py-2", children: "2 heures" }),
              /* @__PURE__ */ e("td", { className: "py-2", children: "24 heures" }),
              /* @__PURE__ */ e("td", { className: "py-2 text-[var(--text-secondary)]", children: "Question, demande d'information" })
            ] })
          ] })
        ] })
      ] }),
      /* @__PURE__ */ a("div", { className: "p-4 rounded-lg bg-amber-500/10 border border-amber-500/20 flex items-start gap-3", children: [
        /* @__PURE__ */ e(o, { className: "w-5 h-5 text-amber-600 flex-shrink-0 mt-0.5" }),
        /* @__PURE__ */ a("div", { children: [
          /* @__PURE__ */ e("div", { className: "font-medium text-amber-600", children: "Contrainte de validation" }),
          /* @__PURE__ */ a("p", { className: "text-sm text-[var(--text-secondary)]", children: [
            "Le temps de reponse doit toujours etre inferieur ou egal au temps de resolution.",
            /* @__PURE__ */ e("br", {}),
            /* @__PURE__ */ e("span", { className: "text-red-500", children: "Exemple invalide : Response = 120 min, Resolution = 60 min" })
          ] })
        ] })
      ] })
    ] }),
    /* @__PURE__ */ a("section", { id: "escalation", className: "space-y-4", children: [
      /* @__PURE__ */ a("h2", { className: "text-2xl font-bold 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", "aria-label": "Section 5", children: "5" }),
        "Regles d'escalade"
      ] }),
      /* @__PURE__ */ a("div", { className: "card p-6", children: [
        /* @__PURE__ */ e("h3", { className: "font-semibold mb-4", children: "Escalation Rules" }),
        /* @__PURE__ */ e("div", { className: "overflow-x-auto", children: /* @__PURE__ */ a("table", { className: "w-full text-sm", children: [
          /* @__PURE__ */ e("thead", { children: /* @__PURE__ */ a("tr", { className: "bg-[var(--bg-secondary)]", children: [
            /* @__PURE__ */ e("th", { className: "text-left py-3 px-4", children: "Level" }),
            /* @__PURE__ */ e("th", { className: "text-left py-3 px-4", children: "Trigger" }),
            /* @__PURE__ */ e("th", { className: "text-left py-3 px-4", children: "Delay After Breach" }),
            /* @__PURE__ */ e("th", { className: "text-left py-3 px-4", children: "Status" })
          ] }) }),
          /* @__PURE__ */ e("tbody", { children: g.map((r, l) => /* @__PURE__ */ a("tr", { className: l % 2 === 1 ? "bg-[var(--bg-secondary)]/50" : "", children: [
            /* @__PURE__ */ e("td", { className: "py-3 px-4 font-medium", children: r.level }),
            /* @__PURE__ */ e("td", { className: "py-3 px-4", children: /* @__PURE__ */ e("span", { className: "px-2 py-1 text-xs rounded bg-red-500/10 text-red-600", children: r.trigger }) }),
            /* @__PURE__ */ e("td", { className: "py-3 px-4", children: r.delay }),
            /* @__PURE__ */ e("td", { className: "py-3 px-4", children: /* @__PURE__ */ e("span", { className: "px-2 py-1 text-xs rounded-full bg-green-500/10 text-green-600", children: r.status }) })
          ] }, r.level)) })
        ] }) })
      ] }),
      /* @__PURE__ */ a("div", { className: "card p-6", children: [
        /* @__PURE__ */ e("h3", { className: "font-semibold mb-4", children: "Flux d'escalade" }),
        /* @__PURE__ */ a("div", { className: "space-y-4", children: [
          /* @__PURE__ */ a("div", { className: "flex items-center gap-4", children: [
            /* @__PURE__ */ e("div", { className: "w-32 text-sm font-medium", children: "Ticket cree" }),
            /* @__PURE__ */ e("div", { className: "flex-1 h-2 bg-[var(--bg-secondary)] rounded" })
          ] }),
          /* @__PURE__ */ a("div", { className: "flex items-center gap-4", children: [
            /* @__PURE__ */ e("div", { className: "w-32 text-sm text-[var(--text-secondary)]", children: "30 min" }),
            /* @__PURE__ */ a("div", { className: "flex-1 flex items-center gap-2", children: [
              /* @__PURE__ */ e(i, { className: "w-4 h-4 text-red-500" }),
              /* @__PURE__ */ e("span", { className: "text-sm text-red-500", children: "Response SLA Breached" }),
              /* @__PURE__ */ e(s, { className: "w-4 h-4 text-[var(--text-tertiary)]" }),
              /* @__PURE__ */ e("span", { className: "px-2 py-1 text-xs rounded bg-blue-500/10 text-blue-600", children: "Supervisor alerte" })
            ] })
          ] }),
          /* @__PURE__ */ a("div", { className: "flex items-center gap-4", children: [
            /* @__PURE__ */ e("div", { className: "w-32 text-sm text-[var(--text-secondary)]", children: "4 heures" }),
            /* @__PURE__ */ a("div", { className: "flex-1 flex items-center gap-2", children: [
              /* @__PURE__ */ e(i, { className: "w-4 h-4 text-red-500" }),
              /* @__PURE__ */ e("span", { className: "text-sm text-red-500", children: "Resolution SLA Breached" }),
              /* @__PURE__ */ e(s, { className: "w-4 h-4 text-[var(--text-tertiary)]" }),
              /* @__PURE__ */ e("span", { className: "px-2 py-1 text-xs rounded bg-yellow-500/10 text-yellow-600", children: "Manager alerte (+30min)" })
            ] })
          ] }),
          /* @__PURE__ */ a("div", { className: "flex items-center gap-4", children: [
            /* @__PURE__ */ e("div", { className: "w-32 text-sm text-[var(--text-secondary)]", children: "+2 heures" }),
            /* @__PURE__ */ e("div", { className: "flex-1 flex items-center gap-2", children: /* @__PURE__ */ e("span", { className: "px-2 py-1 text-xs rounded bg-pink-500/10 text-pink-600", children: "Director alerte" }) })
          ] })
        ] })
      ] })
    ] }),
    /* @__PURE__ */ a("section", { id: "indicators", className: "space-y-4", children: [
      /* @__PURE__ */ a("h2", { className: "text-2xl font-bold 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", "aria-label": "Section 6", children: "6" }),
        "Indicateurs SLA"
      ] }),
      /* @__PURE__ */ a("div", { className: "card p-6", children: [
        /* @__PURE__ */ e("h3", { className: "font-semibold mb-4", children: "Badge SLA compact" }),
        /* @__PURE__ */ e("p", { className: "text-sm text-[var(--text-secondary)] mb-4", children: "Sur les listes de tickets, un indicateur compact montre l'etat SLA :" }),
        /* @__PURE__ */ a("div", { className: "grid grid-cols-2 md:grid-cols-4 gap-4", children: [
          /* @__PURE__ */ a("div", { className: "p-4 rounded-lg bg-green-500/10 border border-green-500/20 text-center", children: [
            /* @__PURE__ */ e(d, { className: "w-6 h-6 text-green-500 mx-auto mb-2" }),
            /* @__PURE__ */ e("div", { className: "font-medium text-green-600", children: "Within SLA" }),
            /* @__PURE__ */ e("div", { className: "text-xs text-[var(--text-tertiary)]", children: "Dans les delais" })
          ] }),
          /* @__PURE__ */ a("div", { className: "p-4 rounded-lg bg-yellow-500/10 border border-yellow-500/20 text-center", children: [
            /* @__PURE__ */ e(o, { className: "w-6 h-6 text-yellow-500 mx-auto mb-2" }),
            /* @__PURE__ */ e("div", { className: "font-medium text-yellow-600", children: "Warning" }),
            /* @__PURE__ */ e("div", { className: "text-xs text-[var(--text-tertiary)]", children: ">75% du temps" })
          ] }),
          /* @__PURE__ */ a("div", { className: "p-4 rounded-lg bg-red-500/10 border border-red-500/20 text-center", children: [
            /* @__PURE__ */ e(i, { className: "w-6 h-6 text-red-500 mx-auto mb-2" }),
            /* @__PURE__ */ e("div", { className: "font-medium text-red-600", children: "Breached" }),
            /* @__PURE__ */ e("div", { className: "text-xs text-[var(--text-tertiary)]", children: "SLA depasse" })
          ] }),
          /* @__PURE__ */ a("div", { className: "p-4 rounded-lg bg-gray-500/10 border border-gray-500/20 text-center", children: [
            /* @__PURE__ */ e(b, { className: "w-6 h-6 text-gray-500 mx-auto mb-2" }),
            /* @__PURE__ */ e("div", { className: "font-medium text-gray-600", children: "Paused" }),
            /* @__PURE__ */ e("div", { className: "text-xs text-[var(--text-tertiary)]", children: "Ticket On Hold" })
          ] })
        ] })
      ] }),
      /* @__PURE__ */ a("div", { className: "card p-6", children: [
        /* @__PURE__ */ e("h3", { className: "font-semibold mb-4", children: "Badge SLA detaille" }),
        /* @__PURE__ */ e("div", { className: "max-w-md", children: /* @__PURE__ */ a("div", { className: "border border-green-500 rounded-lg overflow-hidden", children: [
          /* @__PURE__ */ a("div", { className: "bg-green-500/10 px-4 py-2 flex items-center justify-between", children: [
            /* @__PURE__ */ e("span", { className: "font-medium text-green-600", children: "Within SLA" }),
            /* @__PURE__ */ e(d, { className: "w-4 h-4 text-green-500" })
          ] }),
          /* @__PURE__ */ a("div", { className: "p-4 space-y-3", children: [
            /* @__PURE__ */ a("div", { className: "flex justify-between text-sm", children: [
              /* @__PURE__ */ e("span", { className: "text-[var(--text-secondary)]", children: "Response" }),
              /* @__PURE__ */ e("span", { className: "text-green-600", children: "Completed ✓" })
            ] }),
            /* @__PURE__ */ a("div", { className: "flex justify-between text-sm", children: [
              /* @__PURE__ */ e("span", { className: "text-[var(--text-secondary)]", children: "Resolution" }),
              /* @__PURE__ */ e("span", { className: "font-medium", children: "2h 15m" })
            ] }),
            /* @__PURE__ */ a("div", { className: "space-y-1", children: [
              /* @__PURE__ */ e("div", { className: "h-2 bg-[var(--bg-secondary)] rounded-full overflow-hidden", children: /* @__PURE__ */ e("div", { className: "h-full w-[35%] bg-green-500 rounded-full" }) }),
              /* @__PURE__ */ e("div", { className: "text-xs text-[var(--text-tertiary)]", children: "35% du temps utilise" })
            ] })
          ] })
        ] }) })
      ] }),
      /* @__PURE__ */ a("div", { className: "card p-6", children: [
        /* @__PURE__ */ e("h3", { className: "font-semibold mb-3", children: "Etats de la barre de progression" }),
        /* @__PURE__ */ a("table", { className: "w-full text-sm", children: [
          /* @__PURE__ */ e("thead", { children: /* @__PURE__ */ a("tr", { className: "border-b border-[var(--border-color)]", children: [
            /* @__PURE__ */ e("th", { className: "text-left py-2", children: "% utilise" }),
            /* @__PURE__ */ e("th", { className: "text-left py-2", children: "Couleur" }),
            /* @__PURE__ */ e("th", { className: "text-left py-2", children: "Signification" })
          ] }) }),
          /* @__PURE__ */ a("tbody", { children: [
            /* @__PURE__ */ a("tr", { className: "border-b border-[var(--border-color)]", children: [
              /* @__PURE__ */ e("td", { className: "py-2", children: "0-74%" }),
              /* @__PURE__ */ e("td", { className: "py-2", children: /* @__PURE__ */ e("span", { className: "w-16 h-2 inline-block rounded bg-green-500" }) }),
              /* @__PURE__ */ e("td", { className: "py-2 text-[var(--text-secondary)]", children: "Confortable" })
            ] }),
            /* @__PURE__ */ a("tr", { className: "border-b border-[var(--border-color)]", children: [
              /* @__PURE__ */ e("td", { className: "py-2", children: "75-89%" }),
              /* @__PURE__ */ e("td", { className: "py-2", children: /* @__PURE__ */ e("span", { className: "w-16 h-2 inline-block rounded bg-yellow-500" }) }),
              /* @__PURE__ */ e("td", { className: "py-2 text-[var(--text-secondary)]", children: "Attention requise" })
            ] }),
            /* @__PURE__ */ a("tr", { children: [
              /* @__PURE__ */ e("td", { className: "py-2", children: "90-100%" }),
              /* @__PURE__ */ e("td", { className: "py-2", children: /* @__PURE__ */ e("span", { className: "w-16 h-2 inline-block rounded bg-red-500" }) }),
              /* @__PURE__ */ e("td", { className: "py-2 text-[var(--text-secondary)]", children: "Urgent" })
            ] })
          ] })
        ] })
      ] })
    ] }),
    /* @__PURE__ */ a("section", { id: "faq", className: "space-y-4", children: [
      /* @__PURE__ */ a("h2", { className: "text-2xl font-bold 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", "aria-label": "Section 7", children: "7" }),
        "FAQ"
      ] }),
      /* @__PURE__ */ e("div", { className: "space-y-4", children: [
        {
          q: "Puis-je desactiver le SLA pour certains tickets ?",
          a: `Le SLA s'applique automatiquement a tous les tickets selon leur priorite. Pour "desactiver" temporairement le SLA, placez le ticket en statut On Hold ce qui met les compteurs en pause.`
        },
        {
          q: "Comment sont calculees les metriques de conformite ?",
          a: 'Compliance % = (Tickets Within SLA / Total Tickets) x 100. Un ticket est considere "Within SLA" si la premiere reponse ET la resolution ont ete effectuees dans les delais configures.'
        },
        {
          q: "Que se passe-t-il quand un ticket est escalade ?",
          a: "Le niveau d'escalade est mis a jour, une notification est envoyee au role responsable, une entree est ajoutee dans l'historique, et le ticket apparait dans le tableau de bord d'escalade."
        },
        {
          q: "Les weekends sont-ils comptes dans le SLA ?",
          a: 'Dans la configuration actuelle, le SLA compte en temps calendaire continu (24/7). Le temps pause uniquement quand le ticket est mis en "On Hold".'
        }
      ].map((r, l) => /* @__PURE__ */ a("div", { className: "card p-4", children: [
        /* @__PURE__ */ a("div", { className: "font-medium mb-2", children: [
          "Q",
          l + 1,
          ": ",
          r.q
        ] }),
        /* @__PURE__ */ e("p", { className: "text-sm text-[var(--text-secondary)]", children: r.a })
      ] }, r.q)) })
    ] }),
    /* @__PURE__ */ a("section", { id: "api", className: "space-y-4", children: [
      /* @__PURE__ */ a("h2", { className: "text-2xl font-bold 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", "aria-label": "Section 8", children: "8" }),
        "Reference API"
      ] }),
      /* @__PURE__ */ a("div", { className: "card p-6", children: [
        /* @__PURE__ */ e("h3", { className: "font-semibold mb-4", children: "Endpoints SLA" }),
        /* @__PURE__ */ e("div", { className: "overflow-x-auto", children: /* @__PURE__ */ a("table", { className: "w-full text-sm font-mono", children: [
          /* @__PURE__ */ e("thead", { children: /* @__PURE__ */ a("tr", { className: "border-b border-[var(--border-color)]", children: [
            /* @__PURE__ */ e("th", { className: "text-left py-2", children: "Methode" }),
            /* @__PURE__ */ e("th", { className: "text-left py-2", children: "Endpoint" }),
            /* @__PURE__ */ e("th", { className: "text-left py-2 font-sans", children: "Description" })
          ] }) }),
          /* @__PURE__ */ a("tbody", { className: "text-xs", children: [
            /* @__PURE__ */ a("tr", { className: "border-b border-[var(--border-color)]", children: [
              /* @__PURE__ */ e("td", { className: "py-2", children: /* @__PURE__ */ e("span", { className: "px-2 py-0.5 rounded bg-green-500/10 text-green-600", children: "GET" }) }),
              /* @__PURE__ */ e("td", { className: "py-2", children: "/api/support/sla/configurations" }),
              /* @__PURE__ */ e("td", { className: "py-2 font-sans text-[var(--text-secondary)]", children: "Liste toutes les configurations" })
            ] }),
            /* @__PURE__ */ a("tr", { className: "border-b border-[var(--border-color)]", children: [
              /* @__PURE__ */ e("td", { className: "py-2", children: /* @__PURE__ */ e("span", { className: "px-2 py-0.5 rounded bg-blue-500/10 text-blue-600", children: "PUT" }) }),
              /* @__PURE__ */ a("td", { className: "py-2", children: [
                "/api/support/sla/configurations/",
                "{priority}"
              ] }),
              /* @__PURE__ */ e("td", { className: "py-2 font-sans text-[var(--text-secondary)]", children: "Met a jour une configuration" })
            ] }),
            /* @__PURE__ */ a("tr", { className: "border-b border-[var(--border-color)]", children: [
              /* @__PURE__ */ e("td", { className: "py-2", children: /* @__PURE__ */ e("span", { className: "px-2 py-0.5 rounded bg-green-500/10 text-green-600", children: "GET" }) }),
              /* @__PURE__ */ e("td", { className: "py-2", children: "/api/support/sla/escalation-rules" }),
              /* @__PURE__ */ e("td", { className: "py-2 font-sans text-[var(--text-secondary)]", children: "Liste les regles d'escalade" })
            ] }),
            /* @__PURE__ */ a("tr", { className: "border-b border-[var(--border-color)]", children: [
              /* @__PURE__ */ e("td", { className: "py-2", children: /* @__PURE__ */ e("span", { className: "px-2 py-0.5 rounded bg-green-500/10 text-green-600", children: "GET" }) }),
              /* @__PURE__ */ e("td", { className: "py-2", children: "/api/support/sla/breached" }),
              /* @__PURE__ */ e("td", { className: "py-2 font-sans text-[var(--text-secondary)]", children: "Liste les tickets en violation" })
            ] }),
            /* @__PURE__ */ a("tr", { className: "border-b border-[var(--border-color)]", children: [
              /* @__PURE__ */ e("td", { className: "py-2", children: /* @__PURE__ */ e("span", { className: "px-2 py-0.5 rounded bg-green-500/10 text-green-600", children: "GET" }) }),
              /* @__PURE__ */ e("td", { className: "py-2", children: "/api/support/sla/metrics" }),
              /* @__PURE__ */ e("td", { className: "py-2 font-sans text-[var(--text-secondary)]", children: "Recupere les metriques SLA" })
            ] }),
            /* @__PURE__ */ a("tr", { children: [
              /* @__PURE__ */ e("td", { className: "py-2", children: /* @__PURE__ */ e("span", { className: "px-2 py-0.5 rounded bg-yellow-500/10 text-yellow-600", children: "POST" }) }),
              /* @__PURE__ */ a("td", { className: "py-2", children: [
                "/api/support/sla/tickets/",
                "{ticketId}",
                "/escalate"
              ] }),
              /* @__PURE__ */ e("td", { className: "py-2 font-sans text-[var(--text-secondary)]", children: "Escalade manuelle" })
            ] })
          ] })
        ] }) })
      ] })
    ] }),
    /* @__PURE__ */ a("div", { className: "p-4 rounded-lg bg-blue-500/10 border border-blue-500/20 flex items-start gap-3", children: [
      /* @__PURE__ */ e(y, { className: "w-5 h-5 text-blue-600 flex-shrink-0 mt-0.5" }),
      /* @__PURE__ */ a("div", { children: [
        /* @__PURE__ */ e("div", { className: "font-medium text-blue-600", children: "About SLA Configuration" }),
        /* @__PURE__ */ a("ul", { className: "text-sm text-[var(--text-secondary)] mt-1 space-y-1", children: [
          /* @__PURE__ */ e("li", { children: "Response Time: Maximum time allowed for first agent response" }),
          /* @__PURE__ */ e("li", { children: "Resolution Time: Maximum time allowed to fully resolve ticket" }),
          /* @__PURE__ */ e("li", { children: "SLA Pause: Timers automatically pause when ticket is On Hold" }),
          /* @__PURE__ */ e("li", { children: "Escalation: Breached tickets are automatically escalated" })
        ] })
      ] })
    ] }),
    /* @__PURE__ */ a("div", { className: "flex justify-between pt-6 border-t border-[var(--border-color)]", children: [
      /* @__PURE__ */ a(
        c,
        {
          to: "/system/docs/user/modules",
          className: "flex items-center gap-2 text-[var(--text-secondary)] hover:text-[var(--color-primary-600)]",
          children: [
            /* @__PURE__ */ e(s, { className: "w-4 h-4 rotate-180" }),
            "Modules"
          ]
        }
      ),
      /* @__PURE__ */ a(
        c,
        {
          to: "/system/docs/user",
          className: "flex items-center gap-2 text-[var(--color-primary-600)] hover:underline",
          children: [
            "Documentation Utilisateur",
            /* @__PURE__ */ e(s, { className: "w-4 h-4" })
          ]
        }
      )
    ] })
  ] });
}
export {
  L as SlaDocPage
};
//# sourceMappingURL=SlaDocPage-hLFLqLVa.js.map
