Add payment form and announcement components

frontend/src/app/payments/[registrationId]/page.tsx

@@ -0,0 +1,19 @@
+import { PaymentForm } from '@/components/payment-form';
+
+interface PaymentPageProps {
+  params: Promise<{
+    registrationId: string;
+  }>;
+}
+
+export default async function PaymentPage({ params }: PaymentPageProps) {
+  const { registrationId } = await params;
+  
+  return (
+    <div className="min-h-screen bg-gray-50 py-8">
+      <div className="max-w-4xl mx-auto px-4">
+        <PaymentForm registrationId={registrationId} />
+      </div>
+    </div>
+  );
+}

frontend/src/components/announcement-form.tsx

@@ -0,0 +1,84 @@
+'use client';
+
+import { useState } from 'react';
+import { api } from '@/lib/api';
+import { useRouter } from 'next/navigation';
+
+interface AnnouncementFormProps {
+  eventId: string;
+}
+
+export function AnnouncementForm({ eventId }: AnnouncementFormProps) {
+  const [title, setTitle] = useState('');
+  const [content, setContent] = useState('');
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const router = useRouter();
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError(null);
+    setIsSubmitting(true);
+
+    try {
+      await api.createAnnouncement(eventId, title, content);
+      router.push(`/events/${eventId}`);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to create announcement');
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  return (
+    <div className="max-w-md mx-auto">
+      {error && (
+        <div className="mb-4 p-3 bg-red-100 border border-red-400 text-red-700 rounded">
+          {error}
+        </div>
+      )}
+
+      <form onSubmit={handleSubmit} className="bg-white rounded-lg shadow-md p-6 space-y-4">
+        <h2 className="text-xl font-bold mb-4">Create Announcement</h2>
+        
+        <div>
+          <label htmlFor="title" className="block text-sm font-medium text-gray-700 mb-1">
+            Title
+          </label>
+          <input
+            id="title"
+            type="text"
+            value={title}
+            onChange={(e) => setTitle(e.target.value)}
+            required
+            maxLength={200}
+            className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+          />
+        </div>
+
+        <div>
+          <label htmlFor="content" className="block text-sm font-medium text-gray-700 mb-1">
+            Content
+          </label>
+          <textarea
+            id="content"
+            value={content}
+            onChange={(e) => setContent(e.target.value)}
+            required
+            rows={6}
+            maxLength={5000}
+            className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+          />
+        </div>
+
+        <button
+          type="submit"
+          disabled={isSubmitting}
+          className="w-full py-2 px-4 bg-blue-600 text-white rounded-md hover:bg-blue-700 disabled:bg-gray-400"
+        >
+          {isSubmitting ? 'Posting...' : 'Post Announcement'}
+        </button>
+      </form>
+    </div>
+  );
+}

frontend/src/components/announcement-list.tsx

@@ -0,0 +1,69 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { api, Announcement } from '@/lib/api';
+
+interface AnnouncementListProps {
+  eventId: string;
+}
+
+export function AnnouncementList({ eventId }: AnnouncementListProps) {
+  const [announcements, setAnnouncements] = useState<Announcement[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    loadAnnouncements();
+  }, [eventId]);
+
+  const loadAnnouncements = async () => {
+    try {
+      setIsLoading(true);
+      const data = await api.getEventAnnouncements(eventId);
+      setAnnouncements(data);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to load announcements');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  if (isLoading) {
+    return <div className="text-center py-4">Loading announcements...</div>;
+  }
+
+  if (error) {
+    return (
+      <div className="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded text-sm">
+        {error}
+      </div>
+    );
+  }
+
+  if (announcements.length === 0) {
+    return (
+      <div className="text-center py-4 text-gray-500 text-sm">
+        No announcements yet.
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-4">
+      {announcements.map((announcement) => (
+        <div key={announcement.id} className="bg-white rounded-lg shadow-sm border p-4">
+          <div className="flex justify-between items-start mb-2">
+            <h3 className="font-semibold text-lg">{announcement.title}</h3>
+            <span className="text-xs text-gray-500">
+              {new Date(announcement.createdAt).toLocaleDateString()}
+            </span>
+          </div>
+          <p className="text-gray-700 whitespace-pre-wrap">{announcement.content}</p>
+          <p className="text-sm text-gray-500 mt-2">
+            Posted by {announcement.authorName}
+          </p>
+        </div>
+      ))}
+    </div>
+  );
+}

frontend/src/components/payment-form.tsx

@@ -0,0 +1,120 @@
+'use client';
+
+import { useState } from 'react';
+import { api } from '@/lib/api';
+import { useRouter } from 'next/navigation';
+
+interface PaymentFormProps {
+  registrationId: string;
+}
+
+export function PaymentForm({ registrationId }: PaymentFormProps) {
+  const [amount, setAmount] = useState('');
+  const [method, setMethod] = useState('Cash');
+  const [transactionId, setTransactionId] = useState('');
+  const [notes, setNotes] = useState('');
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const router = useRouter();
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError(null);
+    setIsSubmitting(true);
+
+    try {
+      await api.recordPayment(
+        registrationId,
+        parseFloat(amount),
+        method,
+        transactionId || undefined,
+        notes || undefined
+      );
+      router.push('/registrations');
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Payment failed');
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  return (
+    <div className="max-w-md mx-auto">
+      {error && (
+        <div className="mb-4 p-3 bg-red-100 border border-red-400 text-red-700 rounded">
+          {error}
+        </div>
+      )}
+
+      <form onSubmit={handleSubmit} className="bg-white rounded-lg shadow-md p-6 space-y-4">
+        <h2 className="text-xl font-bold mb-4">Record Payment</h2>
+        
+        <div>
+          <label htmlFor="amount" className="block text-sm font-medium text-gray-700 mb-1">
+            Amount ($)
+          </label>
+          <input
+            id="amount"
+            type="number"
+            step="0.01"
+            min="0.01"
+            value={amount}
+            onChange={(e) => setAmount(e.target.value)}
+            required
+            className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+          />
+        </div>
+
+        <div>
+          <label htmlFor="method" className="block text-sm font-medium text-gray-700 mb-1">
+            Payment Method
+          </label>
+          <select
+            id="method"
+            value={method}
+            onChange={(e) => setMethod(e.target.value)}
+            className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+          >
+            <option value="Cash">Cash</option>
+            <option value="Online">Online</option>
+            <option value="Transfer">Transfer</option>
+          </select>
+        </div>
+
+        <div>
+          <label htmlFor="transactionId" className="block text-sm font-medium text-gray-700 mb-1">
+            Transaction ID (optional)
+          </label>
+          <input
+            id="transactionId"
+            type="text"
+            value={transactionId}
+            onChange={(e) => setTransactionId(e.target.value)}
+            className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+          />
+        </div>
+
+        <div>
+          <label htmlFor="notes" className="block text-sm font-medium text-gray-700 mb-1">
+            Notes (optional)
+          </label>
+          <textarea
+            id="notes"
+            value={notes}
+            onChange={(e) => setNotes(e.target.value)}
+            rows={3}
+            className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+          />
+        </div>
+
+        <button
+          type="submit"
+          disabled={isSubmitting}
+          className="w-full py-2 px-4 bg-green-600 text-white rounded-md hover:bg-green-700 disabled:bg-gray-400"
+        >
+          {isSubmitting ? 'Recording...' : 'Record Payment'}
+        </button>
+      </form>
+    </div>
+  );
+}