feat(customers): implement customer management page with mock data

- Created CustomersPage component to display a list of companies with search and pagination features.
- Added mock data for companies, including various statuses and profiles.
- Implemented a service layer to simulate API calls for fetching company data, bookings, documents, and payments.
- Defined TypeScript types for company and related entities to ensure type safety.
- Integrated Mantine components for UI consistency and improved user experience.

apps/edr-freight-web/backoffice/src/hooks/customers/useCustomers.ts

@@ -0,0 +1,44 @@
+import { useQuery } from "@tanstack/react-query";
+
+import { QUERY_KEYS } from "@/constants/QUERY_KEYS";
+import { customersService } from "@/services/customers.service";
+import type { CompanyListFilter } from "@/types/customer";
+
+export function useCustomerList(filter: CompanyListFilter) {
+  return useQuery({
+    queryKey: QUERY_KEYS.CUSTOMERS.list(filter),
+    queryFn: () => customersService.list(filter),
+  });
+}
+
+export function useCustomerDetail(id: string | undefined) {
+  return useQuery({
+    queryKey: QUERY_KEYS.CUSTOMERS.byId(id ?? ""),
+    queryFn: () => customersService.getById(id!),
+    enabled: Boolean(id),
+  });
+}
+
+export function useCustomerBookings(id: string | undefined) {
+  return useQuery({
+    queryKey: QUERY_KEYS.CUSTOMERS.bookings(id ?? ""),
+    queryFn: () => customersService.bookingsFor(id!),
+    enabled: Boolean(id),
+  });
+}
+
+export function useCustomerDocuments(id: string | undefined) {
+  return useQuery({
+    queryKey: QUERY_KEYS.CUSTOMERS.documents(id ?? ""),
+    queryFn: () => customersService.documentsFor(id!),
+    enabled: Boolean(id),
+  });
+}
+
+export function useCustomerPayments(id: string | undefined) {
+  return useQuery({
+    queryKey: QUERY_KEYS.CUSTOMERS.payments(id ?? ""),
+    queryFn: () => customersService.paymentsFor(id!),
+    enabled: Boolean(id),
+  });
+}