Introduce ErrorBoundary component for improved error handling

- Add `ErrorBoundary` component to handle rendering fallback UI during errors.
- Integrate `ErrorBoundary` into main layout and critical pages for global error handling.
- Create `useErrorHandler` hook to handle async errors consistently across components.
- Refactor `NewCustomerModal` and `CustomersPage` to leverage `useErrorHandler` for improved error management.
- Add a fallback dialog UI for user-friendly error reporting and resolution.

internal_frontend/components/customers/modal/NewCustomerModal.tsx

@@ -13,6 +13,7 @@ import {Card, CardContent, CardHeader} from "@/components/ui/card";
 import {CreateCustomerDto, NoteDto, PhoneNumberDto} from "@/services/customers/dtos/createCustomer.dto";
 import {addCustomer} from "@/services/customers/usecases/addCustomer";
 import {validateCustomer} from "@/services/customers/usecases/validateCustomer";
+import {useErrorHandler} from "@/components/error-boundary";
 
 export function NewCustomerModal() {
     const [step, setStep] = useState(1);
@@ -28,6 +29,7 @@ export function NewCustomerModal() {
     const [matches, setMatches] = useState<CustomerMatch[]>([]);
     const [showDetailModal, setShowDetailModal] = useState(false);
     const [selectedCustomer] = useState<CustomerMatch | null>(null);
+    const handleError = useErrorHandler();
 
     type CustomerMatch = {
         id: string;
@@ -52,15 +54,19 @@ export function NewCustomerModal() {
             const result = await validateCustomer({email, companyName, street, zip, city});
             setMatches(result);
         } catch (err) {
-            console.error("Validation failed", err);
+            handleError(err);
         }
     };
 
     const handleSubmit = async () => {
         if (!email || !name || !companyName || !street || !zip || !city) return;
-        const payload: CreateCustomerDto = {email, name, companyName, street, zip, city, phoneNumbers, notes};
-        await addCustomer(payload);
-        location.reload();
+        try {
+            const payload: CreateCustomerDto = {email, name, companyName, street, zip, city, phoneNumbers, notes};
+            await addCustomer(payload);
+            location.reload();
+        } catch (err) {
+            handleError(err);
+        }
     };
 
     const renderFormInput = (
@@ -277,4 +283,4 @@ export function NewCustomerModal() {
             </Dialog>
         </>
     );
-}
+}