mirror of
https://github.com/Tria-plc/edr-platform.git
synced 2026-08-27 13:10:56 +00:00
c6bc636495
- 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.
33 lines
1.1 KiB
TypeScript
33 lines
1.1 KiB
TypeScript
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;
|