Remove callApi, refactor API integrations, and adjust error handling

- Delete unused `callApi` utility and related imports across components.
- Replace `callApi` with direct `fetch` usage in `validateCustomer` and `addCustomer`.
- Update `customerRoutes` to include `/api` prefix for consistency.
- Refactor `useErrorHandler` to ensure comprehensive state management during errors.
- Improve `ErrorBoundary` component text for better clarity in fallback UI.
- Align `CustomersPage` logic with `useCallback` for optimized dependency management.

internal_frontend/app/api/customers/customerRoutes.ts

@@ -1,5 +1,5 @@
 export const customerRoutes = {
-    create: "/customers",
-    validate: "/customers/validate",
-    getById: (id: string) => `/customers/${id}`,
-};
+    create: "/api/customers",
+    validate: "/api/customers/validate",
+    getById: (id: string) => `/api/customers/${id}`,
+};

internal_frontend/app/api/customers/validate/route.ts

@@ -0,0 +1,10 @@
+import {NextRequest, NextResponse} from "next/server";
+import {serverCall} from "@/lib/api/serverCall";
+import {customerRoutes} from "@/app/api/customers/customerRoutes";
+
+export async function POST(req: NextRequest) {
+    const body = await req.json();
+    const result = await serverCall(customerRoutes.validate, "POST", body);
+    const data = await result.json();
+    return NextResponse.json(data);
+}

internal_frontend/app/customers/page.tsx

@@ -26,6 +26,7 @@ import {Customer} from "@/services/customers/entities/customer";
 import Link from "next/link";
 import {useErrorHandler} from "@/components/error-boundary";
 import {showError, showInfoToast} from "@/lib/ui/showToast";
+import {useCallback} from "react";
 
 export default function CustomersPage() {
     const [customers, setCustomers] = useState<Customer[]>([]);
@@ -35,7 +36,8 @@ export default function CustomersPage() {
     const pageSize = 15;
     const handleError = useErrorHandler();
 
-    const loadCustomers = async () => {
+    // Wrap the loadCustomers function with useCallback
+    const loadCustomers = useCallback(async () => {
         setLoading(true);
         try {
             const response = await fetch('/api/customers');
@@ -53,11 +55,11 @@ export default function CustomersPage() {
         } finally {
             setLoading(false);
         }
-    };
+    }, [handleError]); // Include handleError as a dependency
 
     useEffect(() => {
         loadCustomers();
-    }, [handleError]);
+    }, [loadCustomers]); // Add loadCustomers to the dependency array
 
     const filtered = useMemo(() => {
         if (customers.length === 0) return [];