Customer Detail Page and Enhance dynamic breadcrumbs

internal_frontend/app/customers/page.tsx

@@ -24,36 +24,7 @@ import {motion} from "framer-motion";
 import {ArrowRight} from "lucide-react";
 import {NewCustomerModal} from "@/components/customers/modal/NewCustomerModal";
 import axios from "axios";
-
-export interface CustomerPhoneNumber {
-    number: string;
-    note: string;
-    creator: string;
-    lastModifier: string;
-    createdAt: string;
-    updatedAt: string;
-}
-
-export interface CustomerNote {
-    text: string;
-    creator: string;
-    lastModifier: string;
-    createdAt: string;
-    updatedAt: string;
-}
-
-export interface Customer {
-    id: string;
-    email: string;
-    name: string;
-    companyName: string;
-    phoneNumbers: CustomerPhoneNumber[];
-    street: string;
-    zip: string;
-    city: string;
-    notes: CustomerNote[];
-    createdAt: string;
-}
+import {Customer} from "@/services/customers/entities/customer";
 
 export default function CustomersPage() {
     const router = useRouter();
@@ -64,17 +35,30 @@ export default function CustomersPage() {
     const pageSize = 15;
 
     useEffect(() => {
-        axios.get("/api/customers").then((res) => {
-            setCustomers(res.data);
-            setLoading(false);
-        });
+        setLoading(true);
+        axios.get("/api/customers")
+            .then((res) => {
+                setCustomers(res.data);
+            })
+            .catch((error) => {
+                console.error('Error fetching customers:', error);
+                setCustomers([]);
+            })
+            .finally(() => {
+                setLoading(false);
+            });
     }, []);
 
     const filtered = useMemo(() => {
         return customers.filter(
             (c) =>
                 c.name.toLowerCase().includes(search.toLowerCase()) ||
-                c.email.toLowerCase().includes(search.toLowerCase())
+                c.email.toLowerCase().includes(search.toLowerCase()) ||
+                c.companyName.toLowerCase().includes(search.toLowerCase()) ||
+                c.street.toLowerCase().includes(search.toLowerCase()) ||
+                c.zip.toLowerCase().includes(search.toLowerCase()) ||
+                c.city.toLowerCase().includes(search.toLowerCase()) ||
+                c.phoneNumbers?.[0]?.number?.toLowerCase().includes(search.toLowerCase())
         );
     }, [customers, search]);