command-center/customer_tracking_module.html at main · MrsBohemian/command-center · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
<!DOCTYPE html>
<html>
<head>
<style>
body{
  margin:0;
  background:#0b1220;
  color:#e6ecff;
  font-family:sans-serif;
}

.panel{
  padding:10px;
  display:flex;
  flex-direction:column;
  gap:10px;
  height:100vh;
  overflow:hidden;
}

.title{
  display:flex;
  justify-content:space-between;
  font-size:22px;
}

.list{
  display:flex;
  flex-direction:column;
  gap:6px;
  overflow:auto;
}

.item{
  padding:8px;
  background:#1f2a44;
  border-radius:6px;
  font-size:13px;
  line-height:1.25;
}

.status{
  opacity:.75;
  font-size:12px;
}
</style>
</head>

<body>
<div class="panel">
  <div class="title">
    <div>Customer Follow-Up</div>
    <div id="count">0</div>
  </div>

  <div class="list" id="list">
    <div class="item">Loading chisme...</div>
  </div>
</div>

<script>
const DATA_URL = "https://cholobot-data-production.up.railway.app/chisme_followups.json";

function shortCard(item){
  const text =
    item.contact_card ||
    (item.name ? `${item.name} — ${item.reason || "follow up"}` : "") ||
    item.raw_note ||
    "No details";

  return text
    .replace(/\n+/g, " · ")
    .slice(0, 220);
}

async function loadChisme(){
  const list = document.getElementById("list");
  const count = document.getElementById("count");

  try{
    const res = await fetch(DATA_URL);
    const items = await res.json();

    count.textContent = items.length;
    list.innerHTML = "";

    if(!items.length){
      list.innerHTML = `<div class="item">No customer follow-ups yet.</div>`;
      return;
    }

    items
      .filter(item => item.status !== "done")
      .slice(-8)
      .reverse()
      .forEach(item => {
        const div = document.createElement("div");
        div.className = "item";
        div.innerHTML = `
          <div>${shortCard(item)}</div>
          <div class="status">${item.status || "needs_followup"}</div>
        `;
        list.appendChild(div);
      });

  } catch(err){
    list.innerHTML = `<div class="item">Could not load Chismebot follow-ups yet.</div>`;
    count.textContent = "!";
    console.error(err);
  }
}

loadChisme();
setInterval(loadChisme, 60000);
</script>
</body>
</html>