Add IBAN formatting for improved display readability

Implemented IBAN formatting to display with proper spacing:
- Added formatIban() utility function in formatStrings.ts
- Format: Groups of 4 characters separated by spaces (e.g., HR12 3456 7890 1234 5678 9)
- Applied formatting to IBAN field display in AccountForm
- Updated validation to check cleaned IBAN (without spaces)
- Maintains backward compatibility with server-side validation

🤖 Generated with [Claude Code](https://claude.com/claude-code)

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

app/ui/AccountForm.tsx

@@ -7,6 +7,7 @@ import { useFormState, useFormStatus } from "react-dom";
 import { useLocale, useTranslations } from "next-intl";
 import Link from "next/link";
 import AccountCircleIcon from "@mui/icons-material/AccountCircle";
+import { formatIban } from "../lib/formatStrings";
 
 export type AccountFormProps = {
     profile: UserProfile | null;
@@ -28,15 +29,16 @@ const FormFields: FC<FormFieldsProps> = ({ profile, errors, message }) => {
         firstName: profile?.firstName ?? "",
         lastName: profile?.lastName ?? "",
         address: profile?.address ?? "",
-        iban: profile?.iban ?? "",
+        iban: formatIban(profile?.iban) ?? "",
     });
 
     const handleInputChange = (field: keyof typeof formValues, value: string) => {
         setFormValues(prev => ({ ...prev, [field]: value }));
     };
 
-    // Check if any required field is missing
-    const hasMissingData = !formValues.firstName || !formValues.lastName || !formValues.address || !formValues.iban;
+    // Check if any required field is missing (clean IBAN of spaces for validation)
+    const cleanedIban = formValues.iban.replace(/\s/g, '');
+    const hasMissingData = !formValues.firstName || !formValues.lastName || !formValues.address || !cleanedIban;
 
     return (
         <>
@@ -127,7 +129,7 @@ const FormFields: FC<FormFieldsProps> = ({ profile, errors, message }) => {
                     type="text"
                     placeholder={t("iban-placeholder")}
                     className="input input-bordered w-full"
-                    defaultValue={profile?.iban ?? ""}
+                    defaultValue={formatIban(profile?.iban)}
                     onChange={(e) => handleInputChange("iban", e.target.value)}
                     disabled={pending}
                 />