feat: restrict admin access to club operations and rollout test environment

2026-03-18 09:08:45 +01:00
parent 9cb80e4517
commit 821459966c
22 changed files with 507 additions and 203 deletions
@@ -0,0 +1,152 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { useSession } from 'next-auth/react';
+
+type Club = {
+  id: string;
+  name: string;
+  sportType: string;
+  description?: string;
+};
+
+export function ClubManagement() {
+  const { data: session } = useSession();
+  const [clubs, setClubs] = useState<Club[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [isCreating, setIsCreating] = useState(false);
+  const [newClub, setNewClub] = useState({ name: '', sportType: 'Tennis', description: '' });
+
+  const fetchClubs = async () => {
+    try {
+      const res = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/api/admin/clubs`, {
+        headers: { Authorization: `Bearer ${(session as any)?.accessToken}` },
+      });
+      if (res.ok) {
+        const data = await res.json();
+        setClubs(data);
+      }
+    } catch (error) {
+      console.error('Failed to fetch clubs', error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    if (session) fetchClubs();
+  }, [session]);
+
+  const handleCreate = async (e: React.FormEvent) => {
+    e.preventDefault();
+    try {
+      const res = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/api/admin/clubs`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          Authorization: `Bearer ${(session as any)?.accessToken}`,
+        },
+        body: JSON.stringify({
+          name: newClub.name,
+          sportType: newClub.sportType === 'Tennis' ? 0 : 1, // Mapping Enum or keep string if api accepts
+          description: newClub.description,
+        }),
+      });
+      if (res.ok) {
+        setNewClub({ name: '', sportType: 'Tennis', description: '' });
+        setIsCreating(false);
+        fetchClubs();
+      }
+    } catch (e) {
+      console.error(e);
+    }
+  };
+
+  const handleDelete = async (id: string) => {
+    if (!confirm('Are you sure you want to delete this club?')) return;
+    try {
+      const res = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/api/admin/clubs/${id}`, {
+        method: 'DELETE',
+        headers: { Authorization: `Bearer ${(session as any)?.accessToken}` },
+      });
+      if (res.ok) {
+        fetchClubs();
+      }
+    } catch (e) {
+      console.error(e);
+    }
+  };
+
+  if (loading) return <div>Loading clubs...</div>;
+
+  return (
+    <div className="space-y-6">
+      <div className="flex justify-between">
+        <h2 className="text-xl font-semibold">All Clubs</h2>
+        <button 
+          onClick={() => setIsCreating(true)}
+          className="bg-blue-600 text-white px-4 py-2 rounded shadow hover:bg-blue-700"
+        >
+          Create New Club
+        </button>
+      </div>
+
+      {isCreating && (
+        <form onSubmit={handleCreate} className="bg-white p-4 rounded shadow space-y-4 border">
+          <h3 className="font-semibold text-lg">New Club</h3>
+          <div>
+            <label className="block text-sm font-medium">Name</label>
+            <input 
+              required
+              className="mt-1 block w-full p-2 border rounded"
+              value={newClub.name}
+              onChange={e => setNewClub({ ...newClub, name: e.target.value })}
+            />
+          </div>
+          <div>
+            <label className="block text-sm font-medium">Sport Type</label>
+            <select
+              className="mt-1 block w-full p-2 border rounded"
+              value={newClub.sportType}
+              onChange={e => setNewClub({ ...newClub, sportType: e.target.value })}
+            >
+              <option value="Tennis">Tennis</option>
+              <option value="Cycling">Cycling</option>
+            </select>
+          </div>
+          <div>
+            <label className="block text-sm font-medium">Description</label>
+            <textarea
+              className="mt-1 block w-full p-2 border rounded"
+              value={newClub.description}
+              onChange={e => setNewClub({ ...newClub, description: e.target.value })}
+            />
+          </div>
+          <div className="flex gap-2">
+            <button type="submit" className="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700">Save</button>
+            <button type="button" onClick={() => setIsCreating(false)} className="px-4 py-2 border rounded hover:bg-gray-50">Cancel</button>
+          </div>
+        </form>
+      )}
+
+      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
+        {clubs.map(club => (
+          <div key={club.id} className="bg-white p-4 rounded shadow border">
+            <h3 className="font-bold text-lg">{club.name}</h3>
+            <p className="text-sm text-gray-500 mb-2">{club.sportType}</p>
+            <p className="text-sm line-clamp-2 mb-4">{club.description || 'No description'}</p>
+            <div className="flex justify-end gap-2">
+              <button 
+                onClick={() => handleDelete(club.id)}
+                className="text-red-600 hover:text-red-800 text-sm font-medium"
+              >
+                Delete
+              </button>
+            </div>
+          </div>
+        ))}
+        {clubs.length === 0 && <p className="text-gray-500 col-span-full">No clubs found.</p>}
+      </div>
+    </div>
+  );
+}