Subscribers

Author: tatevikg1

templates/dashboard/example.html.twig

@@ -4,5 +4,21 @@
 {% block title %}phpList - Dashboard{% endblock %}
 
 {% block body %}
-
+    <main class="flex-1 overflow-y-auto bg-slate-50/50 dark:bg-black p-6"><div class="max-w-7xl mx-auto"><div class="space-y-6 animate-in fade-in duration-300"><div class="bg-white dark:bg-slate-900 rounded-xl border border-slate-200 dark:border-slate-800 shadow-sm overflow-hidden"><div class="p-6 border-b border-slate-200 dark:border-slate-800"><div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 mb-4"><h2 class="text-xl font-bold text-slate-900 dark:text-white">Subscriber Directory</h2><div class="flex gap-2 w-full sm:w-auto"><div class="relative flex-1 sm:w-64"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-search absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400" aria-hidden="true"><path d="m21 21-4.34-4.34"></path><circle cx="11" cy="11" r="8"></circle></svg><input placeholder="Search subscribers..." class="w-full pl-9 pr-4 py-2 text-sm border border-slate-200 dark:border-slate-700 rounded-lg bg-slate-50 dark:bg-slate-800 focus:ring-2 focus:ring-blue-500 outline-none transition-all" type="text"></div><button class="p-2 border border-slate-200 dark:border-slate-700 rounded-lg hover:bg-slate-50 dark:hover:bg-slate-800 transition-colors"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-funnel w-4 h-4 text-slate-500" aria-hidden="true"><path d="M10 20a1 1 0 0 0 .553.895l2 1A1 1 0 0 0 14 21v-7a2 2 0 0 1 .517-1.341L21.74 4.67A1 1 0 0 0 21 3H3a1 1 0 0 0-.742 1.67l7.225 7.989A2 2 0 0 1 10 14z"></path></svg></button><button class="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium rounded-lg flex items-center gap-2 transition-colors"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-cloud-upload w-4 h-4" aria-hidden="true"><path d="M12 13v8"></path><path d="M4 14.899A7 7 0 1 1 15.71 8h1.79a4.5 4.5 0 0 1 2.5 8.242"></path><path d="m8 17 4-4 4 4"></path></svg>Import CSV</button></div></div><div class="flex gap-2 flex-wrap"><button class="px-4 py-2 text-sm font-medium rounded-lg transition-colors bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400">All</button><button class="px-4 py-2 text-sm font-medium rounded-lg transition-colors bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-400 hover:bg-slate-200 dark:hover:bg-slate-700">Active</button><button class="px-4 py-2 text-sm font-medium rounded-lg transition-colors bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-400 hover:bg-slate-200 dark:hover:bg-slate-700">Unconfirmed</button><button class="px-4 py-2 text-sm font-medium rounded-lg transition-colors bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-400 hover:bg-slate-200 dark:hover:bg-slate-700">Bounced</button><button class="px-4 py-2 text-sm font-medium rounded-lg transition-colors bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-400 hover:bg-slate-200 dark:hover:bg-slate-700">Unsubscribed</button></div></div><div class="overflow-x-auto"><table class="w-full text-left text-sm"><thead class="bg-slate-50 dark:bg-slate-800/50 text-slate-500 font-medium"><tr><th class="px-6 py-4">Email</th><th class="px-6 py-4">Name</th><th class="px-6 py-4">Status</th><th class="px-6 py-4 text-right">Lists</th><th class="px-6 py-4 text-right">Opens</th><th class="px-6 py-4">Joined</th><th class="px-6 py-4 w-10"></th></tr></thead><tbody class="divide-y divide-slate-200 dark:divide-slate-800"><tr class="hover:bg-slate-50 dark:hover:bg-slate-800/50 transition-colors group"><td class="px-6 py-4 font-mono text-sm text-slate-900 dark:text-white">alice.johnson@example.com</td><td class="px-6 py-4 text-slate-600 dark:text-slate-400">Alice Johnson</td><td class="px-6 py-4"><span class="px-2.5 py-0.5 rounded-full text-xs font-medium bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-400">active</span></td><td class="px-6 py-4 text-right text-slate-600 dark:text-slate-400">3</td><td class="px-6 py-4 text-right text-slate-600 dark:text-slate-400">45</td><td class="px-6 py-4 text-slate-600 dark:text-slate-400">2023-01-15</td><td class="px-6 py-4 text-right"><button class="text-slate-400 hover:text-slate-600 dark:hover:text-slate-200"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-eye w-4 h-4" aria-hidden="true"><path d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"></path><circle cx="12" cy="12" r="3"></circle></svg></button></td></tr><tr class="hover:bg-slate-50 dark:hover:bg-slate-800/50 transition-colors group"><td class="px-6 py-4 font-mono text-sm text-slate-900 dark:text-white">bob.smith@example.com</td><td class="px-6 py-4 text-slate-600 dark:text-slate-400">Bob Smith</td><td class="px-6 py-4"><span class="px-2.5 py-0.5 rounded-full text-xs font-medium bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-400">active</span></td><td class="px-6 py-4 text-right text-slate-600 dark:text-slate-400">2</td><td class="px-6 py-4 text-right text-slate-600 dark:text-slate-400">32</td><td class="px-6 py-4 text-slate-600 dark:text-slate-400">2023-02-20</td><td class="px-6 py-4 text-right"><button class="text-slate-400 hover:text-slate-600 dark:hover:text-slate-200"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-eye w-4 h-4" aria-hidden="true"><path d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"></path><circle cx="12" cy="12" r="3"></circle></svg></button></td></tr><tr class="hover:bg-slate-50 dark:hover:bg-slate-800/50 transition-colors group"><td class="px-6 py-4 font-mono text-sm text-slate-900 dark:text-white">carol.williams@example.com</td><td class="px-6 py-4 text-slate-600 dark:text-slate-400">Carol Williams</td><td class="px-6 py-4"><span class="px-2.5 py-0.5 rounded-full text-xs font-medium bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-400">unconfirmed</span></td><td class="px-6 py-4 text-right text-slate-600 dark:text-slate-400">1</td><td class="px-6 py-4 text-right text-slate-600 dark:text-slate-400">0</td><td class="px-6 py-4 text-slate-600 dark:text-slate-400">2023-03-10</td><td class="px-6 py-4 text-right"><button class="text-slate-400 hover:text-slate-600 dark:hover:text-slate-200"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-eye w-4 h-4" aria-hidden="true"><path d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"></path><circle cx="12" cy="12" r="3"></circle></svg></button></td></tr><tr class="hover:bg-slate-50 dark:hover:bg-slate-800/50 transition-colors group"><td class="px-6 py-4 font-mono text-sm text-slate-900 dark:text-white">david.brown@example.com</td><td class="px-6 py-4 text-slate-600 dark:text-slate-400">David Brown</td><td class="px-6 py-4"><span class="px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400">bounced</span></td><td class="px-6 py-4 text-right text-slate-600 dark:text-slate-400">2</td><td class="px-6 py-4 text-right text-slate-600 dark:text-slate-400">28</td><td class="px-6 py-4 text-slate-600 dark:text-slate-400">2022-12-05</td><td class="px-6 py-4 text-right"><button class="text-slate-400 hover:text-slate-600 dark:hover:text-slate-200"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-eye w-4 h-4" aria-hidden="true"><path d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"></path><circle cx="12" cy="12" r="3"></circle></svg></button></td></tr><tr class="hover:bg-slate-50 dark:hover:bg-slate-800/50 transition-colors group"><td class="px-6 py-4 font-mono text-sm text-slate-900 dark:text-white">emma.davis@example.com</td><td class="px-6 py-4 text-slate-600 dark:text-slate-400">Emma Davis</td><td class="px-6 py-4"><span class="px-2.5 py-0.5 rounded-full text-xs font-medium bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-400">active</span></td><td class="px-6 py-4 text-right text-slate-600 dark:text-slate-400">4</td><td class="px-6 py-4 text-right text-slate-600 dark:text-slate-400">67</td><td class="px-6 py-4 text-slate-600 dark:text-slate-400">2023-01-22</td><td class="px-6 py-4 text-right"><button class="text-slate-400 hover:text-slate-600 dark:hover:text-slate-200"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-eye w-4 h-4" aria-hidden="true"><path d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"></path><circle cx="12" cy="12" r="3"></circle></svg></button></td></tr><tr class="hover:bg-slate-50 dark:hover:bg-slate-800/50 transition-colors group"><td class="px-6 py-4 font-mono text-sm text-slate-900 dark:text-white">frank.miller@example.com</td><td class="px-6 py-4 text-slate-600 dark:text-slate-400">Frank Miller</td><td class="px-6 py-4"><span class="px-2.5 py-0.5 rounded-full text-xs font-medium bg-slate-100 text-slate-700 dark:bg-slate-800 dark:text-slate-400">unsubscribed</span></td><td class="px-6 py-4 text-right text-slate-600 dark:text-slate-400">0</td><td class="px-6 py-4 text-right text-slate-600 dark:text-slate-400">12</td><td class="px-6 py-4 text-slate-600 dark:text-slate-400">2022-11-18</td><td class="px-6 py-4 text-right"><button class="text-slate-400 hover:text-slate-600 dark:hover:text-slate-200"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-eye w-4 h-4" aria-hidden="true"><path d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"></path><circle cx="12" cy="12" r="3"></circle></svg></button></td></tr></tbody></table></div><div class="p-4 border-t border-slate-200 dark:border-slate-800 flex justify-between items-center text-sm text-slate-500"><span>Showing 6 of 85,420 subscribers</span><div class="flex gap-2"><button class="px-3 py-1 border border-slate-200 dark:border-slate-700 rounded hover:bg-slate-50 dark:hover:bg-slate-800">Previous</button><button class="px-3 py-1 border border-slate-200 dark:border-slate-700 rounded hover:bg-slate-50 dark:hover:bg-slate-800">Next</button></div></div></div><div class="grid grid-cols-1 md:grid-cols-2 gap-6"><div class="bg-white dark:bg-slate-900 p-6 rounded-xl border border-slate-200 dark:border-slate-800 shadow-sm"><h3 class="text-lg font-semibold mb-4 text-slate-900 dark:text-white">Status Distribution</h3><div class="h-[200px]"><div class="recharts-responsive-container" style="width: 100%; height: 100%; min-width: 0px;"><div class="recharts-wrapper" style="position: relative; cursor: default; width: 100%; height: 100%; max-height: 200px; max-width: 365px;"><svg cx="50%" cy="50%" class="recharts-surface" width="365" height="200" style="width: 100%; height: 100%;" viewBox="0 0 365 200"><title></title><desc></desc><defs><clipPath id="recharts6-clip"><rect x="5" y="5" height="190" width="355"></rect></clipPath></defs><g class="recharts-layer recharts-pie" tabindex="0"><g class="recharts-layer"><g class="recharts-layer recharts-pie-sector" tabindex="-1"><path cx="182.5" cy="100" name="Active" stroke="#fff" fill="#10b981" color="#10b981" tabindex="-1" class="recharts-sector" d="M 262.5,100
+    A 80,80,0,
+    1,0,
+    252.41084057805944,138.89054344785063
+  L 182.5,100 Z" role="img"></path></g><g class="recharts-layer recharts-pie-sector" tabindex="-1"><path cx="182.5" cy="100" name="Unconfirmed" stroke="#fff" fill="#f59e0b" color="#f59e0b" tabindex="-1" class="recharts-sector" d="M 252.41084057805944,138.89054344785063
+    A 80,80,0,
+    0,0,
+    260.92673133613334,115.78758410682133
+  L 182.5,100 Z" role="img"></path></g><g class="recharts-layer recharts-pie-sector" tabindex="-1"><path cx="182.5" cy="100" name="Bounced" stroke="#fff" fill="#ef4444" color="#ef4444" tabindex="-1" class="recharts-sector" d="M 260.92673133613334,115.78758410682133
+    A 80,80,0,
+    0,0,
+    262.324680462566,105.29342885559419
+  L 182.5,100 Z" role="img"></path></g><g class="recharts-layer recharts-pie-sector" tabindex="-1"><path cx="182.5" cy="100" name="Unsubscribed" stroke="#fff" fill="#6b7280" color="#6b7280" tabindex="-1" class="recharts-sector" d="M 262.324680462566,105.29342885559419
+    A 80,80,0,
+    0,0,
+    262.5,99.99999999999994
+  L 182.5,100 Z" role="img"></path></g></g></g></svg><div tabindex="-1" class="recharts-tooltip-wrapper recharts-tooltip-wrapper-right recharts-tooltip-wrapper-bottom" style="visibility: hidden; pointer-events: none; position: absolute; top: 0px; left: 0px; transform: translate(10px, 10px);"><div class="recharts-default-tooltip" style="margin: 0px; padding: 10px; background-color: rgb(255, 255, 255); border: 1px solid rgb(204, 204, 204); white-space: nowrap;"><p class="recharts-tooltip-label" style="margin: 0px;"></p></div></div></div></div></div><div class="grid grid-cols-2 gap-3 mt-4"><div class="flex items-center gap-2"><div class="w-3 h-3 rounded-full" style="background-color: rgb(16, 185, 129);"></div><div><p class="text-xs text-slate-500">Active</p><p class="text-sm font-semibold text-slate-900 dark:text-white">78,500</p></div></div><div class="flex items-center gap-2"><div class="w-3 h-3 rounded-full" style="background-color: rgb(245, 158, 11);"></div><div><p class="text-xs text-slate-500">Unconfirmed</p><p class="text-sm font-semibold text-slate-900 dark:text-white">4,200</p></div></div><div class="flex items-center gap-2"><div class="w-3 h-3 rounded-full" style="background-color: rgb(239, 68, 68);"></div><div><p class="text-xs text-slate-500">Bounced</p><p class="text-sm font-semibold text-slate-900 dark:text-white">1,800</p></div></div><div class="flex items-center gap-2"><div class="w-3 h-3 rounded-full" style="background-color: rgb(107, 114, 128);"></div><div><p class="text-xs text-slate-500">Unsubscribed</p><p class="text-sm font-semibold text-slate-900 dark:text-white">900</p></div></div></div></div><div class="bg-white dark:bg-slate-900 p-6 rounded-xl border border-slate-200 dark:border-slate-800 shadow-sm"><h3 class="text-lg font-semibold mb-4 text-slate-900 dark:text-white">Recent Activity</h3><div class="space-y-4"><div class="flex items-start gap-3 pb-3 border-b border-slate-100 dark:border-slate-800 last:border-0"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-user-plus w-4 h-4 mt-0.5 text-emerald-600" aria-hidden="true"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><line x1="19" x2="19" y1="8" y2="14"></line><line x1="22" x2="16" y1="11" y2="11"></line></svg><div class="flex-1"><p class="text-sm font-medium text-slate-900 dark:text-white">New subscriber</p><p class="text-xs text-slate-500 font-mono">alice.johnson@example.com</p></div><span class="text-xs text-slate-400">5 minutes ago</span></div><div class="flex items-start gap-3 pb-3 border-b border-slate-100 dark:border-slate-800 last:border-0"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-user-minus w-4 h-4 mt-0.5 text-red-600" aria-hidden="true"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><line x1="22" x2="16" y1="11" y2="11"></line></svg><div class="flex-1"><p class="text-sm font-medium text-slate-900 dark:text-white">Unsubscribed</p><p class="text-xs text-slate-500 font-mono">bob.smith@example.com</p></div><span class="text-xs text-slate-400">1 hour ago</span></div><div class="flex items-start gap-3 pb-3 border-b border-slate-100 dark:border-slate-800 last:border-0"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-circle-check w-4 h-4 mt-0.5 text-blue-600" aria-hidden="true"><circle cx="12" cy="12" r="10"></circle><path d="m9 12 2 2 4-4"></path></svg><div class="flex-1"><p class="text-sm font-medium text-slate-900 dark:text-white">Confirmed subscription</p><p class="text-xs text-slate-500 font-mono">carol.williams@example.com</p></div><span class="text-xs text-slate-400">3 hours ago</span></div><div class="flex items-start gap-3 pb-3 border-b border-slate-100 dark:border-slate-800 last:border-0"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-triangle-alert w-4 h-4 mt-0.5 text-amber-600" aria-hidden="true"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"></path><path d="M12 9v4"></path><path d="M12 17h.01"></path></svg><div class="flex-1"><p class="text-sm font-medium text-slate-900 dark:text-white">Bounced</p><p class="text-xs text-slate-500 font-mono">david.brown@example.com</p></div><span class="text-xs text-slate-400">5 hours ago</span></div></div></div></div></div></div></main>
 {% endblock %}