From 677cf54d60a3047b21c0bbb2ad9ec2d8087e3517 Mon Sep 17 00:00:00 2001
From: oliver <oliver@odoo4projects.com>
Date: Sun, 14 Jun 2026 20:24:16 -0300
Subject: [PATCH] sort

---
 app.js     |  32 +++++++++++++++-
 index.html | 108 +++++++++++++++++++++++++++++++++++++++++++++++++----
 2 files changed, 132 insertions(+), 8 deletions(-)

diff --git a/app.js b/app.js
index 1101630..f4fdd35 100644
--- a/app.js
+++ b/app.js
@@ -21,6 +21,8 @@ let serversData = [];
 let currentServerIdx = 0;
 let keysData = [];
 let crmRecords = [];
+let crmSortKey = null;
+let crmSortDir = 1;
 let currentSession = null;
 let currentEmail = null;
 
@@ -1418,7 +1420,7 @@ function crmRender() {
     document.getElementById("crm-search-category")?.value ?? ""
   ).toLowerCase();
 
-  const filtered = crmRecords.filter((r) => {
+  let filtered = crmRecords.filter((r) => {
     const name = (r.Name ?? "").toLowerCase();
     const company = (r.Company ?? "").toLowerCase();
     const email = (r.email ?? "").toLowerCase();
@@ -1435,6 +1437,23 @@ function crmRender() {
     );
   });
 
+  // Sort
+  if (crmSortKey) {
+    filtered.sort((a, b) => {
+      const va = (a[crmSortKey] ?? "").toString().toLowerCase();
+      const vb = (b[crmSortKey] ?? "").toString().toLowerCase();
+      if (va < vb) return -1 * crmSortDir;
+      if (va > vb) return 1 * crmSortDir;
+      return 0;
+    });
+  }
+
+  // Update sort arrows
+  document.querySelectorAll(".sort-arrow").forEach((el) => {
+    el.textContent =
+      el.dataset.sort === crmSortKey ? (crmSortDir === 1 ? " ▲" : " ▼") : "";
+  });
+
   const total = crmRecords.length;
   const countEl = document.getElementById("crm-record-count");
   countEl.textContent =
@@ -1490,6 +1509,17 @@ function crmRender() {
   crmUpdateDeleteBtn();
 }
 
+/* ─── CRM — Sort ───────────────────────────────────────────────── */
+function crmToggleSort(key) {
+  if (crmSortKey === key) {
+    crmSortDir *= -1;
+  } else {
+    crmSortKey = key;
+    crmSortDir = 1;
+  }
+  crmRender();
+}
+
 /* ─── CRM — Checkbox helpers ────────────────────────────────────── */
 function crmUpdateDeleteBtn() {
   const checked = document.querySelectorAll(".crm-select:checked").length;
diff --git a/index.html b/index.html
index 249f714..8e3e159 100644
--- a/index.html
+++ b/index.html
@@ -874,13 +874,107 @@
                                                     title="Select / deselect all"
                                                 />
                                             </th>
-                                            <th>Name</th>
-                                            <th>Company</th>
-                                            <th>Email</th>
-                                            <th>Stage</th>
-                                            <th>Strategy</th>
-                                            <th>Category</th>
-                                            <th>Date Next Contact</th>
+                                            <th
+                                                onclick="crmToggleSort('Name')"
+                                                style="
+                                                    cursor: pointer;
+                                                    user-select: none;
+                                                "
+                                            >
+                                                Name
+                                                <span
+                                                    class="sort-arrow"
+                                                    data-sort="Name"
+                                                ></span>
+                                            </th>
+                                            <th
+                                                onclick="
+                                                    crmToggleSort('Company')
+                                                "
+                                                style="
+                                                    cursor: pointer;
+                                                    user-select: none;
+                                                "
+                                            >
+                                                Company
+                                                <span
+                                                    class="sort-arrow"
+                                                    data-sort="Company"
+                                                ></span>
+                                            </th>
+                                            <th
+                                                onclick="crmToggleSort('email')"
+                                                style="
+                                                    cursor: pointer;
+                                                    user-select: none;
+                                                "
+                                            >
+                                                Email
+                                                <span
+                                                    class="sort-arrow"
+                                                    data-sort="email"
+                                                ></span>
+                                            </th>
+                                            <th
+                                                onclick="crmToggleSort('Stage')"
+                                                style="
+                                                    cursor: pointer;
+                                                    user-select: none;
+                                                "
+                                            >
+                                                Stage
+                                                <span
+                                                    class="sort-arrow"
+                                                    data-sort="Stage"
+                                                ></span>
+                                            </th>
+                                            <th
+                                                onclick="
+                                                    crmToggleSort('strategy')
+                                                "
+                                                style="
+                                                    cursor: pointer;
+                                                    user-select: none;
+                                                "
+                                            >
+                                                Strategy
+                                                <span
+                                                    class="sort-arrow"
+                                                    data-sort="strategy"
+                                                ></span>
+                                            </th>
+                                            <th
+                                                onclick="
+                                                    crmToggleSort('category')
+                                                "
+                                                style="
+                                                    cursor: pointer;
+                                                    user-select: none;
+                                                "
+                                            >
+                                                Category
+                                                <span
+                                                    class="sort-arrow"
+                                                    data-sort="category"
+                                                ></span>
+                                            </th>
+                                            <th
+                                                onclick="
+                                                    crmToggleSort(
+                                                        'date_next_contact',
+                                                    )
+                                                "
+                                                style="
+                                                    cursor: pointer;
+                                                    user-select: none;
+                                                "
+                                            >
+                                                Date Next Contact
+                                                <span
+                                                    class="sort-arrow"
+                                                    data-sort="date_next_contact"
+                                                ></span>
+                                            </th>
                                         </tr>
                                     </thead>
                                     <tbody id="crm-table-body">