Add registration status badges and auto-dismissing dashboard messages

Two consistency fixes requested after the payment-method work:

1. Registration status (pending/confirmed/partial_paid/paid/cancelled)
   was printed as a raw string on the user dashboard. Added
   RegistrationStatusBadge mirroring the existing EventStatusBadge
   pattern, using the same status colors already established on
   dashboard/admin/registrations.

2. Inline success/error banners across dashboard pages persisted
   indefinitely. Added a shared useDismissingState hook (drop-in
   useState replacement that auto-clears a truthy value after 7s,
   resetting the timer on each update) and swapped it in across ~24
   dashboard files. Excluded: message-only modal dialogs (ticket-
   scanning's success/error confirmations) and two states that mix
   live form-validation feedback with async results inside actively-
   open forms (the registration-edit modal's editError, the event
   create/edit modal's error) - those keep persisting until the user
   acts, since auto-hiding a "fix this field" message mid-edit would
   be a regression. Also fixed at-the-door's existing bespoke
   auto-dismiss timers (10s/15s, one mislabeled as "5s") to the same
   consistent 7s, and removed admin/settings' manual x dismiss button
   in favor of the same auto-only behavior.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

frontend/src/app/dashboard/user/page.tsx

@@ -6,6 +6,7 @@ import { useRouter } from "next/navigation";
 import { formatDate } from "@/lib/date";
 import { formatPaymentMethod } from "@/lib/paymentMethod";
 import { QrImage } from "@/components/shared/QrImage";
+import { useDismissingState } from "@/hooks/useDismissingState";
 
 // Helper formatters
 const formatRand = (n: number) => `R ${n.toFixed(2)}`;
@@ -30,6 +31,20 @@ function EventStatusBadge({ event }: { event: any }) {
   return <span className={`text-[10px] px-1.5 py-0.5 rounded ${className}`}>{label}</span>;
 }
 
+// Status badge for a registration, shown wherever registration.status is displayed on this
+// page. Colors match the status coloring already used on dashboard/admin/registrations.
+const REGISTRATION_STATUS_STYLES: Record<string, { label: string; className: string }> = {
+  pending: { label: 'Pending', className: 'bg-gray-100 text-gray-600' },
+  confirmed: { label: 'Confirmed', className: 'bg-blue-50 text-blue-700' },
+  partial_paid: { label: 'Partially Paid', className: 'bg-amber-50 text-amber-700' },
+  paid: { label: 'Paid', className: 'bg-green-50 text-green-700' },
+  cancelled: { label: 'Cancelled', className: 'bg-red-50 text-red-700' },
+};
+function RegistrationStatusBadge({ status }: { status: string }) {
+  const s = REGISTRATION_STATUS_STYLES[status] || { label: status, className: 'bg-gray-100 text-gray-500' };
+  return <span className={`text-[10px] px-1.5 py-0.5 rounded ${s.className}`}>{s.label}</span>;
+}
+
 // Effective unit price for an event option (or one of its variants), early-bird aware.
 // Used by the registration editor, which works off raw /api/events/:id data rather than
 // a registration's priceSnapshot — mirrors the pricing logic in register/[eventId]/RegisterForm.tsx.
@@ -53,8 +68,8 @@ export default function UserDashboardPage() {
   const { token, user } = useAuth();
   const [registrations, setRegistrations] = useState<any[]>([]);
   const [tickets, setTickets] = useState<any[]>([]);
-  const [error, setError] = useState<string | null>(null);
-  const [info, setInfo] = useState<string | null>(null);
+  const [error, setError] = useDismissingState<string | null>(null);
+  const [info, setInfo] = useDismissingState<string | null>(null);
   const [loading, setLoading] = useState<boolean>(false);
 
   // Filters
@@ -682,7 +697,7 @@ export default function UserDashboardPage() {
                           <EventStatusBadge event={r.event} />
                         </div>
                         <div className="text-xs text-gray-600">
-                          Status: {r.status}{isCancelled && <span className="ml-2 inline-block text-[10px] px-1.5 py-0.5 rounded bg-gray-200 text-gray-700">cancelled</span>}
+                          Status: <RegistrationStatusBadge status={r.status} />
                         </div>
                         {(() => {
                           const fs = formStatuses[r.id];
@@ -869,7 +884,7 @@ export default function UserDashboardPage() {
             </div>
             <div className="space-y-3">
               <div>
-                <div className="text-sm text-gray-600">Status: {activeReg.status}</div>
+                <div className="text-sm text-gray-600">Status: <RegistrationStatusBadge status={activeReg.status} /></div>
                 {activeBill && (
                   <div className="text-sm">
                     <div>Total: {formatRand(activeBill.totalDue)}</div>