Loading statistics...

\n );\n }\n\n const statCards = [\n {\n title: 'Total Deleted Messages',\n value: stats.totalDeletedMessages,\n icon: '🗑️',\n color: 'red',\n description: 'Messages captured before deletion'\n },\n {\n title: 'Total Chats',\n value: stats.totalChats,\n icon: '💬',\n color: 'blue',\n description: 'Unique conversations tracked'\n },\n {\n title: 'Chats with Deletions',\n value: stats.chatsWithDeletedMessages,\n icon: '⚠️',\n color: 'yellow',\n description: 'Chats containing deleted messages'\n }\n ];\n\n const getColorClasses = (color: string) => {\n switch (color) {\n case 'red':\n return {\n bg: 'bg-red-50',\n border: 'border-red-200',\n icon: 'text-red-500',\n text: 'text-red-900'\n };\n case 'blue':\n return {\n bg: 'bg-blue-50',\n border: 'border-blue-200',\n icon: 'text-blue-500',\n text: 'text-blue-900'\n };\n case 'yellow':\n return {\n bg: 'bg-yellow-50',\n border: 'border-yellow-200',\n icon: 'text-yellow-500',\n text: 'text-yellow-900'\n };\n default:\n return {\n bg: 'bg-gray-50',\n border: 'border-gray-200',\n icon: 'text-gray-500',\n text: 'text-gray-900'\n };\n }\n };\n\n const deletionRate = stats.totalChats > 0 \n ? ((stats.chatsWithDeletedMessages / stats.totalChats) * 100).toFixed(1)\n : '0';\n\n return (\n

\n {/* Main Stats Grid */}\n

\n {statCards.map((stat) => {\n const colors = getColorClasses(stat.color);\n return (\n \n

\n {stat.icon}\n

\n {stat.value.toLocaleString()}\n

\n {stat.title}\n

\n {stat.description}\n

\n );\n })}\n

\n\n {/* Additional Insights */}\n

📊 Insights

\n \n

\n Deletion Rate\n {deletionRate}%\n

\n Percentage of chats with at least one deleted message\n

\n\n

\n Avg. Deletions per Chat\n \n {stats.chatsWithDeletedMessages > 0 \n ? (stats.totalDeletedMessages / stats.chatsWithDeletedMessages).toFixed(1)\n : '0'\n }\n \n

\n Average number of deleted messages in chats that have deletions\n

\n\n {/* Setup Instructions */}\n

🔧 Setup Status

\n 0 ? 'text-green-600' : 'text-red-600'}>\n {stats.totalChats > 0 ? '✅' : '❌'}\n \n \n WhatsApp webhook {stats.totalChats > 0 ? 'is receiving' : 'not receiving'} messages\n \n

\n 0 ? 'text-green-600' : 'text-yellow-600'}>\n {stats.totalDeletedMessages > 0 ? '✅' : '⚠️'}\n \n \n {stats.totalDeletedMessages > 0 \n ? 'Deletion tracking is working' \n : 'No deletions detected yet'\n }\n \n

\n \n {stats.totalChats === 0 && (\n

\n Setup Required: Configure your WhatsApp Business API webhook to point to this application's /webhook endpoint to start tracking messages.\n

\n )}\n

\n \n );\n}","deleted","label",[170,171,153],"frontend","components","permalink","https://www.val.town/x/CHUKSINHO_KEYD/App/code/frontend/components/Stats.tsx","extension","actionData","errors"]