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/components/customers/TableCard.tsx

@@ -0,0 +1,32 @@
+import { Box, Card } from "@mantine/core";
+import type { ReactNode } from "react";
+
+export interface TableCardProps {
+  children: ReactNode;
+  /**
+   * Minimum width (px) the table is forced to occupy. The Mantine `Table` is
+   * always `width: 100%`, so without a floor it can never overflow its
+   * container and the horizontal scroll never engages. Setting a floor lets
+   * columns keep a sensible width and the card scroll horizontally on narrow
+   * viewports instead of squishing.
+   */
+  minWidth?: number;
+}
+
+/**
+ * Flush card shell for a `DataTable`: a borderless, padding-less card whose
+ * single child is a horizontally scrollable region. Pair with the table's
+ * `containerClassName="border-0 shadow-none bg-transparent"` so every table on
+ * the customer pages reads identically (same surface, same scroll behaviour).
+ */
+export function TableCard({ children, minWidth = 860 }: TableCardProps) {
+  return (
+    <Card p={0}>
+      <Box style={{ overflowX: "auto" }} w="100%">
+        <Box miw={minWidth}>{children}</Box>
+      </Box>
+    </Card>
+  );
+}
+
+export default TableCard;