Add payment form and announcement components

2026-04-03 21:40:12 +02:00
parent 739ffe510d
commit f282775c9a
4 changed files with 292 additions and 0 deletions
@@ -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>
+  );
+}