Update dashboard and Docker compose

dashboard/frontend/src/pages/Servers.tsx

@@ -0,0 +1,97 @@
+/**
+ * Servers overview page
+ */
+
+import { useQuery } from '@tanstack/react-query';
+import { Link } from 'react-router-dom';
+import { guildsApi } from '../services/api';
+
+export function Servers() {
+  const { data: guilds, isLoading } = useQuery({
+    queryKey: ['guilds'],
+    queryFn: guildsApi.list,
+  });
+
+  const total = guilds?.length ?? 0;
+  const premiumCount = guilds?.filter((guild) => guild.premium).length ?? 0;
+  const standardCount = total - premiumCount;
+
+  return (
+    <div className="space-y-6">
+      {/* Header */}
+      <div className="flex justify-between items-center">
+        <div>
+          <h1 className="text-3xl font-bold text-gray-900">Servers</h1>
+          <p className="text-gray-600 mt-1">All servers that have added GuardDen</p>
+        </div>
+      </div>
+
+      {/* Stats */}
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+        <div className="stat-card">
+          <div className="stat-label">Total Servers</div>
+          <div className="stat-value">{total}</div>
+        </div>
+        <div className="stat-card">
+          <div className="stat-label">Premium Servers</div>
+          <div className="stat-value">{premiumCount}</div>
+        </div>
+        <div className="stat-card">
+          <div className="stat-label">Standard Servers</div>
+          <div className="stat-value">{standardCount}</div>
+        </div>
+      </div>
+
+      {/* Table */}
+      <div className="card">
+        {isLoading ? (
+          <div className="text-center py-12">Loading...</div>
+        ) : guilds && guilds.length > 0 ? (
+          <div className="overflow-x-auto">
+            <table className="w-full">
+              <thead>
+                <tr className="border-b border-gray-200">
+                  <th className="text-left py-3 px-4 font-semibold text-gray-700">Server</th>
+                  <th className="text-left py-3 px-4 font-semibold text-gray-700">Server ID</th>
+                  <th className="text-left py-3 px-4 font-semibold text-gray-700">Owner ID</th>
+                  <th className="text-left py-3 px-4 font-semibold text-gray-700">Plan</th>
+                  <th className="text-left py-3 px-4 font-semibold text-gray-700">Actions</th>
+                </tr>
+              </thead>
+              <tbody>
+                {guilds.map((guild) => (
+                  <tr key={guild.id} className="border-b border-gray-100 hover:bg-gray-50">
+                    <td className="py-3 px-4 font-medium">{guild.name}</td>
+                    <td className="py-3 px-4 text-sm text-gray-600">{guild.id}</td>
+                    <td className="py-3 px-4 text-sm text-gray-600">{guild.owner_id}</td>
+                    <td className="py-3 px-4">
+                      <span
+                        className={`inline-flex px-2 py-1 text-xs font-semibold rounded-full ${
+                          guild.premium
+                            ? 'bg-yellow-100 text-yellow-800'
+                            : 'bg-gray-100 text-gray-700'
+                        }`}
+                      >
+                        {guild.premium ? 'Premium' : 'Standard'}
+                      </span>
+                    </td>
+                    <td className="py-3 px-4">
+                      <Link
+                        to={`/settings?guild=${guild.id}`}
+                        className="text-sm text-primary-600 hover:text-primary-700 font-medium"
+                      >
+                        Configure
+                      </Link>
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        ) : (
+          <div className="text-center py-12 text-gray-600">No servers found</div>
+        )}
+      </div>
+    </div>
+  );
+}