import { jsxs as s, jsx as e } from "react/jsx-runtime";
import { Link as c } from "react-router-dom";
import { useTranslation as u } from "react-i18next";
import { LayoutDashboard as x, ArrowRight as d, RefreshCw as N, Clock as m, AlertTriangle as i, TrendingUp as h, Headphones as v, CheckCircle as b, Star as n, XCircle as f, Users as g, Info as y } from "lucide-react";
const w = [
  { title: "Total Tickets", value: "125", color: "blue", icon: v },
  { title: "New Tickets", value: "23", color: "green", icon: h, subtitle: "Last 30 days" },
  { title: "Open Tickets", value: "45", color: "yellow", icon: m },
  { title: "Resolved", value: "67", color: "green", icon: b, subtitle: "Last 30 days" },
  { title: "SLA Compliance", value: "89.6%", color: "green", icon: i },
  { title: "Avg. Satisfaction", value: "4.2/5", color: "yellow", icon: n }
], o = [
  { name: "Jean Dupont", email: "jean@example.com", total: 12, open: 3, inProgress: 5, onHold: 2 },
  { name: "Marie Martin", email: "marie@example.com", total: 8, open: 2, inProgress: 4, onHold: 1 },
  { name: "Pierre Bernard", email: "pierre@example.com", total: 15, open: 5, inProgress: 6, onHold: 3 }
];
function S() {
  const { t: l } = u("docs");
  return /* @__PURE__ */ s("div", { className: "space-y-8", children: [
    /* @__PURE__ */ s("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: l("breadcrumb.documentation") }),
      /* @__PURE__ */ e("span", { children: "/" }),
      /* @__PURE__ */ e(c, { to: "/system/docs/user", className: "hover:text-[var(--color-primary-600)]", children: l("breadcrumb.user") }),
      /* @__PURE__ */ e("span", { children: "/" }),
      /* @__PURE__ */ e(c, { to: "/system/docs/user/support", className: "hover:text-[var(--color-primary-600)]", children: l("breadcrumb.support") }),
      /* @__PURE__ */ e("span", { children: "/" }),
      /* @__PURE__ */ e("span", { children: "Dashboard" })
    ] }),
    /* @__PURE__ */ s("div", { children: [
      /* @__PURE__ */ s("h1", { className: "text-3xl font-bold mb-4 flex items-center gap-3", children: [
        /* @__PURE__ */ e(x, { className: "w-8 h-8 text-[var(--color-primary-600)]" }),
        l("support.dashboard.title")
      ] }),
      /* @__PURE__ */ e("p", { className: "text-lg text-[var(--text-secondary)]", children: l("support.dashboard.subtitle") })
    ] }),
    /* @__PURE__ */ s("div", { className: "card p-4 bg-[var(--bg-secondary)]", children: [
      /* @__PURE__ */ e("h3", { className: "font-semibold mb-3", children: "Table des matieres" }),
      /* @__PURE__ */ s("div", { className: "grid grid-cols-2 md:grid-cols-4 gap-2 text-sm", children: [
        /* @__PURE__ */ e("a", { href: "#overview", className: "text-[var(--color-primary-600)] hover:underline", children: "1. Vue d'ensemble" }),
        /* @__PURE__ */ e("a", { href: "#kpis", className: "text-[var(--color-primary-600)] hover:underline", children: "2. Indicateurs KPI" }),
        /* @__PURE__ */ e("a", { href: "#alerts", className: "text-[var(--color-primary-600)] hover:underline", children: "3. Alertes SLA" }),
        /* @__PURE__ */ e("a", { href: "#charts", className: "text-[var(--color-primary-600)] hover:underline", children: "4. Graphiques" }),
        /* @__PURE__ */ e("a", { href: "#workload", className: "text-[var(--color-primary-600)] hover:underline", children: "5. Charge agents" }),
        /* @__PURE__ */ e("a", { href: "#satisfaction", className: "text-[var(--color-primary-600)] hover:underline", children: "6. Satisfaction" })
      ] })
    ] }),
    /* @__PURE__ */ s("section", { id: "overview", className: "space-y-4", children: [
      /* @__PURE__ */ s("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", children: "1" }),
        "Vue d'ensemble"
      ] }),
      /* @__PURE__ */ s("div", { className: "card p-6", children: [
        /* @__PURE__ */ e("h3", { className: "font-semibold mb-3", children: "Acces" }),
        /* @__PURE__ */ s("div", { className: "flex items-center gap-2 p-3 bg-[var(--bg-secondary)] rounded-lg font-mono text-sm mb-4", children: [
          /* @__PURE__ */ e("span", { className: "text-[var(--text-tertiary)]", children: "Support" }),
          /* @__PURE__ */ e(d, { className: "w-4 h-4 text-[var(--text-tertiary)]" }),
          /* @__PURE__ */ e("span", { className: "text-[var(--color-primary-600)] font-semibold", children: "Dashboard" })
        ] }),
        /* @__PURE__ */ e("p", { className: "text-[var(--text-secondary)]", children: "Le dashboard Support offre une vue complete des operations de support, incluant les KPIs, les alertes SLA, la distribution des tickets et la charge de travail des agents." })
      ] }),
      /* @__PURE__ */ s("div", { className: "card p-6", children: [
        /* @__PURE__ */ e("h3", { className: "font-semibold mb-4", children: "Fonctionnalites principales" }),
        /* @__PURE__ */ s("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [
          /* @__PURE__ */ s("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(N, { className: "w-4 h-4 text-blue-500" }) }),
            /* @__PURE__ */ s("div", { children: [
              /* @__PURE__ */ e("div", { className: "font-medium", children: "Donnees temps reel" }),
              /* @__PURE__ */ e("div", { className: "text-sm text-[var(--text-secondary)]", children: "Actualisation automatique et manuelle" })
            ] })
          ] }),
          /* @__PURE__ */ s("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(m, { className: "w-4 h-4 text-purple-500" }) }),
            /* @__PURE__ */ s("div", { children: [
              /* @__PURE__ */ e("div", { className: "font-medium", children: "Selection de periode" }),
              /* @__PURE__ */ e("div", { className: "text-sm text-[var(--text-secondary)]", children: "7, 30 ou 90 derniers jours" })
            ] })
          ] }),
          /* @__PURE__ */ s("div", { className: "flex items-start gap-3", children: [
            /* @__PURE__ */ e("div", { className: "w-8 h-8 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0", children: /* @__PURE__ */ e(i, { className: "w-4 h-4 text-red-500" }) }),
            /* @__PURE__ */ s("div", { children: [
              /* @__PURE__ */ e("div", { className: "font-medium", children: "Alertes proactives" }),
              /* @__PURE__ */ e("div", { className: "text-sm text-[var(--text-secondary)]", children: "Tickets en depassement ou a risque" })
            ] })
          ] }),
          /* @__PURE__ */ s("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(h, { className: "w-4 h-4 text-green-500" }) }),
            /* @__PURE__ */ s("div", { children: [
              /* @__PURE__ */ e("div", { className: "font-medium", children: "Tendances" }),
              /* @__PURE__ */ e("div", { className: "text-sm text-[var(--text-secondary)]", children: "Evolution des tickets crees/resolus" })
            ] })
          ] })
        ] })
      ] })
    ] }),
    /* @__PURE__ */ s("section", { id: "kpis", className: "space-y-4", children: [
      /* @__PURE__ */ s("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", children: "2" }),
        "Indicateurs KPI"
      ] }),
      /* @__PURE__ */ s("div", { className: "card p-6", children: [
        /* @__PURE__ */ e("h3", { className: "font-semibold mb-4", children: "Cartes KPI" }),
        /* @__PURE__ */ e("div", { className: "grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-3", children: w.map((t) => /* @__PURE__ */ s("div", { className: `p-3 rounded-lg border ${{
          blue: "bg-blue-500/10 text-blue-600 border-blue-500/20",
          green: "bg-green-500/10 text-green-600 border-green-500/20",
          yellow: "bg-yellow-500/10 text-yellow-600 border-yellow-500/20",
          red: "bg-red-500/10 text-red-600 border-red-500/20"
        }[t.color]}`, children: [
          /* @__PURE__ */ s("div", { className: "flex items-center justify-between mb-2", children: [
            /* @__PURE__ */ e("span", { className: "text-xs font-medium opacity-80", children: t.title }),
            /* @__PURE__ */ e(t.icon, { className: "w-4 h-4" })
          ] }),
          /* @__PURE__ */ e("div", { className: "text-xl font-bold", children: t.value }),
          t.subtitle && /* @__PURE__ */ e("div", { className: "text-xs opacity-70", children: t.subtitle })
        ] }, t.title)) })
      ] }),
      /* @__PURE__ */ s("div", { className: "card p-6", children: [
        /* @__PURE__ */ e("h3", { className: "font-semibold mb-3", children: "Description des KPIs" }),
        /* @__PURE__ */ s("table", { className: "w-full text-sm", children: [
          /* @__PURE__ */ e("thead", { children: /* @__PURE__ */ s("tr", { className: "border-b border-[var(--border-color)]", children: [
            /* @__PURE__ */ e("th", { className: "text-left py-2", children: "KPI" }),
            /* @__PURE__ */ e("th", { className: "text-left py-2", children: "Description" }),
            /* @__PURE__ */ e("th", { className: "text-left py-2", children: "Objectif" })
          ] }) }),
          /* @__PURE__ */ s("tbody", { children: [
            /* @__PURE__ */ s("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 le systeme" }),
              /* @__PURE__ */ e("td", { className: "py-2", children: "Information" })
            ] }),
            /* @__PURE__ */ s("tr", { className: "border-b border-[var(--border-color)]", children: [
              /* @__PURE__ */ e("td", { className: "py-2 font-medium", children: "New Tickets" }),
              /* @__PURE__ */ e("td", { className: "py-2 text-[var(--text-secondary)]", children: "Tickets crees sur la periode selectionnee" }),
              /* @__PURE__ */ e("td", { className: "py-2", children: "Suivi volume" })
            ] }),
            /* @__PURE__ */ s("tr", { className: "border-b border-[var(--border-color)]", children: [
              /* @__PURE__ */ e("td", { className: "py-2 font-medium", children: "Open Tickets" }),
              /* @__PURE__ */ e("td", { className: "py-2 text-[var(--text-secondary)]", children: "Tickets actuellement ouverts (backlog)" }),
              /* @__PURE__ */ e("td", { className: "py-2", children: "< 50" })
            ] }),
            /* @__PURE__ */ s("tr", { className: "border-b border-[var(--border-color)]", children: [
              /* @__PURE__ */ e("td", { className: "py-2 font-medium", children: "Resolved" }),
              /* @__PURE__ */ e("td", { className: "py-2 text-[var(--text-secondary)]", children: "Tickets resolus sur la periode" }),
              /* @__PURE__ */ e("td", { className: "py-2", children: "≥ New Tickets" })
            ] }),
            /* @__PURE__ */ s("tr", { className: "border-b border-[var(--border-color)]", children: [
              /* @__PURE__ */ e("td", { className: "py-2 font-medium", children: "SLA Compliance" }),
              /* @__PURE__ */ e("td", { className: "py-2 text-[var(--text-secondary)]", children: "Pourcentage de tickets dans les delais" }),
              /* @__PURE__ */ e("td", { className: "py-2", children: "≥ 90%" })
            ] }),
            /* @__PURE__ */ s("tr", { children: [
              /* @__PURE__ */ e("td", { className: "py-2 font-medium", children: "Avg. Satisfaction" }),
              /* @__PURE__ */ e("td", { className: "py-2 text-[var(--text-secondary)]", children: "Note moyenne des utilisateurs (1-5)" }),
              /* @__PURE__ */ e("td", { className: "py-2", children: "≥ 4.0" })
            ] })
          ] })
        ] })
      ] })
    ] }),
    /* @__PURE__ */ s("section", { id: "alerts", className: "space-y-4", children: [
      /* @__PURE__ */ s("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", children: "3" }),
        "Alertes SLA"
      ] }),
      /* @__PURE__ */ s("div", { className: "grid grid-cols-1 lg:grid-cols-2 gap-4", children: [
        /* @__PURE__ */ s("div", { className: "card p-4 border-l-4 border-red-500", children: [
          /* @__PURE__ */ s("h3", { className: "font-semibold text-red-600 flex items-center gap-2 mb-3", children: [
            /* @__PURE__ */ e(f, { className: "w-5 h-5" }),
            "SLA Breached (3)"
          ] }),
          /* @__PURE__ */ s("div", { className: "space-y-2", children: [
            /* @__PURE__ */ s("div", { className: "flex items-center justify-between p-2 bg-red-500/10 rounded", children: [
              /* @__PURE__ */ s("div", { children: [
                /* @__PURE__ */ e("span", { className: "font-mono text-sm", children: "#TK-1234" }),
                /* @__PURE__ */ e("span", { className: "ml-2 text-sm", children: "Probleme critique serveur" })
              ] }),
              /* @__PURE__ */ e("span", { className: "text-xs text-red-600 font-medium", children: "Response + Resolution" })
            ] }),
            /* @__PURE__ */ s("div", { className: "flex items-center justify-between p-2 bg-red-500/10 rounded", children: [
              /* @__PURE__ */ s("div", { children: [
                /* @__PURE__ */ e("span", { className: "font-mono text-sm", children: "#TK-1235" }),
                /* @__PURE__ */ e("span", { className: "ml-2 text-sm", children: "Bug application mobile" })
              ] }),
              /* @__PURE__ */ e("span", { className: "text-xs text-red-600 font-medium", children: "Resolution" })
            ] })
          ] }),
          /* @__PURE__ */ e("p", { className: "text-xs text-[var(--text-secondary)] mt-3", children: "Cliquez sur un ticket pour voir les details et prendre action." })
        ] }),
        /* @__PURE__ */ s("div", { className: "card p-4 border-l-4 border-yellow-500", children: [
          /* @__PURE__ */ s("h3", { className: "font-semibold text-yellow-600 flex items-center gap-2 mb-3", children: [
            /* @__PURE__ */ e(i, { className: "w-5 h-5" }),
            "Approaching Breach (5)"
          ] }),
          /* @__PURE__ */ s("div", { className: "space-y-2", children: [
            /* @__PURE__ */ s("div", { className: "flex items-center justify-between p-2 bg-yellow-500/10 rounded", children: [
              /* @__PURE__ */ s("div", { children: [
                /* @__PURE__ */ e("span", { className: "font-mono text-sm", children: "#TK-1240" }),
                /* @__PURE__ */ e("span", { className: "ml-2 text-sm", children: "Demande de fonctionnalite" })
              ] }),
              /* @__PURE__ */ e("span", { className: "text-xs text-yellow-600 font-medium", children: "85% Response" })
            ] }),
            /* @__PURE__ */ s("div", { className: "flex items-center justify-between p-2 bg-yellow-500/10 rounded", children: [
              /* @__PURE__ */ s("div", { children: [
                /* @__PURE__ */ e("span", { className: "font-mono text-sm", children: "#TK-1241" }),
                /* @__PURE__ */ e("span", { className: "ml-2 text-sm", children: "Question facturation" })
              ] }),
              /* @__PURE__ */ e("span", { className: "text-xs text-yellow-600 font-medium", children: "78% Response" })
            ] })
          ] }),
          /* @__PURE__ */ e("p", { className: "text-xs text-[var(--text-secondary)] mt-3", children: "Tickets dont le SLA depasse 75% du temps alloue." })
        ] })
      ] })
    ] }),
    /* @__PURE__ */ s("section", { id: "charts", className: "space-y-4", children: [
      /* @__PURE__ */ s("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", children: "4" }),
        "Graphiques"
      ] }),
      /* @__PURE__ */ s("div", { className: "grid grid-cols-1 lg:grid-cols-2 gap-4", children: [
        /* @__PURE__ */ s("div", { className: "card p-4", children: [
          /* @__PURE__ */ e("h3", { className: "font-semibold mb-4", children: "Tickets par Statut" }),
          /* @__PURE__ */ e("div", { className: "space-y-3", children: [
            { status: "Open", count: 45, color: "#eab308" },
            { status: "In Progress", count: 32, color: "#3b82f6" },
            { status: "On Hold", count: 12, color: "#f97316" },
            { status: "Resolved", count: 67, color: "#22c55e" },
            { status: "Closed", count: 89, color: "#6b7280" }
          ].map((t) => {
            const a = t.count / 245 * 100;
            return /* @__PURE__ */ s("div", { className: "flex items-center gap-3", children: [
              /* @__PURE__ */ e("div", { className: "w-24 text-sm", children: t.status }),
              /* @__PURE__ */ e("div", { className: "flex-1 h-6 bg-[var(--bg-secondary)] rounded-full overflow-hidden", children: /* @__PURE__ */ e(
                "div",
                {
                  className: "h-full rounded-full",
                  style: { width: `${a}%`, backgroundColor: t.color }
                }
              ) }),
              /* @__PURE__ */ e("div", { className: "w-12 text-right text-sm font-medium", children: t.count })
            ] }, t.status);
          }) })
        ] }),
        /* @__PURE__ */ s("div", { className: "card p-4", children: [
          /* @__PURE__ */ e("h3", { className: "font-semibold mb-4", children: "Tickets actifs par Priorite" }),
          /* @__PURE__ */ e("div", { className: "space-y-3", children: [
            { priority: "Critical", count: 5, color: "#dc2626" },
            { priority: "High", count: 18, color: "#f97316" },
            { priority: "Medium", count: 42, color: "#eab308" },
            { priority: "Low", count: 24, color: "#3b82f6" }
          ].map((t) => {
            const a = t.count / 89 * 100;
            return /* @__PURE__ */ s("div", { className: "flex items-center gap-3", children: [
              /* @__PURE__ */ e("div", { className: "w-24 text-sm", children: t.priority }),
              /* @__PURE__ */ e("div", { className: "flex-1 h-6 bg-[var(--bg-secondary)] rounded-full overflow-hidden", children: /* @__PURE__ */ e(
                "div",
                {
                  className: "h-full rounded-full",
                  style: { width: `${a}%`, backgroundColor: t.color }
                }
              ) }),
              /* @__PURE__ */ e("div", { className: "w-12 text-right text-sm font-medium", children: t.count })
            ] }, t.priority);
          }) })
        ] })
      ] }),
      /* @__PURE__ */ s("div", { className: "card p-4", children: [
        /* @__PURE__ */ e("h3", { className: "font-semibold mb-4", children: "Tendances (30 derniers jours)" }),
        /* @__PURE__ */ s("div", { className: "flex items-center gap-4 mb-4", children: [
          /* @__PURE__ */ s("div", { className: "flex items-center gap-2", children: [
            /* @__PURE__ */ e("div", { className: "w-3 h-3 rounded bg-blue-500" }),
            /* @__PURE__ */ e("span", { className: "text-sm", children: "Crees" })
          ] }),
          /* @__PURE__ */ s("div", { className: "flex items-center gap-2", children: [
            /* @__PURE__ */ e("div", { className: "w-3 h-3 rounded bg-green-500" }),
            /* @__PURE__ */ e("span", { className: "text-sm", children: "Resolus" })
          ] })
        ] }),
        /* @__PURE__ */ e("div", { className: "h-32 flex items-end gap-1", children: Array.from({ length: 30 }, (t, r) => /* @__PURE__ */ s("div", { className: "flex-1 flex gap-0.5", children: [
          /* @__PURE__ */ e(
            "div",
            {
              className: "flex-1 bg-blue-500 rounded-t",
              style: { height: `${Math.random() * 80 + 20}%` }
            }
          ),
          /* @__PURE__ */ e(
            "div",
            {
              className: "flex-1 bg-green-500 rounded-t",
              style: { height: `${Math.random() * 80 + 20}%` }
            }
          )
        ] }, r)) }),
        /* @__PURE__ */ s("div", { className: "flex justify-between text-xs text-[var(--text-secondary)] mt-2", children: [
          /* @__PURE__ */ e("span", { children: "Il y a 30 jours" }),
          /* @__PURE__ */ e("span", { children: "Aujourd'hui" })
        ] })
      ] })
    ] }),
    /* @__PURE__ */ s("section", { id: "workload", className: "space-y-4", children: [
      /* @__PURE__ */ s("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", children: "5" }),
        "Charge des agents"
      ] }),
      /* @__PURE__ */ s("div", { className: "card p-4", children: [
        /* @__PURE__ */ s("h3", { className: "font-semibold mb-4 flex items-center gap-2", children: [
          /* @__PURE__ */ e(g, { className: "w-5 h-5" }),
          "Agent Workload"
        ] }),
        /* @__PURE__ */ e("div", { className: "overflow-x-auto", children: /* @__PURE__ */ s("table", { className: "w-full text-sm", children: [
          /* @__PURE__ */ e("thead", { children: /* @__PURE__ */ s("tr", { className: "border-b border-[var(--border-color)]", children: [
            /* @__PURE__ */ e("th", { className: "text-left p-3 font-medium", children: "Agent" }),
            /* @__PURE__ */ e("th", { className: "text-center p-3 font-medium", children: "Total" }),
            /* @__PURE__ */ e("th", { className: "text-center p-3 font-medium", children: "Open" }),
            /* @__PURE__ */ e("th", { className: "text-center p-3 font-medium", children: "In Progress" }),
            /* @__PURE__ */ e("th", { className: "text-center p-3 font-medium", children: "On Hold" }),
            /* @__PURE__ */ e("th", { className: "text-left p-3 font-medium", children: "Load" })
          ] }) }),
          /* @__PURE__ */ e("tbody", { children: o.map((t) => {
            const r = Math.max(...o.map((p) => p.total)), a = t.total / r * 100;
            return /* @__PURE__ */ s("tr", { className: "border-b border-[var(--border-color)]", children: [
              /* @__PURE__ */ s("td", { className: "p-3", children: [
                /* @__PURE__ */ e("div", { className: "font-medium", children: t.name }),
                /* @__PURE__ */ e("div", { className: "text-xs text-[var(--text-secondary)]", children: t.email })
              ] }),
              /* @__PURE__ */ e("td", { className: "text-center p-3 font-semibold", children: t.total }),
              /* @__PURE__ */ e("td", { className: "text-center p-3", children: /* @__PURE__ */ e("span", { className: "px-2 py-1 bg-yellow-500/10 text-yellow-600 rounded text-xs", children: t.open }) }),
              /* @__PURE__ */ e("td", { className: "text-center p-3", children: /* @__PURE__ */ e("span", { className: "px-2 py-1 bg-blue-500/10 text-blue-600 rounded text-xs", children: t.inProgress }) }),
              /* @__PURE__ */ e("td", { className: "text-center p-3", children: /* @__PURE__ */ e("span", { className: "px-2 py-1 bg-orange-500/10 text-orange-600 rounded text-xs", children: t.onHold }) }),
              /* @__PURE__ */ e("td", { className: "p-3 w-32", children: /* @__PURE__ */ e("div", { className: "h-2 bg-[var(--bg-secondary)] rounded-full overflow-hidden", children: /* @__PURE__ */ e(
                "div",
                {
                  className: "h-full bg-blue-500 rounded-full",
                  style: { width: `${a}%` }
                }
              ) }) })
            ] }, t.email);
          }) })
        ] }) })
      ] })
    ] }),
    /* @__PURE__ */ s("section", { id: "satisfaction", className: "space-y-4", children: [
      /* @__PURE__ */ s("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", children: "6" }),
        "Satisfaction client"
      ] }),
      /* @__PURE__ */ s("div", { className: "card p-6", children: [
        /* @__PURE__ */ s("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: [
          /* @__PURE__ */ s("div", { className: "text-center p-4 bg-[var(--bg-secondary)] rounded-lg", children: [
            /* @__PURE__ */ e("div", { className: "text-4xl font-bold text-green-600", children: "4.2" }),
            /* @__PURE__ */ e("div", { className: "text-sm text-[var(--text-secondary)]", children: "Note moyenne" }),
            /* @__PURE__ */ e("div", { className: "flex justify-center mt-2", children: [1, 2, 3, 4, 5].map((t) => /* @__PURE__ */ e(
              n,
              {
                className: `w-5 h-5 ${t <= 4 ? "text-yellow-500 fill-yellow-500" : "text-gray-300"}`
              },
              t
            )) })
          ] }),
          /* @__PURE__ */ s("div", { className: "text-center p-4 bg-[var(--bg-secondary)] rounded-lg", children: [
            /* @__PURE__ */ e("div", { className: "text-4xl font-bold", children: "156" }),
            /* @__PURE__ */ e("div", { className: "text-sm text-[var(--text-secondary)]", children: "Reponses totales" })
          ] })
        ] }),
        /* @__PURE__ */ s("div", { className: "mt-6", children: [
          /* @__PURE__ */ e("h4", { className: "font-medium mb-3", children: "Distribution des notes" }),
          /* @__PURE__ */ e("div", { className: "space-y-2", children: [
            { rating: 5, count: 78 },
            { rating: 4, count: 45 },
            { rating: 3, count: 20 },
            { rating: 2, count: 8 },
            { rating: 1, count: 5 }
          ].map((t) => {
            const r = t.count / 156 * 100;
            return /* @__PURE__ */ s("div", { className: "flex items-center gap-2 text-sm", children: [
              /* @__PURE__ */ e("span", { className: "w-4", children: t.rating }),
              /* @__PURE__ */ e(n, { className: "w-3 h-3 text-yellow-500 fill-yellow-500" }),
              /* @__PURE__ */ e("div", { className: "flex-1 h-3 bg-[var(--bg-secondary)] rounded-full overflow-hidden", children: /* @__PURE__ */ e(
                "div",
                {
                  className: "h-full bg-yellow-500 rounded-full",
                  style: { width: `${r}%` }
                }
              ) }),
              /* @__PURE__ */ e("span", { className: "w-8 text-right text-xs", children: t.count })
            ] }, t.rating);
          }) })
        ] })
      ] })
    ] }),
    /* @__PURE__ */ s("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__ */ s("div", { children: [
        /* @__PURE__ */ e("div", { className: "font-medium text-blue-600", children: "Conseils d'utilisation" }),
        /* @__PURE__ */ s("ul", { className: "text-sm text-[var(--text-secondary)] mt-1 space-y-1", children: [
          /* @__PURE__ */ e("li", { children: "Consultez le dashboard en debut de journee pour prioriser les actions" }),
          /* @__PURE__ */ e("li", { children: "Surveillez les alertes SLA pour eviter les depassements" }),
          /* @__PURE__ */ e("li", { children: "Equilibrez la charge entre les agents pour optimiser le traitement" }),
          /* @__PURE__ */ e("li", { children: "Analysez les tendances pour anticiper les pics de demande" })
        ] })
      ] })
    ] }),
    /* @__PURE__ */ s("div", { className: "flex justify-between pt-6 border-t border-[var(--border-color)]", children: [
      /* @__PURE__ */ s(
        c,
        {
          to: "/system/docs/user/support",
          className: "flex items-center gap-2 text-[var(--text-secondary)] hover:text-[var(--color-primary-600)]",
          children: [
            /* @__PURE__ */ e(d, { className: "w-4 h-4 rotate-180" }),
            l("support.dashboard.nav.supportIndex")
          ]
        }
      ),
      /* @__PURE__ */ s(
        c,
        {
          to: "/system/docs/user/support-tickets",
          className: "flex items-center gap-2 text-[var(--color-primary-600)] hover:underline",
          children: [
            l("support.dashboard.nav.nextTickets"),
            /* @__PURE__ */ e(d, { className: "w-4 h-4" })
          ]
        }
      )
    ] })
  ] });
}
export {
  S as SupportDashboardDocPage
};
//# sourceMappingURL=SupportDashboardDocPage-CLotzEwA.js.map
