{"id":4376,"date":"2026-03-24T16:00:42","date_gmt":"2026-03-24T16:00:42","guid":{"rendered":"https:\/\/stuff-x.net\/?page_id=4376"},"modified":"2026-03-24T16:03:45","modified_gmt":"2026-03-24T16:03:45","slug":"analysis-elkot","status":"publish","type":"page","link":"https:\/\/stuff-x.net\/ar\/analysis-elkot\/","title":{"rendered":"analysis-elkot"},"content":{"rendered":"<div data-elementor-type=\"wp-page\" data-elementor-id=\"4376\" class=\"elementor elementor-4376\" data-elementor-post-type=\"page\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-a58d3eb elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"a58d3eb\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-399b4f37\" data-id=\"399b4f37\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-5d8009c5 elementor-widget elementor-widget-text-editor\" data-id=\"5d8009c5\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\n<!DOCTYPE html>\n<html lang=\"ar\" dir=\"rtl\">\n<head>\n  <meta charset=\"UTF-8\"\/>\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"\/>\n  <title>Elkot Dashboard<\/title>\n  <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/Chart.js\/4.4.1\/chart.umd.min.js\"><\/script>\n  <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Cairo:wght@400;600;700;900&#038;display=swap\" rel=\"stylesheet\"\/>\n  <style>\n    :root {\n      --orange-1: #ff6a00;\n      --orange-2: #ff8c00;\n      --orange-3: #ffb347;\n      --dark: #0a0602;\n      --dark-2: #130e04;\n      --dark-3: #1e1508;\n      --panel: rgba(25,16,4,0.95);\n      --text-main: #fff8f0;\n      --text-muted: #c9a97a;\n      --border: rgba(255,106,0,0.2);\n    }\n\n    * { box-sizing: border-box; margin: 0; padding: 0; }\n\n    html, body {\n      overflow-x: hidden;\n    }\n\n    body {\n      font-family: 'Cairo', sans-serif;\n      background: var(--dark);\n      color: var(--text-main);\n      min-height: 100vh;\n    }\n\n    button, input, canvas {\n      max-width: 100%;\n    }\n\n    \/* Login *\/\n    #login-screen {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      min-height: 100vh;\n      padding: 20px;\n      background: radial-gradient(ellipse at top, rgba(255,106,0,0.15), transparent 60%), var(--dark);\n    }\n\n    .login-box {\n      background: var(--panel);\n      border: 1px solid var(--border);\n      border-radius: 20px;\n      padding: 32px 24px;\n      width: 100%;\n      max-width: 360px;\n      text-align: center;\n      box-shadow: 0 0 40px rgba(255,106,0,0.15);\n    }\n\n    .login-logo { font-size: 40px; margin-bottom: 8px; }\n\n    .login-box h2 {\n      font-size: 22px;\n      font-weight: 700;\n      color: var(--orange-3);\n      margin-bottom: 4px;\n    }\n\n    .login-box p {\n      font-size: 13px;\n      color: var(--text-muted);\n      margin-bottom: 28px;\n    }\n\n    .login-input {\n      width: 100%;\n      padding: 12px 16px;\n      background: var(--dark-3);\n      border: 1px solid var(--border);\n      border-radius: 12px;\n      color: var(--text-main);\n      font-size: 15px;\n      font-family: 'Cairo', sans-serif;\n      outline: none;\n      text-align: center;\n      letter-spacing: 4px;\n      margin-bottom: 16px;\n      transition: border-color .2s;\n    }\n\n    .login-input:focus { border-color: var(--orange-1); }\n\n    .login-btn {\n      width: 100%;\n      padding: 13px;\n      background: linear-gradient(135deg, var(--orange-1), var(--orange-2));\n      color: #fff;\n      border: none;\n      border-radius: 12px;\n      font-size: 15px;\n      font-weight: 700;\n      font-family: 'Cairo', sans-serif;\n      cursor: pointer;\n      box-shadow: 0 0 20px rgba(255,106,0,0.4);\n      transition: .2s;\n    }\n\n    .login-btn:hover { transform: translateY(-1px); }\n\n    .login-error {\n      color: #ff4444;\n      font-size: 13px;\n      margin-top: 12px;\n      display: none;\n    }\n\n    \/* Dashboard *\/\n    #dashboard { display: none; min-height: 100vh; }\n\n    .header {\n      background: linear-gradient(135deg, rgba(255,106,0,0.15), rgba(255,140,0,0.08));\n      border-bottom: 1px solid var(--border);\n      padding: 16px 20px;\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      gap: 16px;\n      flex-wrap: wrap;\n    }\n\n    .header-logo {\n      display: flex;\n      align-items: center;\n      gap: 12px;\n      min-width: 0;\n      flex: 1 1 260px;\n    }\n\n    .header-logo span { font-size: 28px; flex-shrink: 0; }\n    .header-logo h1 {\n      font-size: 20px;\n      font-weight: 900;\n      color: var(--orange-3);\n      line-height: 1.2;\n      word-break: break-word;\n    }\n    .header-logo p {\n      font-size: 12px;\n      color: var(--text-muted);\n      line-height: 1.4;\n    }\n\n    .header-actions {\n      display: flex;\n      align-items: center;\n      justify-content: flex-end;\n      gap: 10px;\n      flex-wrap: wrap;\n      flex: 1 1 280px;\n    }\n\n    .refresh-btn,\n    .logout-btn {\n      padding: 10px 16px;\n      min-height: 42px;\n      border-radius: 10px;\n      font-family: 'Cairo', sans-serif;\n      font-size: 13px;\n      cursor: pointer;\n      transition: .2s;\n      white-space: nowrap;\n    }\n\n    .refresh-btn {\n      background: rgba(255,106,0,0.15);\n      border: 1px solid var(--border);\n      color: var(--orange-3);\n    }\n\n    .refresh-btn:hover { background: rgba(255,106,0,0.25); }\n\n    .logout-btn {\n      background: rgba(255,50,50,0.1);\n      border: 1px solid rgba(255,50,50,0.2);\n      color: #ff6b6b;\n    }\n\n    .last-updated {\n      font-size: 12px;\n      color: var(--text-muted);\n      white-space: normal;\n      line-height: 1.5;\n    }\n\n    .content {\n      padding: 20px 16px 28px;\n      max-width: 1200px;\n      margin: 0 auto;\n    }\n\n    \/* Filter Tabs *\/\n    .filter-tabs {\n      display: flex;\n      gap: 8px;\n      margin-bottom: 24px;\n      background: var(--panel);\n      border: 1px solid var(--border);\n      border-radius: 14px;\n      padding: 6px;\n      width: 100%;\n      max-width: 430px;\n    }\n\n    .filter-tab {\n      flex: 1;\n      padding: 10px 12px;\n      border-radius: 10px;\n      border: none;\n      background: transparent;\n      color: var(--text-muted);\n      font-family: 'Cairo', sans-serif;\n      font-size: 13px;\n      font-weight: 600;\n      cursor: pointer;\n      transition: .2s;\n      min-width: 0;\n    }\n\n    .filter-tab.active {\n      background: linear-gradient(135deg, var(--orange-1), var(--orange-2));\n      color: #fff;\n      box-shadow: 0 0 14px rgba(255,106,0,0.4);\n    }\n\n    .filter-tab:hover:not(.active) { color: var(--orange-3); }\n\n    \/* Stats Grid *\/\n    .stats-grid {\n      display: grid;\n      grid-template-columns: repeat(4, minmax(0, 1fr));\n      gap: 16px;\n      margin-bottom: 24px;\n    }\n\n    .stat-card {\n      background: var(--panel);\n      border: 1px solid var(--border);\n      border-radius: 16px;\n      padding: 20px;\n      position: relative;\n      overflow: hidden;\n      transition: transform .2s;\n      min-width: 0;\n    }\n\n    .stat-card:hover { transform: translateY(-2px); }\n\n    .stat-card::before {\n      content: '';\n      position: absolute;\n      top: -10px; right: -10px;\n      width: 70px; height: 70px;\n      background: radial-gradient(circle, rgba(255,106,0,0.12), transparent 70%);\n      border-radius: 50%;\n    }\n\n    .stat-card.fixed {\n      border-color: rgba(255,106,0,0.35);\n    }\n\n    .stat-card.fixed::after {\n      content: '\u0625\u062c\u0645\u0627\u0644\u064a';\n      position: absolute;\n      top: 10px;\n      left: 12px;\n      font-size: 10px;\n      color: var(--orange-1);\n      background: rgba(255,106,0,0.1);\n      padding: 2px 8px;\n      border-radius: 20px;\n      font-family: 'Cairo', sans-serif;\n    }\n\n    .stat-icon { font-size: 24px; margin-bottom: 10px; }\n    .stat-label { font-size: 12px; color: var(--text-muted); margin-bottom: 6px; line-height: 1.5; }\n    .stat-value {\n      font-size: 32px;\n      font-weight: 900;\n      color: var(--orange-3);\n      line-height: 1;\n      word-break: break-word;\n    }\n    .stat-sub { font-size: 11px; color: var(--text-muted); margin-top: 6px; line-height: 1.5; }\n\n    \/* Bottom Grid *\/\n    .bottom-grid {\n      display: grid;\n      grid-template-columns: 1fr 1fr;\n      gap: 20px;\n    }\n\n    .card {\n      background: var(--panel);\n      border: 1px solid var(--border);\n      border-radius: 16px;\n      padding: 20px;\n      min-width: 0;\n    }\n\n    .card-title {\n      font-size: 15px;\n      font-weight: 700;\n      color: var(--orange-3);\n      margin-bottom: 20px;\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      line-height: 1.5;\n      flex-wrap: wrap;\n    }\n\n    .chart-wrap {\n      position: relative;\n      width: 100%;\n      min-height: 220px;\n    }\n\n    .sessions-wrapper {\n      width: 100%;\n      overflow-x: auto;\n      -webkit-overflow-scrolling: touch;\n      border-radius: 12px;\n    }\n\n    .sessions-table {\n      width: 100%;\n      min-width: 420px;\n      border-collapse: collapse;\n      font-size: 13px;\n    }\n\n    .sessions-table th {\n      text-align: right;\n      padding: 8px 12px;\n      color: var(--text-muted);\n      border-bottom: 1px solid var(--border);\n      font-weight: 600;\n      white-space: nowrap;\n    }\n\n    .sessions-table td {\n      padding: 10px 12px;\n      border-bottom: 1px solid rgba(255,106,0,0.08);\n      color: var(--text-main);\n      white-space: nowrap;\n    }\n\n    .sessions-table tr:last-child td { border-bottom: none; }\n    .sessions-table tr:hover td { background: rgba(255,106,0,0.05); }\n\n    .badge {\n      display: inline-block;\n      padding: 2px 10px;\n      background: rgba(255,106,0,0.15);\n      border: 1px solid rgba(255,106,0,0.3);\n      border-radius: 20px;\n      font-size: 12px;\n      color: var(--orange-3);\n      font-weight: 700;\n    }\n\n    .loading {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      height: 160px;\n      color: var(--text-muted);\n      font-size: 14px;\n      gap: 10px;\n    }\n\n    .spinner {\n      width: 20px;\n      height: 20px;\n      border: 2px solid rgba(255,106,0,0.3);\n      border-top-color: var(--orange-1);\n      border-radius: 50%;\n      animation: spin .8s linear infinite;\n    }\n\n    @keyframes spin { to { transform: rotate(360deg); } }\n\n    \/* Tablet *\/\n    @media (max-width: 991px) {\n      .content {\n        padding: 18px 14px 24px;\n      }\n\n      .stats-grid {\n        grid-template-columns: repeat(2, minmax(0, 1fr));\n      }\n\n      .bottom-grid {\n        grid-template-columns: 1fr;\n      }\n\n      .card {\n        padding: 18px;\n      }\n    }\n\n    \/* Mobile *\/\n    @media (max-width: 767px) {\n      .header {\n        padding: 14px;\n        align-items: stretch;\n      }\n\n      .header-logo,\n      .header-actions {\n        flex: 1 1 100%;\n      }\n\n      .header-actions {\n        justify-content: space-between;\n      }\n\n      .last-updated {\n        width: 100%;\n        order: -1;\n      }\n\n      .refresh-btn,\n      .logout-btn {\n        flex: 1;\n        text-align: center;\n      }\n\n      .filter-tabs {\n        max-width: none;\n      }\n\n      .stats-grid {\n        grid-template-columns: repeat(2, minmax(0, 1fr));\n        gap: 12px;\n      }\n\n      .stat-card {\n        padding: 16px;\n        border-radius: 14px;\n      }\n\n      .stat-icon {\n        font-size: 20px;\n        margin-bottom: 8px;\n      }\n\n      .stat-label {\n        font-size: 11px;\n      }\n\n      .stat-value {\n        font-size: 26px;\n      }\n\n      .stat-sub {\n        font-size: 10px;\n      }\n\n      .card-title {\n        font-size: 14px;\n        margin-bottom: 16px;\n      }\n\n      .chart-wrap {\n        min-height: 200px;\n      }\n    }\n\n    \/* Small mobile *\/\n    @media (max-width: 480px) {\n      .login-box {\n        padding: 26px 18px;\n        border-radius: 16px;\n      }\n\n      .header-logo h1 {\n        font-size: 18px;\n      }\n\n      .header-logo p,\n      .last-updated {\n        font-size: 11px;\n      }\n\n      .content {\n        padding: 14px 12px 22px;\n      }\n\n      .filter-tab {\n        font-size: 12px;\n        padding: 10px 8px;\n      }\n\n      .stats-grid {\n        grid-template-columns: 1fr 1fr;\n        gap: 10px;\n      }\n\n      .stat-card {\n        padding: 14px 12px;\n      }\n\n      .stat-value {\n        font-size: 24px;\n      }\n\n      .bottom-grid {\n        gap: 14px;\n      }\n\n      .card {\n        padding: 14px;\n      }\n\n      .sessions-table {\n        min-width: 360px;\n      }\n    }\n  <\/style>\n<\/head>\n<body>\n\n<!-- Login -->\n<div id=\"login-screen\">\n  <div class=\"login-box\">\n    <div class=\"login-logo\">\ud83d\udd25<\/div>\n    <h2>Elkot Dashboard<\/h2>\n    <p>\u0623\u062f\u062e\u0644 \u0627\u0644\u0628\u0627\u0633\u0648\u0631\u062f \u0644\u0644\u062f\u062e\u0648\u0644<\/p>\n    <input type=\"password\" id=\"password-input\" class=\"login-input\" placeholder=\"\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\"\/>\n    <button class=\"login-btn\" onclick=\"checkPassword()\">\u062f\u062e\u0648\u0644<\/button>\n    <div class=\"login-error\" id=\"login-error\">\u0628\u0627\u0633\u0648\u0631\u062f \u063a\u0644\u0637\u060c \u062d\u0627\u0648\u0644 \u062a\u0627\u0646\u064a<\/div>\n  <\/div>\n<\/div>\n\n<!-- Dashboard -->\n<div id=\"dashboard\">\n\n  <div class=\"header\">\n    <div class=\"header-logo\">\n      <span>\ud83d\udd25<\/span>\n      <div>\n        <h1>Elkot Analytics<\/h1>\n        <p>\u0644\u0648\u062d\u0629 \u062a\u062d\u0643\u0645 \u0627\u0644\u0645\u062d\u0627\u062f\u062b\u0627\u062a<\/p>\n      <\/div>\n    <\/div>\n\n    <div class=\"header-actions\">\n      <span class=\"last-updated\" id=\"last-updated\"><\/span>\n      <button class=\"refresh-btn\" onclick=\"loadData()\">\ud83d\udd04 \u062a\u062d\u062f\u064a\u062b<\/button>\n      <button class=\"logout-btn\" onclick=\"logout()\">\u062e\u0631\u0648\u062c<\/button>\n    <\/div>\n  <\/div>\n\n  <div class=\"content\">\n\n    <!-- Filter Tabs -->\n    <div class=\"filter-tabs\">\n      <button class=\"filter-tab active\" onclick=\"setFilter('today', this)\">\u0627\u0644\u0646\u0647\u0627\u0631\u062f\u0629<\/button>\n      <button class=\"filter-tab\" onclick=\"setFilter('week', this)\">\u0627\u0644\u0623\u0633\u0628\u0648\u0639<\/button>\n      <button class=\"filter-tab\" onclick=\"setFilter('month', this)\">\u0627\u0644\u0634\u0647\u0631<\/button>\n    <\/div>\n\n    <!-- Stats -->\n    <div class=\"stats-grid\">\n      <div class=\"stat-card fixed\">\n        <div class=\"stat-icon\">\ud83d\udc65<\/div>\n        <div class=\"stat-label\">\u0625\u062c\u0645\u0627\u0644\u064a \u0627\u0644\u0645\u0633\u062a\u062e\u062f\u0645\u064a\u0646<\/div>\n        <div class=\"stat-value\" id=\"total-users\">&#8211;<\/div>\n        <div class=\"stat-sub\">\u0645\u0633\u062a\u062e\u062f\u0645 \u0641\u0631\u064a\u062f<\/div>\n      <\/div>\n\n      <div class=\"stat-card fixed\">\n        <div class=\"stat-icon\">\ud83d\udcac<\/div>\n        <div class=\"stat-label\">\u0625\u062c\u0645\u0627\u0644\u064a \u0627\u0644\u0645\u062d\u0627\u062f\u062b\u0627\u062a<\/div>\n        <div class=\"stat-value\" id=\"total-conversations\">&#8211;<\/div>\n        <div class=\"stat-sub\">\u0645\u0646\u0630 \u0627\u0644\u0628\u062f\u0627\u064a\u0629<\/div>\n      <\/div>\n\n      <div class=\"stat-card\">\n        <div class=\"stat-icon\">\ud83d\uddc2\ufe0f<\/div>\n        <div class=\"stat-label\">\u0627\u0644\u0645\u062d\u0627\u062f\u062b\u0627\u062a<\/div>\n        <div class=\"stat-value\" id=\"period-conversations\">&#8211;<\/div>\n        <div class=\"stat-sub\" id=\"period-conv-label\">\u0641\u064a \u0627\u0644\u0641\u062a\u0631\u0629 \u0627\u0644\u0645\u062d\u062f\u062f\u0629<\/div>\n      <\/div>\n\n      <div class=\"stat-card\">\n        <div class=\"stat-icon\">\ud83d\udce8<\/div>\n        <div class=\"stat-label\">\u0627\u0644\u0631\u0633\u0627\u0626\u0644<\/div>\n        <div class=\"stat-value\" id=\"period-messages\">&#8211;<\/div>\n        <div class=\"stat-sub\" id=\"period-msg-label\">\u0641\u064a \u0627\u0644\u0641\u062a\u0631\u0629 \u0627\u0644\u0645\u062d\u062f\u062f\u0629<\/div>\n      <\/div>\n    <\/div>\n\n    <!-- Chart + Table -->\n    <div class=\"bottom-grid\">\n      <div class=\"card\">\n        <div class=\"card-title\">\ud83d\udcc8 \u0627\u0644\u0645\u062d\u0627\u062f\u062b\u0627\u062a &#8211; \u0622\u062e\u0631 30 \u064a\u0648\u0645<\/div>\n        <div class=\"chart-wrap\">\n          <canvas id=\"chart\"><\/canvas>\n        <\/div>\n      <\/div>\n\n      <div class=\"card\">\n        <div class=\"card-title\">\ud83d\udd50 \u0622\u062e\u0631 \u0627\u0644\u062c\u0644\u0633\u0627\u062a<\/div>\n        <div id=\"sessions-container\">\n          <div class=\"loading\"><div class=\"spinner\"><\/div> \u062c\u0627\u0631\u064a \u0627\u0644\u062a\u062d\u0645\u064a\u0644&#8230;<\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n\n  <\/div>\n<\/div>\n\n<script>\nconst API = \"https:\/\/n8n.neuravore.cloud\/webhook\/elkot-dashboard\";\nconst PASSWORD = \"Mamo1234\";\nlet chartInstance = null;\nlet currentFilter = 'today';\nlet cachedData = null;\n\nfunction checkPassword() {\n  const val = document.getElementById(\"password-input\").value;\n  if (val === PASSWORD) {\n    document.getElementById(\"login-screen\").style.display = \"none\";\n    document.getElementById(\"dashboard\").style.display = \"block\";\n    loadData();\n  } else {\n    document.getElementById(\"login-error\").style.display = \"block\";\n  }\n}\n\ndocument.getElementById(\"password-input\").addEventListener(\"keydown\", e => {\n  if (e.key === \"Enter\") checkPassword();\n});\n\nfunction logout() {\n  document.getElementById(\"dashboard\").style.display = \"none\";\n  document.getElementById(\"login-screen\").style.display = \"flex\";\n  document.getElementById(\"password-input\").value = \"\";\n}\n\nfunction setFilter(filter, btn) {\n  currentFilter = filter;\n  document.querySelectorAll('.filter-tab').forEach(t => t.classList.remove('active'));\n  btn.classList.add('active');\n  if (cachedData) updatePeriodStats(cachedData);\n}\n\nasync function loadData() {\n  try {\n    const res = await fetch(API);\n    const raw = await res.json();\n    const data = Array.isArray(raw) ? raw[0] : raw;\n    cachedData = data;\n\n    document.getElementById(\"total-users\").textContent = data.total_users || 0;\n    document.getElementById(\"total-conversations\").textContent = data.total_conversations || 0;\n\n    document.getElementById(\"last-updated\").textContent =\n      \"\u0622\u062e\u0631 \u062a\u062d\u062f\u064a\u062b: \" + new Date().toLocaleTimeString('ar-EG');\n\n    updatePeriodStats(data);\n    renderChart(data.chart_data || []);\n    renderTable(data.recent_sessions || []);\n\n  } catch (e) {\n    console.error(\"Error:\", e);\n  }\n}\n\nfunction updatePeriodStats(data) {\n  const labels = { today: '\u0627\u0644\u0646\u0647\u0627\u0631\u062f\u0629', week: '\u0627\u0644\u0623\u0633\u0628\u0648\u0639', month: '\u0627\u0644\u0634\u0647\u0631' };\n  const label = labels[currentFilter];\n\n  const convKey = currentFilter + '_conversations';\n  const msgKey  = currentFilter + '_messages';\n\n  document.getElementById(\"period-conversations\").textContent = data[convKey] || 0;\n  document.getElementById(\"period-messages\").textContent = data[msgKey] || 0;\n  document.getElementById(\"period-conv-label\").textContent = '\u0645\u062d\u0627\u062f\u062b\u0627\u062a ' + label;\n  document.getElementById(\"period-msg-label\").textContent = '\u0631\u0633\u0627\u0626\u0644 ' + label;\n}\n\nfunction renderChart(chartData) {\n  const labels = chartData.map(d => {\n    const date = new Date(d.date);\n    return date.toLocaleDateString('ar-EG', { month: 'short', day: 'numeric' });\n  });\n\n  const values = chartData.map(d => d.count);\n\n  if (chartInstance) chartInstance.destroy();\n\n  chartInstance = new Chart(document.getElementById(\"chart\"), {\n    type: \"line\",\n    data: {\n      labels,\n      datasets: [{\n        label: \"\u0627\u0644\u0645\u062d\u0627\u062f\u062b\u0627\u062a\",\n        data: values,\n        borderColor: \"#ff6a00\",\n        backgroundColor: \"rgba(255,106,0,0.1)\",\n        borderWidth: 2.5,\n        pointBackgroundColor: \"#ff8c00\",\n        pointRadius: 4,\n        tension: 0.4,\n        fill: true\n      }]\n    },\n    options: {\n      responsive: true,\n      maintainAspectRatio: false,\n      plugins: { legend: { display: false } },\n      scales: {\n        x: {\n          ticks: {\n            color: \"#c9a97a\",\n            font: { family: \"Cairo\", size: 11 },\n            maxRotation: 0,\n            autoSkip: true,\n            maxTicksLimit: 6\n          },\n          grid: { color: \"rgba(255,106,0,0.08)\" }\n        },\n        y: {\n          ticks: {\n            color: \"#c9a97a\",\n            font: { family: \"Cairo\", size: 11 },\n            stepSize: 1\n          },\n          grid: { color: \"rgba(255,106,0,0.08)\" },\n          beginAtZero: true\n        }\n      }\n    }\n  });\n}\n\nfunction renderTable(sessions) {\n  if (!sessions || sessions.length === 0) {\n    document.getElementById(\"sessions-container\").innerHTML =\n      '<div class=\"loading\">\u0644\u0627 \u062a\u0648\u062c\u062f \u0628\u064a\u0627\u0646\u0627\u062a<\/div>';\n    return;\n  }\n\n  const rows = sessions.map(s => {\n    const date = new Date(s.last_seen).toLocaleString('ar-EG', {\n      month: 'short',\n      day: 'numeric',\n      hour: '2-digit',\n      minute: '2-digit'\n    });\n\n    const shortId = s.session_id.length > 16\n      ? s.session_id.substring(0, 16) + \"...\"\n      : s.session_id;\n\n    return `\n      <tr>\n        <td style=\"font-size:11px;color:var(--text-muted)\">${shortId}<\/td>\n        <td><span class=\"badge\">${s.message_count}<\/span><\/td>\n        <td style=\"font-size:11px;color:var(--text-muted)\">${date}<\/td>\n      <\/tr>\n    `;\n  }).join(\"\");\n\n  document.getElementById(\"sessions-container\").innerHTML = `\n    <div class=\"sessions-wrapper\">\n      <table class=\"sessions-table\">\n        <thead>\n          <tr>\n            <th>Session ID<\/th>\n            <th>\u0627\u0644\u0631\u0633\u0627\u0626\u0644<\/th>\n            <th>\u0622\u062e\u0631 \u0646\u0634\u0627\u0637<\/th>\n          <\/tr>\n        <\/thead>\n        <tbody>${rows}<\/tbody>\n      <\/table>\n    <\/div>\n  `;\n}\n<\/script>\n\n<\/body>\n<\/html>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>Elkot Dashboard \ud83d\udd25 Elkot Dashboard \u0623\u062f\u062e\u0644 \u0627\u0644\u0628\u0627\u0633\u0648\u0631\u062f \u0644\u0644\u062f\u062e\u0648\u0644 \u062f\u062e\u0648\u0644 \u0628\u0627\u0633\u0648\u0631\u062f \u063a\u0644\u0637\u060c \u062d\u0627\u0648\u0644 \u062a\u0627\u0646\u064a \ud83d\udd25 Elkot Analytics \u0644\u0648\u062d\u0629 \u062a\u062d\u0643\u0645 \u0627\u0644\u0645\u062d\u0627\u062f\u062b\u0627\u062a \ud83d\udd04 \u062a\u062d\u062f\u064a\u062b \u062e\u0631\u0648\u062c \u0627\u0644\u0646\u0647\u0627\u0631\u062f\u0629 \u0627\u0644\u0623\u0633\u0628\u0648\u0639 \u0627\u0644\u0634\u0647\u0631 \ud83d\udc65 \u0625\u062c\u0645\u0627\u0644\u064a \u0627\u0644\u0645\u0633\u062a\u062e\u062f\u0645\u064a\u0646 &#8211; \u0645\u0633\u062a\u062e\u062f\u0645 \u0641\u0631\u064a\u062f \ud83d\udcac \u0625\u062c\u0645\u0627\u0644\u064a \u0627\u0644\u0645\u062d\u0627\u062f\u062b\u0627\u062a &#8211; \u0645\u0646\u0630 \u0627\u0644\u0628\u062f\u0627\u064a\u0629 \ud83d\uddc2\ufe0f \u0627\u0644\u0645\u062d\u0627\u062f\u062b\u0627\u062a &#8211; \u0641\u064a \u0627\u0644\u0641\u062a\u0631\u0629 \u0627\u0644\u0645\u062d\u062f\u062f\u0629 \ud83d\udce8 \u0627\u0644\u0631\u0633\u0627\u0626\u0644 &#8211; \u0641\u064a \u0627\u0644\u0641\u062a\u0631\u0629 \u0627\u0644\u0645\u062d\u062f\u062f\u0629 \ud83d\udcc8 \u0627\u0644\u0645\u062d\u0627\u062f\u062b\u0627\u062a &#8211; \u0622\u062e\u0631 30 \u064a\u0648\u0645 [&hellip;]<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-4376","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/stuff-x.net\/ar\/wp-json\/wp\/v2\/pages\/4376","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/stuff-x.net\/ar\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/stuff-x.net\/ar\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/stuff-x.net\/ar\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/stuff-x.net\/ar\/wp-json\/wp\/v2\/comments?post=4376"}],"version-history":[{"count":0,"href":"https:\/\/stuff-x.net\/ar\/wp-json\/wp\/v2\/pages\/4376\/revisions"}],"wp:attachment":[{"href":"https:\/\/stuff-x.net\/ar\/wp-json\/wp\/v2\/media?parent=4376"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}