import { jsxs as r, jsx as e } from "react/jsx-runtime";
import { Link as l } from "react-router-dom";
import { useTranslation as v } from "react-i18next";
import { Headphones as p, Eye as c, Filter as h, LayoutGrid as d, Plus as i, ArrowRight as n, Shield as N, Search as g, List as u, Columns as x, Trash2 as b, HelpCircle as f, MessageSquare as y, Info as w } from "lucide-react";
const k = [
  { label: "Total", value: "248", color: "var(--text-primary)" },
  { label: "Open", value: "45", color: "var(--warning-text)", border: "var(--warning-border)" },
  { label: "In Progress", value: "32", color: "var(--info-text)", border: "var(--info-border)" },
  { label: "On Hold", value: "8", color: "var(--warning-text)", border: "var(--warning-border)" },
  { label: "Resolved", value: "128", color: "var(--success-text)", border: "var(--success-border)" },
  { label: "Closed", value: "35", color: "var(--text-secondary)", border: "var(--border-strong)" },
  { label: "Critical", value: "3", color: "var(--error-text)", border: "var(--error-border)" },
  { label: "High Priority", value: "12", color: "var(--warning-text)", border: "var(--warning-border)" }
], T = [
  { number: "TKT-2024-001", title: "Probleme de connexion", type: "Bug", status: "Open", priority: "High", comments: 3, date: "09/01/2026" },
  { number: "TKT-2024-002", title: "Demande nouvelle fonctionnalite", type: "Feature Request", status: "InProgress", priority: "Medium", comments: 5, date: "08/01/2026" },
  { number: "TKT-2024-003", title: "Question sur facturation", type: "Question", status: "Resolved", priority: "Low", comments: 2, date: "07/01/2026" },
  { number: "TKT-2024-004", title: "Erreur critique serveur", type: "Bug", status: "Open", priority: "Critical", comments: 8, date: "09/01/2026" }
], o = {
  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" },
  Closed: { label: "Ferme", color: "bg-gray-500/10 text-gray-600 border-gray-500/20" },
  Rejected: { label: "Rejete", color: "bg-red-500/10 text-red-600 border-red-500/20" }
}, m = {
  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" }
}, q = [
  {
    question: "Comment filtrer les tickets par plusieurs criteres ?",
    answer: `Cliquez sur le bouton "Filters" pour afficher les options de filtrage. Vous pouvez combiner les filtres par statut, type et priorite. La recherche full-text s'applique sur le titre et le contenu.`
  },
  {
    question: "Quelle est la difference entre les trois vues ?",
    answer: "La vue Tableau offre une liste detaillee avec toutes les colonnes. La vue Cartes presente chaque ticket de facon visuelle. La vue Kanban organise les tickets par statut en colonnes drag-and-drop."
  },
  {
    question: "Comment creer un nouveau ticket ?",
    answer: 'Cliquez sur le bouton "New Ticket" en haut a droite. Remplissez le formulaire avec le titre, la description, le type et la priorite. Le ticket sera automatiquement assigne selon vos regles de routage.'
  },
  {
    question: "Puis-je supprimer un ticket ?",
    answer: `Oui, cliquez sur l'icone corbeille dans la colonne Actions. Une confirmation sera demandee. Note: La suppression est definitive. Pour conserver l'historique, preferez le statut "Rejete" ou "Ferme".`
  }
], C = [
  { method: "GET", url: "/api/support/tickets", description: "Liste paginee des tickets avec filtres" },
  { method: "GET", url: "/api/support/tickets/{id}", description: "Detail d'un ticket" },
  { method: "POST", url: "/api/support/tickets", description: "Creer un nouveau ticket" },
  { method: "PUT", url: "/api/support/tickets/{id}", description: "Modifier un ticket" },
  { method: "DELETE", url: "/api/support/tickets/{id}", description: "Supprimer un ticket" },
  { method: "GET", url: "/api/support/tickets/stats", description: "Statistiques des tickets" }
];
function O() {
  const { t: a } = v("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(l, { to: "/system/docs", className: "hover:text-[var(--color-primary-600)]", children: a("breadcrumb.documentation") }),
      /* @__PURE__ */ e("span", { children: "/" }),
      /* @__PURE__ */ e(l, { to: "/system/docs/user", className: "hover:text-[var(--color-primary-600)]", children: a("breadcrumb.user") }),
      /* @__PURE__ */ e("span", { children: "/" }),
      /* @__PURE__ */ e(l, { to: "/system/docs/user/support", className: "hover:text-[var(--color-primary-600)]", children: a("breadcrumb.support") }),
      /* @__PURE__ */ e("span", { children: "/" }),
      /* @__PURE__ */ e("span", { children: a("support.tickets.title") })
    ] }),
    /* @__PURE__ */ r("div", { children: [
      /* @__PURE__ */ r("h1", { className: "text-3xl font-bold mb-4 flex items-center gap-3", children: [
        /* @__PURE__ */ e(p, { className: "w-8 h-8 text-[var(--color-primary-600)]" }),
        a("support.tickets.title")
      ] }),
      /* @__PURE__ */ e("p", { className: "text-lg text-[var(--text-secondary)]", children: a("support.tickets.subtitle") }),
      /* @__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-purple-500/10 text-purple-600 border border-purple-500/20", children: "Support" }),
        /* @__PURE__ */ e("span", { className: "px-3 py-1 text-xs rounded-full bg-blue-500/10 text-blue-600 border border-blue-500/20", children: "Multi-vues" })
      ] })
    ] }),
    /* @__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-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: "#stats", className: "text-[var(--color-primary-600)] hover:underline", children: "4. Statistiques" }),
        /* @__PURE__ */ e("a", { href: "#views", className: "text-[var(--color-primary-600)] hover:underline", children: "5. Modes de vue" }),
        /* @__PURE__ */ e("a", { href: "#filters", className: "text-[var(--color-primary-600)] hover:underline", children: "6. Filtres" }),
        /* @__PURE__ */ e("a", { href: "#actions", className: "text-[var(--color-primary-600)] hover:underline", children: "7. Actions" }),
        /* @__PURE__ */ e("a", { href: "#faq", className: "text-[var(--color-primary-600)] hover:underline", children: "8. FAQ" }),
        /* @__PURE__ */ e("a", { href: "#api", className: "text-[var(--color-primary-600)] hover:underline", children: "9. 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: "La page Gestion des Tickets est le centre nevralgique du module Support. Elle permet aux agents et superviseurs de visualiser l'ensemble des tickets, d'appliquer des filtres avances et de travailler efficacement grace aux differents modes d'affichage." }),
      /* @__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(c, { className: "w-4 h-4 text-blue-500" }) }),
          /* @__PURE__ */ r("div", { children: [
            /* @__PURE__ */ e("div", { className: "font-medium", children: "Multi-vues" }),
            /* @__PURE__ */ e("div", { className: "text-sm text-[var(--text-secondary)]", children: "Tableau, Cartes ou Kanban selon vos preferences" })
          ] })
        ] }),
        /* @__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(h, { className: "w-4 h-4 text-purple-500" }) }),
          /* @__PURE__ */ r("div", { children: [
            /* @__PURE__ */ e("div", { className: "font-medium", children: "Filtres avances" }),
            /* @__PURE__ */ e("div", { className: "text-sm text-[var(--text-secondary)]", children: "Par statut, type, priorite et recherche" })
          ] })
        ] }),
        /* @__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(d, { className: "w-4 h-4 text-green-500" }) }),
          /* @__PURE__ */ r("div", { children: [
            /* @__PURE__ */ e("div", { className: "font-medium", children: "Statistiques temps reel" }),
            /* @__PURE__ */ e("div", { className: "text-sm text-[var(--text-secondary)]", children: "8 KPIs affiches en permanence" })
          ] })
        ] }),
        /* @__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(i, { className: "w-4 h-4 text-orange-500" }) }),
          /* @__PURE__ */ r("div", { children: [
            /* @__PURE__ */ e("div", { className: "font-medium", children: "Actions rapides" }),
            /* @__PURE__ */ e("div", { className: "text-sm text-[var(--text-secondary)]", children: "Creation, consultation, suppression" })
          ] })
        ] })
      ] })
    ] }),
    /* @__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(n, { 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: "Tickets" })
        ] })
      ] }),
      /* @__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/tickets" })
      ] }),
      /* @__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 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__ */ r("tr", { className: "border-b border-[var(--border-color)]", children: [
              /* @__PURE__ */ e("td", { className: "py-2 px-3", children: "Creer un ticket" }),
              /* @__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.create" }) })
            ] }),
            /* @__PURE__ */ r("tr", { className: "border-b border-[var(--border-color)]", children: [
              /* @__PURE__ */ e("td", { className: "py-2 px-3", children: "Modifier un ticket" }),
              /* @__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__ */ r("tr", { children: [
              /* @__PURE__ */ e("td", { className: "py-2 px-3", children: "Supprimer un ticket" }),
              /* @__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.delete" }) })
            ] })
          ] })
        ] })
      ] })
    ] }),
    /* @__PURE__ */ r("section", { id: "overview", 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" }),
        "Vue d'ensemble"
      ] }),
      /* @__PURE__ */ e("p", { className: "text-[var(--text-secondary)] mb-4", children: "L'interface se compose de quatre zones principales : l'en-tete avec le titre et bouton de creation, les statistiques, la barre de recherche/filtres, et la zone d'affichage des tickets." }),
      /* @__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)] flex items-center justify-between", children: [
          /* @__PURE__ */ r("div", { children: [
            /* @__PURE__ */ r("div", { className: "flex items-center gap-2", children: [
              /* @__PURE__ */ e(p, { className: "w-5 h-5" }),
              /* @__PURE__ */ e("span", { className: "font-bold", children: "Support Tickets" })
            ] }),
            /* @__PURE__ */ e("div", { className: "text-sm text-[var(--text-secondary)]", children: "Manage all support tickets and requests" })
          ] }),
          /* @__PURE__ */ r("button", { className: "px-4 py-2 bg-[var(--color-primary-600)] text-white rounded-lg flex items-center gap-2 text-sm", children: [
            /* @__PURE__ */ e(i, { className: "w-4 h-4" }),
            "New Ticket"
          ] })
        ] }),
        /* @__PURE__ */ e("div", { className: "p-4 border-b border-[var(--border-color)] bg-[var(--bg-secondary)]", children: /* @__PURE__ */ e("div", { className: "grid grid-cols-4 md:grid-cols-8 gap-2", children: k.map((t) => /* @__PURE__ */ r(
          "div",
          {
            className: "p-2 bg-[var(--bg-primary)] rounded-lg text-center",
            style: { borderLeft: t.border ? `3px solid ${t.border}` : void 0 },
            children: [
              /* @__PURE__ */ e("div", { className: "text-lg font-bold", style: { color: t.color }, children: t.value }),
              /* @__PURE__ */ e("div", { className: "text-xs text-[var(--text-secondary)]", children: t.label })
            ]
          },
          t.label
        )) }) }),
        /* @__PURE__ */ r("div", { className: "p-4 border-b border-[var(--border-color)] flex items-center gap-4", children: [
          /* @__PURE__ */ r("div", { className: "flex-1 relative", children: [
            /* @__PURE__ */ e(g, { 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__ */ r("button", { className: "px-4 py-2 border border-[var(--border-color)] rounded-lg flex items-center gap-2 text-sm", children: [
            /* @__PURE__ */ e(h, { className: "w-4 h-4" }),
            "Filters"
          ] }),
          /* @__PURE__ */ r("div", { className: "flex items-center border border-[var(--border-color)] rounded-lg", children: [
            /* @__PURE__ */ e("button", { className: "p-2 bg-[var(--color-primary-600)] text-white rounded-l-lg", children: /* @__PURE__ */ e(u, { className: "w-4 h-4" }) }),
            /* @__PURE__ */ e("button", { className: "p-2 hover:bg-[var(--bg-secondary)]", children: /* @__PURE__ */ e(d, { className: "w-4 h-4" }) }),
            /* @__PURE__ */ e("button", { className: "p-2 hover:bg-[var(--bg-secondary)] rounded-r-lg", children: /* @__PURE__ */ e(x, { className: "w-4 h-4" }) })
          ] })
        ] }),
        /* @__PURE__ */ e("div", { className: "overflow-x-auto", children: /* @__PURE__ */ r("table", { className: "w-full text-sm", children: [
          /* @__PURE__ */ e("thead", { className: "bg-[var(--bg-secondary)]", children: /* @__PURE__ */ r("tr", { children: [
            /* @__PURE__ */ e("th", { className: "text-left p-3 font-medium", children: "#" }),
            /* @__PURE__ */ e("th", { className: "text-left p-3 font-medium", children: "Title" }),
            /* @__PURE__ */ e("th", { className: "text-left p-3 font-medium", children: "Type" }),
            /* @__PURE__ */ e("th", { className: "text-left p-3 font-medium", children: "Status" }),
            /* @__PURE__ */ e("th", { className: "text-left p-3 font-medium", children: "Priority" }),
            /* @__PURE__ */ e("th", { className: "text-left p-3 font-medium", children: "Comments" }),
            /* @__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: T.map((t) => /* @__PURE__ */ r("tr", { className: "border-b border-[var(--border-color)] hover:bg-[var(--bg-hover)]", children: [
            /* @__PURE__ */ e("td", { className: "p-3 font-mono text-xs", children: t.number }),
            /* @__PURE__ */ e("td", { className: "p-3 font-medium", children: t.title }),
            /* @__PURE__ */ e("td", { className: "p-3 text-[var(--text-secondary)]", children: t.type }),
            /* @__PURE__ */ e("td", { className: "p-3", children: /* @__PURE__ */ e("span", { className: `px-2 py-1 text-xs rounded border ${o[t.status]?.color}`, children: o[t.status]?.label || t.status }) }),
            /* @__PURE__ */ e("td", { className: "p-3", children: /* @__PURE__ */ e("span", { className: `px-2 py-1 text-xs rounded ${m[t.priority]?.color}`, children: m[t.priority]?.label }) }),
            /* @__PURE__ */ e("td", { className: "p-3", children: t.comments }),
            /* @__PURE__ */ e("td", { className: "p-3 text-[var(--text-secondary)]", children: t.date }),
            /* @__PURE__ */ e("td", { className: "p-3 text-right", children: /* @__PURE__ */ r("div", { className: "flex items-center justify-end gap-1", children: [
              /* @__PURE__ */ e("button", { className: "p-1.5 hover:bg-[var(--bg-secondary)] rounded", children: /* @__PURE__ */ e(c, { className: "w-4 h-4" }) }),
              /* @__PURE__ */ e("button", { className: "p-1.5 hover:bg-[var(--bg-secondary)] rounded text-[var(--error-text)]", children: /* @__PURE__ */ e(b, { className: "w-4 h-4" }) })
            ] }) })
          ] }, t.number)) })
        ] }) })
      ] })
    ] }),
    /* @__PURE__ */ r("section", { id: "stats", 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" }),
        "Statistiques"
      ] }),
      /* @__PURE__ */ e("p", { className: "text-[var(--text-secondary)] mb-4", children: "La barre de statistiques affiche 8 metriques cles en temps reel, actualisees automatiquement." }),
      /* @__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", children: "Metrique" }),
          /* @__PURE__ */ e("th", { className: "text-left py-2 px-3", children: "Description" }),
          /* @__PURE__ */ e("th", { className: "text-left py-2 px-3", children: "Couleur" })
        ] }) }),
        /* @__PURE__ */ r("tbody", { children: [
          /* @__PURE__ */ r("tr", { className: "border-b border-[var(--border-color)]", children: [
            /* @__PURE__ */ e("td", { className: "py-2 px-3 font-medium", children: "Total" }),
            /* @__PURE__ */ e("td", { className: "py-2 px-3 text-[var(--text-secondary)]", children: "Nombre total de tickets" }),
            /* @__PURE__ */ e("td", { className: "py-2 px-3", children: "Neutre" })
          ] }),
          /* @__PURE__ */ r("tr", { className: "border-b border-[var(--border-color)]", children: [
            /* @__PURE__ */ e("td", { className: "py-2 px-3 font-medium", children: "Open" }),
            /* @__PURE__ */ e("td", { className: "py-2 px-3 text-[var(--text-secondary)]", children: "Tickets ouverts non assignes" }),
            /* @__PURE__ */ e("td", { className: "py-2 px-3", children: /* @__PURE__ */ e("span", { className: "px-2 py-0.5 rounded text-xs bg-yellow-500/10 text-yellow-600", children: "Jaune" }) })
          ] }),
          /* @__PURE__ */ r("tr", { className: "border-b border-[var(--border-color)]", children: [
            /* @__PURE__ */ e("td", { className: "py-2 px-3 font-medium", children: "In Progress" }),
            /* @__PURE__ */ e("td", { className: "py-2 px-3 text-[var(--text-secondary)]", children: "Tickets en cours de traitement" }),
            /* @__PURE__ */ e("td", { className: "py-2 px-3", children: /* @__PURE__ */ e("span", { className: "px-2 py-0.5 rounded text-xs bg-blue-500/10 text-blue-600", children: "Bleu" }) })
          ] }),
          /* @__PURE__ */ r("tr", { className: "border-b border-[var(--border-color)]", children: [
            /* @__PURE__ */ e("td", { className: "py-2 px-3 font-medium", children: "On Hold" }),
            /* @__PURE__ */ e("td", { className: "py-2 px-3 text-[var(--text-secondary)]", children: "Tickets en attente d'information" }),
            /* @__PURE__ */ e("td", { className: "py-2 px-3", children: /* @__PURE__ */ e("span", { className: "px-2 py-0.5 rounded text-xs bg-orange-500/10 text-orange-600", children: "Orange" }) })
          ] }),
          /* @__PURE__ */ r("tr", { className: "border-b border-[var(--border-color)]", children: [
            /* @__PURE__ */ e("td", { className: "py-2 px-3 font-medium", children: "Resolved" }),
            /* @__PURE__ */ e("td", { className: "py-2 px-3 text-[var(--text-secondary)]", children: "Tickets resolus" }),
            /* @__PURE__ */ e("td", { className: "py-2 px-3", children: /* @__PURE__ */ e("span", { className: "px-2 py-0.5 rounded text-xs bg-green-500/10 text-green-600", children: "Vert" }) })
          ] }),
          /* @__PURE__ */ r("tr", { className: "border-b border-[var(--border-color)]", children: [
            /* @__PURE__ */ e("td", { className: "py-2 px-3 font-medium", children: "Closed" }),
            /* @__PURE__ */ e("td", { className: "py-2 px-3 text-[var(--text-secondary)]", children: "Tickets fermes definitivement" }),
            /* @__PURE__ */ e("td", { className: "py-2 px-3", children: /* @__PURE__ */ e("span", { className: "px-2 py-0.5 rounded text-xs bg-gray-500/10 text-gray-600", children: "Gris" }) })
          ] }),
          /* @__PURE__ */ r("tr", { className: "border-b border-[var(--border-color)]", children: [
            /* @__PURE__ */ e("td", { className: "py-2 px-3 font-medium", children: "Critical" }),
            /* @__PURE__ */ e("td", { className: "py-2 px-3 text-[var(--text-secondary)]", children: "Tickets de priorite critique" }),
            /* @__PURE__ */ e("td", { className: "py-2 px-3", children: /* @__PURE__ */ e("span", { className: "px-2 py-0.5 rounded text-xs bg-red-500/10 text-red-600", children: "Rouge" }) })
          ] }),
          /* @__PURE__ */ r("tr", { children: [
            /* @__PURE__ */ e("td", { className: "py-2 px-3 font-medium", children: "High Priority" }),
            /* @__PURE__ */ e("td", { className: "py-2 px-3 text-[var(--text-secondary)]", children: "Tickets de haute priorite" }),
            /* @__PURE__ */ e("td", { className: "py-2 px-3", children: /* @__PURE__ */ e("span", { className: "px-2 py-0.5 rounded text-xs bg-orange-500/10 text-orange-600", children: "Orange" }) })
          ] })
        ] })
      ] }) })
    ] }),
    /* @__PURE__ */ r("section", { id: "views", 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" }),
        "Modes de vue"
      ] }),
      /* @__PURE__ */ e("p", { className: "text-[var(--text-secondary)] mb-4", children: "Trois modes d'affichage sont disponibles pour s'adapter a votre facon de travailler." }),
      /* @__PURE__ */ r("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-4", children: [
        /* @__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(u, { className: "w-5 h-5 text-[var(--color-primary-600)]" }),
            /* @__PURE__ */ e("h3", { className: "font-semibold", children: "Vue Tableau" })
          ] }),
          /* @__PURE__ */ e("p", { className: "text-sm text-[var(--text-secondary)] mb-3", children: "Affichage classique en lignes avec toutes les colonnes visibles. Ideal pour l'analyse detaillee." }),
          /* @__PURE__ */ r("ul", { className: "text-sm text-[var(--text-secondary)] space-y-1", children: [
            /* @__PURE__ */ e("li", { children: "+ Tri par colonne" }),
            /* @__PURE__ */ e("li", { children: "+ Toutes les infos visibles" }),
            /* @__PURE__ */ e("li", { children: "+ Actions en ligne" })
          ] })
        ] }),
        /* @__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(d, { className: "w-5 h-5 text-[var(--color-primary-600)]" }),
            /* @__PURE__ */ e("h3", { className: "font-semibold", children: "Vue Cartes" })
          ] }),
          /* @__PURE__ */ e("p", { className: "text-sm text-[var(--text-secondary)] mb-3", children: "Affichage en grille de cartes. Visualisation plus compacte et moderne." }),
          /* @__PURE__ */ r("ul", { className: "text-sm text-[var(--text-secondary)] space-y-1", children: [
            /* @__PURE__ */ e("li", { children: "+ Vue d'ensemble rapide" }),
            /* @__PURE__ */ e("li", { children: "+ Focus sur titre/statut" }),
            /* @__PURE__ */ e("li", { children: "+ Responsive mobile" })
          ] })
        ] }),
        /* @__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(x, { className: "w-5 h-5 text-[var(--color-primary-600)]" }),
            /* @__PURE__ */ e("h3", { className: "font-semibold", children: "Vue Kanban" })
          ] }),
          /* @__PURE__ */ e("p", { className: "text-sm text-[var(--text-secondary)] mb-3", children: "Colonnes par statut pour un workflow visuel. Parfait pour le suivi du pipeline." }),
          /* @__PURE__ */ r("ul", { className: "text-sm text-[var(--text-secondary)] space-y-1", children: [
            /* @__PURE__ */ e("li", { children: "+ Workflow visuel" }),
            /* @__PURE__ */ e("li", { children: "+ Colonnes par statut" }),
            /* @__PURE__ */ e("li", { children: "+ Vue charge par etape" })
          ] })
        ] })
      ] })
    ] }),
    /* @__PURE__ */ r("section", { id: "filters", 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" }),
        "Filtres et recherche"
      ] }),
      /* @__PURE__ */ r("div", { className: "space-y-4", children: [
        /* @__PURE__ */ r("div", { children: [
          /* @__PURE__ */ e("h3", { className: "font-medium mb-2", children: "Recherche full-text" }),
          /* @__PURE__ */ e("p", { className: "text-sm text-[var(--text-secondary)]", children: "La barre de recherche filtre les tickets par titre, numero et contenu de description. La recherche est effectuee cote serveur pour de meilleures performances." })
        ] }),
        /* @__PURE__ */ r("div", { children: [
          /* @__PURE__ */ e("h3", { className: "font-medium mb-2", children: "Filtres disponibles" }),
          /* @__PURE__ */ r("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-4", children: [
            /* @__PURE__ */ r("div", { className: "p-3 bg-[var(--bg-secondary)] rounded-lg", children: [
              /* @__PURE__ */ e("div", { className: "font-medium text-sm mb-2", children: "Statut" }),
              /* @__PURE__ */ e("div", { className: "flex flex-wrap gap-1", children: Object.entries(o).map(([t, s]) => /* @__PURE__ */ e("span", { className: `px-2 py-0.5 text-xs rounded border ${s.color}`, children: s.label }, t)) })
            ] }),
            /* @__PURE__ */ r("div", { className: "p-3 bg-[var(--bg-secondary)] rounded-lg", children: [
              /* @__PURE__ */ e("div", { className: "font-medium text-sm mb-2", children: "Type" }),
              /* @__PURE__ */ r("div", { className: "flex flex-wrap gap-1", children: [
                /* @__PURE__ */ e("span", { className: "px-2 py-0.5 text-xs rounded bg-[var(--bg-primary)]", children: "Bug" }),
                /* @__PURE__ */ e("span", { className: "px-2 py-0.5 text-xs rounded bg-[var(--bg-primary)]", children: "Feature Request" }),
                /* @__PURE__ */ e("span", { className: "px-2 py-0.5 text-xs rounded bg-[var(--bg-primary)]", children: "Support" }),
                /* @__PURE__ */ e("span", { className: "px-2 py-0.5 text-xs rounded bg-[var(--bg-primary)]", children: "Question" })
              ] })
            ] }),
            /* @__PURE__ */ r("div", { className: "p-3 bg-[var(--bg-secondary)] rounded-lg", children: [
              /* @__PURE__ */ e("div", { className: "font-medium text-sm mb-2", children: "Priorite" }),
              /* @__PURE__ */ e("div", { className: "flex flex-wrap gap-1", children: Object.entries(m).map(([t, s]) => /* @__PURE__ */ e("span", { className: `px-2 py-0.5 text-xs rounded ${s.color}`, children: s.label }, t)) })
            ] })
          ] })
        ] })
      ] })
    ] }),
    /* @__PURE__ */ r("section", { id: "actions", 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" }),
        "Actions disponibles"
      ] }),
      /* @__PURE__ */ r("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-4", children: [
        /* @__PURE__ */ r("div", { className: "p-4 rounded-lg bg-green-500/10 border border-green-500/20", children: [
          /* @__PURE__ */ r("div", { className: "flex items-center gap-2 mb-2", children: [
            /* @__PURE__ */ e(i, { className: "w-5 h-5 text-green-600" }),
            /* @__PURE__ */ e("h3", { className: "font-semibold text-green-600", children: "Creer" })
          ] }),
          /* @__PURE__ */ e("p", { className: "text-sm text-[var(--text-secondary)]", children: "Ouvre le formulaire de creation d'un nouveau ticket avec tous les champs requis." })
        ] }),
        /* @__PURE__ */ r("div", { className: "p-4 rounded-lg bg-blue-500/10 border border-blue-500/20", children: [
          /* @__PURE__ */ r("div", { className: "flex items-center gap-2 mb-2", children: [
            /* @__PURE__ */ e(c, { className: "w-5 h-5 text-blue-600" }),
            /* @__PURE__ */ e("h3", { className: "font-semibold text-blue-600", children: "Consulter" })
          ] }),
          /* @__PURE__ */ e("p", { className: "text-sm text-[var(--text-secondary)]", children: "Ouvre la page de detail du ticket avec historique, commentaires et actions." })
        ] }),
        /* @__PURE__ */ r("div", { className: "p-4 rounded-lg bg-red-500/10 border border-red-500/20", children: [
          /* @__PURE__ */ r("div", { className: "flex items-center gap-2 mb-2", children: [
            /* @__PURE__ */ e(b, { className: "w-5 h-5 text-red-600" }),
            /* @__PURE__ */ e("h3", { className: "font-semibold text-red-600", children: "Supprimer" })
          ] }),
          /* @__PURE__ */ e("p", { className: "text-sm text-[var(--text-secondary)]", children: "Supprime definitivement le ticket apres confirmation. Action irreversible." })
        ] })
      ] })
    ] }),
    /* @__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: "8" }),
        /* @__PURE__ */ e(f, { className: "w-5 h-5" }),
        "Questions frequentes"
      ] }),
      /* @__PURE__ */ e("div", { className: "space-y-4", children: q.map((t) => /* @__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(y, { 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: t.question }),
          /* @__PURE__ */ e("p", { className: "text-sm text-[var(--text-secondary)]", children: t.answer })
        ] })
      ] }) }, t.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: "9" }),
        "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: C.map((t, s) => /* @__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 ${t.method === "GET" ? "bg-green-500/10 text-green-600" : t.method === "POST" ? "bg-yellow-500/10 text-yellow-600" : t.method === "PUT" ? "bg-blue-500/10 text-blue-600" : "bg-red-500/10 text-red-600"}`, children: t.method }) }),
          /* @__PURE__ */ e("td", { className: "py-2 px-3 font-mono text-xs", children: t.url }),
          /* @__PURE__ */ e("td", { className: "py-2 px-3 text-[var(--text-secondary)]", children: t.description })
        ] }, `${t.method}-${t.url}-${s}`)) })
      ] }) })
    ] }),
    /* @__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(w, { 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: "Pour aller plus loin" }),
        /* @__PURE__ */ e("p", { className: "text-sm text-[var(--text-secondary)]", children: 'Consultez la documentation "Mes Tickets" pour la vue agent personnelle avec indicateurs SLA integres.' })
      ] })
    ] }),
    /* @__PURE__ */ r("div", { className: "flex justify-between pt-6 border-t border-[var(--border-color)]", children: [
      /* @__PURE__ */ r(
        l,
        {
          to: "/system/docs/user/support-dashboard",
          className: "flex items-center gap-2 text-[var(--text-secondary)] hover:text-[var(--color-primary-600)]",
          children: [
            /* @__PURE__ */ e(n, { className: "w-4 h-4 rotate-180" }),
            "Dashboard"
          ]
        }
      ),
      /* @__PURE__ */ r(
        l,
        {
          to: "/system/docs/user/support-my-tickets",
          className: "flex items-center gap-2 text-[var(--color-primary-600)] hover:underline",
          children: [
            "Mes Tickets (Agent)",
            /* @__PURE__ */ e(n, { className: "w-4 h-4" })
          ]
        }
      )
    ] })
  ] });
}
export {
  O as SupportTicketsDocPage
};
//# sourceMappingURL=SupportTicketsDocPage-ClBa3qeY.js.map
