import { jsxs as t, jsx as e } from "react/jsx-runtime";
import { Link as l } from "react-router-dom";
import { useTranslation as h } from "react-i18next";
import { UserCheck as n, Clock as a, Filter as p, Gauge as u, ArrowRight as c, Shield as x, Search as b, AlertTriangle as m, Eye as f, HelpCircle as g, MessageSquare as N, Info as v } from "lucide-react";
const y = [
  { number: "TKT-2024-001", title: "Probleme de connexion", requester: "Jean Dupont", priority: "High", status: "InProgress", sla: "warning", slaText: "45min left", date: "09/01/2026 14:30" },
  { number: "TKT-2024-004", title: "Erreur critique serveur", requester: "Marie Martin", priority: "Critical", status: "Open", sla: "breached", slaText: "SLA Breached", date: "09/01/2026 10:15" },
  { number: "TKT-2024-005", title: "Mise a jour mot de passe", requester: "Pierre Durand", priority: "Medium", status: "InProgress", sla: "ok", slaText: "4h left", date: "08/01/2026 16:00" },
  { number: "TKT-2024-008", title: "Question facturation", requester: "Sophie Bernard", priority: "Low", status: "OnHold", sla: null, slaText: null, date: "07/01/2026 09:45" }
], d = {
  Open: { label: "Ouvert", color: "bg-yellow-500/10 text-yellow-600 border-yellow-500/20" },
  InProgress: { label: "En cours", color: "bg-blue-500/10 text-blue-600 border-blue-500/20" },
  OnHold: { label: "En attente", color: "bg-orange-500/10 text-orange-600 border-orange-500/20" },
  Resolved: { label: "Resolu", color: "bg-green-500/10 text-green-600 border-green-500/20" }
}, o = {
  Low: { label: "Basse", color: "bg-blue-100 text-blue-800" },
  Medium: { label: "Moyenne", color: "bg-yellow-100 text-yellow-800" },
  High: { label: "Haute", color: "bg-orange-100 text-orange-800" },
  Critical: { label: "Critique", color: "bg-red-600 text-white" }
}, w = [
  { state: "OK", description: "Temps restant > 8h", color: "bg-green-500/10 text-green-600", icon: a },
  { state: "Warning", description: "Temps restant < 8h", color: "bg-yellow-500/10 text-yellow-600", icon: a },
  { state: "Critical", description: "Temps restant < 2h", color: "bg-orange-500/10 text-orange-600", icon: a },
  { state: "Breached", description: "SLA depasse", color: "bg-red-500/10 text-red-600", icon: m }
], k = [
  {
    question: "Pourquoi certains tickets n'ont pas d'indicateur SLA ?",
    answer: `Les tickets en statut "On Hold" (en attente) ont leur SLA en pause. Le compteur reprend lorsque le ticket repasse en statut actif. Les tickets sans priorite definie n'ont pas de SLA configure.`
  },
  {
    question: "Comment fonctionne le tri des tickets ?",
    answer: "Par defaut, les tickets sont tries par priorite (Critique > Haute > Moyenne > Basse) puis par temps SLA restant. Les tickets en danger sont affiches en premier."
  },
  {
    question: 'Que signifie le badge "SLA Breached" ?',
    answer: "Ce badge indique que le temps de resolution garanti pour ce ticket a ete depasse. Une escalade automatique peut avoir ete declenchee selon la configuration."
  },
  {
    question: "Comment filtrer mes tickets urgents ?",
    answer: 'Utilisez le filtre de priorite pour afficher uniquement les tickets Critical et High. Combinez avec le filtre de statut "Open" pour voir les tickets urgents non commences.'
  }
], T = [
  { method: "GET", url: "/api/support/tickets/my", description: "Liste paginee des tickets de l'agent connecte" },
  { method: "GET", url: "/api/support/tickets/{id}", description: "Detail d'un ticket assigne" },
  { method: "PUT", url: "/api/support/tickets/{id}/status", description: "Changer le statut d'un ticket" },
  { method: "POST", url: "/api/support/tickets/{id}/comments", description: "Ajouter un commentaire" }
];
function C() {
  const { t: i } = h("docs");
  return /* @__PURE__ */ t("div", { className: "space-y-8", children: [
    /* @__PURE__ */ t("div", { className: "flex items-center gap-2 text-sm text-[var(--text-secondary)]", children: [
      /* @__PURE__ */ e(l, { to: "/system/docs", className: "hover:text-[var(--color-primary-600)]", children: i("breadcrumb.documentation") }),
      /* @__PURE__ */ e("span", { children: "/" }),
      /* @__PURE__ */ e(l, { to: "/system/docs/user", className: "hover:text-[var(--color-primary-600)]", children: i("breadcrumb.user") }),
      /* @__PURE__ */ e("span", { children: "/" }),
      /* @__PURE__ */ e(l, { to: "/system/docs/user/support", className: "hover:text-[var(--color-primary-600)]", children: i("breadcrumb.support") }),
      /* @__PURE__ */ e("span", { children: "/" }),
      /* @__PURE__ */ e("span", { children: i("support.myTickets.title") })
    ] }),
    /* @__PURE__ */ t("div", { children: [
      /* @__PURE__ */ t("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)]" }),
        "Mes Tickets (Agent)"
      ] }),
      /* @__PURE__ */ e("p", { className: "text-lg text-[var(--text-secondary)]", children: "File d'attente personnelle de l'agent avec suivi SLA integre et indicateurs de priorite." }),
      /* @__PURE__ */ t("div", { className: "mt-4 flex items-center gap-2", children: [
        /* @__PURE__ */ e("span", { className: "px-3 py-1 text-xs rounded-full bg-green-500/10 text-green-600 border border-green-500/20", children: "Agent" }),
        /* @__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: "SLA" })
      ] })
    ] }),
    /* @__PURE__ */ t("div", { className: "card p-4 bg-[var(--bg-secondary)]", children: [
      /* @__PURE__ */ e("h2", { className: "font-semibold mb-3", children: "Table des matieres" }),
      /* @__PURE__ */ t("nav", { className: "grid grid-cols-2 md:grid-cols-3 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: "#overview", className: "text-[var(--color-primary-600)] hover:underline", children: "3. Vue d'ensemble" }),
        /* @__PURE__ */ e("a", { href: "#sla", className: "text-[var(--color-primary-600)] hover:underline", children: "4. Indicateurs SLA" }),
        /* @__PURE__ */ e("a", { href: "#filters", className: "text-[var(--color-primary-600)] hover:underline", children: "5. Filtres" }),
        /* @__PURE__ */ e("a", { href: "#faq", className: "text-[var(--color-primary-600)] hover:underline", children: "6. FAQ" }),
        /* @__PURE__ */ e("a", { href: "#api", className: "text-[var(--color-primary-600)] hover:underline", children: "7. Reference API" })
      ] })
    ] }),
    /* @__PURE__ */ t("section", { id: "introduction", className: "card p-6", children: [
      /* @__PURE__ */ t("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: `La page "Mes Tickets" est concue specifiquement pour les agents de support. Elle affiche uniquement les tickets assignes a l'agent connecte, avec des indicateurs SLA en temps reel pour prioriser efficacement le travail.` }),
      /* @__PURE__ */ t("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [
        /* @__PURE__ */ t("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(n, { className: "w-4 h-4 text-green-500" }) }),
          /* @__PURE__ */ t("div", { children: [
            /* @__PURE__ */ e("div", { className: "font-medium", children: "File personnelle" }),
            /* @__PURE__ */ e("div", { className: "text-sm text-[var(--text-secondary)]", children: "Uniquement vos tickets assignes" })
          ] })
        ] }),
        /* @__PURE__ */ t("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(a, { className: "w-4 h-4 text-orange-500" }) }),
          /* @__PURE__ */ t("div", { children: [
            /* @__PURE__ */ e("div", { className: "font-medium", children: "Suivi SLA temps reel" }),
            /* @__PURE__ */ e("div", { className: "text-sm text-[var(--text-secondary)]", children: "Badges colores selon l'urgence" })
          ] })
        ] }),
        /* @__PURE__ */ t("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(p, { className: "w-4 h-4 text-blue-500" }) }),
          /* @__PURE__ */ t("div", { children: [
            /* @__PURE__ */ e("div", { className: "font-medium", children: "Filtres simplifies" }),
            /* @__PURE__ */ e("div", { className: "text-sm text-[var(--text-secondary)]", children: "Par statut et priorite" })
          ] })
        ] }),
        /* @__PURE__ */ t("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(u, { className: "w-4 h-4 text-purple-500" }) }),
          /* @__PURE__ */ t("div", { children: [
            /* @__PURE__ */ e("div", { className: "font-medium", children: "Prioritisation automatique" }),
            /* @__PURE__ */ e("div", { className: "text-sm text-[var(--text-secondary)]", children: "Tri par urgence et SLA" })
          ] })
        ] })
      ] })
    ] }),
    /* @__PURE__ */ t("section", { id: "access", className: "card p-6", children: [
      /* @__PURE__ */ t("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__ */ t("div", { className: "mb-4", children: [
        /* @__PURE__ */ e("div", { className: "text-sm font-medium mb-2", children: "Navigation" }),
        /* @__PURE__ */ t("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(c, { 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: "My Tickets" })
        ] })
      ] }),
      /* @__PURE__ */ t("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/my-tickets" })
      ] }),
      /* @__PURE__ */ t("div", { children: [
        /* @__PURE__ */ t("div", { className: "flex items-center gap-2 mb-2", children: [
          /* @__PURE__ */ e(x, { className: "w-4 h-4 text-[var(--color-primary-600)]" }),
          /* @__PURE__ */ e("span", { className: "text-sm font-medium", children: "Permissions requises" })
        ] }),
        /* @__PURE__ */ t("table", { className: "w-full text-sm", children: [
          /* @__PURE__ */ e("thead", { children: /* @__PURE__ */ t("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__ */ t("tbody", { children: [
            /* @__PURE__ */ t("tr", { className: "border-b border-[var(--border-color)]", children: [
              /* @__PURE__ */ e("td", { className: "py-2 px-3", children: "Voir ses tickets" }),
              /* @__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.tickets.read" }) })
            ] }),
            /* @__PURE__ */ t("tr", { children: [
              /* @__PURE__ */ e("td", { className: "py-2 px-3", children: "Modifier ses tickets" }),
              /* @__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.tickets.update" }) })
            ] })
          ] })
        ] })
      ] })
    ] }),
    /* @__PURE__ */ t("section", { id: "overview", className: "card p-6", children: [
      /* @__PURE__ */ t("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" }),
        "Vue d'ensemble"
      ] }),
      /* @__PURE__ */ e("p", { className: "text-[var(--text-secondary)] mb-4", children: "L'interface est optimisee pour le travail quotidien de l'agent avec un focus sur les indicateurs SLA." }),
      /* @__PURE__ */ t("div", { className: "border border-[var(--border-color)] rounded-lg overflow-hidden", children: [
        /* @__PURE__ */ t("div", { className: "p-4 border-b border-[var(--border-color)]", children: [
          /* @__PURE__ */ t("div", { className: "flex items-center gap-2", children: [
            /* @__PURE__ */ e(n, { className: "w-5 h-5" }),
            /* @__PURE__ */ e("span", { className: "font-bold", children: "My Tickets" })
          ] }),
          /* @__PURE__ */ e("div", { className: "text-sm text-[var(--text-secondary)]", children: "Tickets assigned to you (4 total)" })
        ] }),
        /* @__PURE__ */ e("div", { className: "p-4 border-b border-[var(--border-color)] bg-[var(--bg-secondary)]", children: /* @__PURE__ */ t("div", { className: "flex items-center gap-4", children: [
          /* @__PURE__ */ t("div", { className: "flex-1 relative", children: [
            /* @__PURE__ */ e(b, { className: "absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-[var(--text-secondary)]" }),
            /* @__PURE__ */ e(
              "input",
              {
                type: "text",
                placeholder: "Search tickets...",
                className: "w-full pl-10 pr-4 py-2 border border-[var(--border-color)] rounded-lg bg-[var(--bg-primary)]",
                readOnly: !0
              }
            )
          ] }),
          /* @__PURE__ */ t("button", { className: "px-4 py-2 border border-[var(--border-color)] rounded-lg flex items-center gap-2 text-sm bg-[var(--bg-primary)]", children: [
            /* @__PURE__ */ e(p, { className: "w-4 h-4" }),
            "Filters"
          ] })
        ] }) }),
        /* @__PURE__ */ e("div", { className: "overflow-x-auto", children: /* @__PURE__ */ t("table", { className: "w-full text-sm", children: [
          /* @__PURE__ */ e("thead", { className: "bg-[var(--bg-secondary)]", children: /* @__PURE__ */ t("tr", { children: [
            /* @__PURE__ */ e("th", { className: "text-left p-3 font-medium", children: "Ticket" }),
            /* @__PURE__ */ e("th", { className: "text-left p-3 font-medium", children: "Title" }),
            /* @__PURE__ */ e("th", { className: "text-left p-3 font-medium", children: "Requester" }),
            /* @__PURE__ */ e("th", { className: "text-left p-3 font-medium", children: "Priority" }),
            /* @__PURE__ */ e("th", { className: "text-left p-3 font-medium", children: "Status" }),
            /* @__PURE__ */ e("th", { className: "text-left p-3 font-medium", children: "SLA" }),
            /* @__PURE__ */ e("th", { className: "text-left p-3 font-medium", children: "Created" }),
            /* @__PURE__ */ e("th", { className: "text-right p-3 font-medium", children: "Actions" })
          ] }) }),
          /* @__PURE__ */ e("tbody", { children: y.map((r) => /* @__PURE__ */ t("tr", { className: "border-b border-[var(--border-color)] hover:bg-[var(--bg-hover)]", children: [
            /* @__PURE__ */ e("td", { className: "p-3", children: /* @__PURE__ */ e("span", { className: "font-mono text-xs font-medium text-[var(--color-primary-600)]", children: r.number }) }),
            /* @__PURE__ */ e("td", { className: "p-3 font-medium max-w-[200px] truncate", children: r.title }),
            /* @__PURE__ */ e("td", { className: "p-3 text-[var(--text-secondary)]", children: r.requester }),
            /* @__PURE__ */ e("td", { className: "p-3", children: /* @__PURE__ */ e("span", { className: `px-2 py-1 text-xs rounded ${o[r.priority]?.color}`, children: o[r.priority]?.label }) }),
            /* @__PURE__ */ e("td", { className: "p-3", children: /* @__PURE__ */ e("span", { className: `px-2 py-1 text-xs rounded border ${d[r.status]?.color}`, children: d[r.status]?.label }) }),
            /* @__PURE__ */ t("td", { className: "p-3", children: [
              r.sla === "breached" && /* @__PURE__ */ t("span", { className: "inline-flex items-center gap-1 px-2 py-0.5 text-xs font-medium rounded bg-red-500/10 text-red-600", children: [
                /* @__PURE__ */ e(m, { className: "w-3 h-3" }),
                r.slaText
              ] }),
              r.sla === "warning" && /* @__PURE__ */ t("span", { className: "inline-flex items-center gap-1 px-2 py-0.5 text-xs font-medium rounded bg-orange-500/10 text-orange-600", children: [
                /* @__PURE__ */ e(a, { className: "w-3 h-3" }),
                r.slaText
              ] }),
              r.sla === "ok" && /* @__PURE__ */ t("span", { className: "inline-flex items-center gap-1 px-2 py-0.5 text-xs font-medium rounded bg-yellow-500/10 text-yellow-600", children: [
                /* @__PURE__ */ e(a, { className: "w-3 h-3" }),
                r.slaText
              ] })
            ] }),
            /* @__PURE__ */ e("td", { className: "p-3 text-[var(--text-secondary)] text-xs", children: r.date }),
            /* @__PURE__ */ e("td", { className: "p-3 text-right", children: /* @__PURE__ */ e("button", { className: "p-1.5 border border-[var(--border-color)] rounded hover:bg-[var(--bg-secondary)]", children: /* @__PURE__ */ e(f, { className: "w-4 h-4" }) }) })
          ] }, r.number)) })
        ] }) })
      ] })
    ] }),
    /* @__PURE__ */ t("section", { id: "sla", className: "card p-6", children: [
      /* @__PURE__ */ t("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" }),
        "Indicateurs SLA"
      ] }),
      /* @__PURE__ */ e("p", { className: "text-[var(--text-secondary)] mb-4", children: "Chaque ticket affiche un badge SLA colore indiquant le temps restant avant la date limite de resolution." }),
      /* @__PURE__ */ e("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4 mb-6", children: w.map((r) => /* @__PURE__ */ t("div", { className: `p-4 rounded-lg ${r.color} flex items-center gap-3`, children: [
        /* @__PURE__ */ e(r.icon, { className: "w-6 h-6" }),
        /* @__PURE__ */ t("div", { children: [
          /* @__PURE__ */ e("div", { className: "font-semibold", children: r.state }),
          /* @__PURE__ */ e("div", { className: "text-sm opacity-80", children: r.description })
        ] })
      ] }, r.state)) }),
      /* @__PURE__ */ t("div", { className: "p-4 bg-[var(--bg-secondary)] rounded-lg", children: [
        /* @__PURE__ */ e("h3", { className: "font-medium mb-3", children: "Calcul du temps SLA" }),
        /* @__PURE__ */ t("div", { className: "space-y-2 text-sm text-[var(--text-secondary)]", children: [
          /* @__PURE__ */ t("div", { className: "flex items-center gap-2", children: [
            /* @__PURE__ */ e("span", { className: "w-6 h-6 rounded-full bg-blue-500 text-white flex items-center justify-center text-xs font-bold", children: "1" }),
            /* @__PURE__ */ e("span", { children: "Le SLA est calcule a partir de la date de creation du ticket" })
          ] }),
          /* @__PURE__ */ t("div", { className: "flex items-center gap-2", children: [
            /* @__PURE__ */ e("span", { className: "w-6 h-6 rounded-full bg-blue-500 text-white flex items-center justify-center text-xs font-bold", children: "2" }),
            /* @__PURE__ */ e("span", { children: "Le temps de resolution depend de la priorite (Critical: 4h, High: 8h, Medium: 24h, Low: 72h)" })
          ] }),
          /* @__PURE__ */ t("div", { className: "flex items-center gap-2", children: [
            /* @__PURE__ */ e("span", { className: "w-6 h-6 rounded-full bg-blue-500 text-white flex items-center justify-center text-xs font-bold", children: "3" }),
            /* @__PURE__ */ e("span", { children: 'Le compteur est pause lorsque le ticket est en statut "On Hold"' })
          ] }),
          /* @__PURE__ */ t("div", { className: "flex items-center gap-2", children: [
            /* @__PURE__ */ e("span", { className: "w-6 h-6 rounded-full bg-blue-500 text-white flex items-center justify-center text-xs font-bold", children: "4" }),
            /* @__PURE__ */ e("span", { children: "Le badge passe en rouge si le SLA est depasse (breach)" })
          ] })
        ] })
      ] })
    ] }),
    /* @__PURE__ */ t("section", { id: "filters", className: "card p-6", children: [
      /* @__PURE__ */ t("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" }),
        "Filtres disponibles"
      ] }),
      /* @__PURE__ */ t("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [
        /* @__PURE__ */ t("div", { className: "p-4 border border-[var(--border-color)] rounded-lg", children: [
          /* @__PURE__ */ e("h3", { className: "font-medium mb-3", children: "Filtre par statut" }),
          /* @__PURE__ */ e("div", { className: "flex flex-wrap gap-2", children: Object.entries(d).map(([r, s]) => /* @__PURE__ */ e("span", { className: `px-3 py-1 text-xs rounded border ${s.color}`, children: s.label }, r)) }),
          /* @__PURE__ */ e("p", { className: "text-sm text-[var(--text-secondary)] mt-3", children: "Filtrez par statut pour voir uniquement les tickets ouverts, en cours, etc." })
        ] }),
        /* @__PURE__ */ t("div", { className: "p-4 border border-[var(--border-color)] rounded-lg", children: [
          /* @__PURE__ */ e("h3", { className: "font-medium mb-3", children: "Filtre par priorite" }),
          /* @__PURE__ */ e("div", { className: "flex flex-wrap gap-2", children: Object.entries(o).map(([r, s]) => /* @__PURE__ */ e("span", { className: `px-3 py-1 text-xs rounded ${s.color}`, children: s.label }, r)) }),
          /* @__PURE__ */ e("p", { className: "text-sm text-[var(--text-secondary)] mt-3", children: "Concentrez-vous sur les tickets urgents en filtrant par priorite." })
        ] })
      ] }),
      /* @__PURE__ */ t("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(m, { className: "w-5 h-5 text-amber-600 flex-shrink-0 mt-0.5" }),
        /* @__PURE__ */ t("div", { children: [
          /* @__PURE__ */ e("div", { className: "font-medium text-amber-600", children: "Conseil" }),
          /* @__PURE__ */ e("p", { className: "text-sm text-[var(--text-secondary)]", children: 'Utilisez le bouton "Clear Filters" pour reinitialiser tous les filtres rapidement.' })
        ] })
      ] })
    ] }),
    /* @__PURE__ */ t("section", { id: "faq", className: "card p-6", children: [
      /* @__PURE__ */ t("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" }),
        /* @__PURE__ */ e(g, { className: "w-5 h-5" }),
        "Questions frequentes"
      ] }),
      /* @__PURE__ */ e("div", { className: "space-y-4", children: k.map((r) => /* @__PURE__ */ e("div", { className: "p-4 bg-[var(--bg-secondary)] rounded-lg", children: /* @__PURE__ */ t("div", { className: "flex items-start gap-3", children: [
        /* @__PURE__ */ e(N, { className: "w-5 h-5 text-[var(--color-primary-600)] flex-shrink-0 mt-0.5" }),
        /* @__PURE__ */ t("div", { children: [
          /* @__PURE__ */ e("h4", { className: "font-medium mb-2", children: r.question }),
          /* @__PURE__ */ e("p", { className: "text-sm text-[var(--text-secondary)]", children: r.answer })
        ] })
      ] }) }, r.question)) })
    ] }),
    /* @__PURE__ */ t("section", { id: "api", className: "card p-6", children: [
      /* @__PURE__ */ t("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" }),
        "Reference API"
      ] }),
      /* @__PURE__ */ e("div", { className: "overflow-x-auto", children: /* @__PURE__ */ t("table", { className: "w-full text-sm", children: [
        /* @__PURE__ */ e("thead", { children: /* @__PURE__ */ t("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: T.map((r, s) => /* @__PURE__ */ t("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 ${r.method === "GET" ? "bg-green-500/10 text-green-600" : r.method === "POST" ? "bg-yellow-500/10 text-yellow-600" : "bg-blue-500/10 text-blue-600"}`, children: r.method }) }),
          /* @__PURE__ */ e("td", { className: "py-2 px-3 font-mono text-xs", children: r.url }),
          /* @__PURE__ */ e("td", { className: "py-2 px-3 text-[var(--text-secondary)]", children: r.description })
        ] }, s)) })
      ] }) })
    ] }),
    /* @__PURE__ */ t("div", { className: "p-4 rounded-lg bg-blue-500/10 border border-blue-500/20 flex items-start gap-3", children: [
      /* @__PURE__ */ e(v, { className: "w-5 h-5 text-blue-600 flex-shrink-0 mt-0.5" }),
      /* @__PURE__ */ t("div", { children: [
        /* @__PURE__ */ e("div", { className: "font-medium text-blue-600", children: "Pour aller plus loin" }),
        /* @__PURE__ */ e("p", { className: "text-sm text-[var(--text-secondary)]", children: 'Consultez la documentation "Configuration SLA" pour comprendre comment sont configures les temps de reponse et resolution.' })
      ] })
    ] }),
    /* @__PURE__ */ t("div", { className: "flex justify-between pt-6 border-t border-[var(--border-color)]", children: [
      /* @__PURE__ */ t(
        l,
        {
          to: "/system/docs/user/support-tickets",
          className: "flex items-center gap-2 text-[var(--text-secondary)] hover:text-[var(--color-primary-600)]",
          children: [
            /* @__PURE__ */ e(c, { className: "w-4 h-4 rotate-180" }),
            "Gestion des Tickets"
          ]
        }
      ),
      /* @__PURE__ */ t(
        l,
        {
          to: "/system/docs/user/support-sla",
          className: "flex items-center gap-2 text-[var(--color-primary-600)] hover:underline",
          children: [
            "Configuration SLA",
            /* @__PURE__ */ e(c, { className: "w-4 h-4" })
          ]
        }
      )
    ] })
  ] });
}
export {
  C as SupportMyTicketsDocPage
};
//# sourceMappingURL=SupportMyTicketsDocPage-DeRUdAIi.js.map
