crap

src/pages/PageWrapper/PageWrapper.module.css

@@ -10,5 +10,5 @@
 .container {
     padding: rem(20);
     display: flex;
-    min-height: 100vh;
+    //min-height: 100vh;
 }

src/pages/ProductsPage/components/ProductsTable/ProductsTable.tsx

@@ -0,0 +1,29 @@
+import {ProductSchema} from "../../../../client";
+import {FC, RefObject} from "react";
+import {BaseTable, BaseTableRef} from "../../../../components/BaseTable/BaseTable.tsx";
+import {MRT_TableOptions} from "mantine-react-table";
+import {useProductsTableColumns} from "./columns.tsx";
+
+type Props = {
+    products: ProductSchema[];
+    tableRef?: RefObject<BaseTableRef<ProductSchema>>
+}
+const ProductsTable: FC<Props> = ({products, tableRef}) => {
+    const columns = useProductsTableColumns();
+    return (
+        <BaseTable
+            ref={tableRef}
+            data={products}
+            columns={columns}
+            restProps={{
+                enableColumnActions: false,
+                manualPagination: true,
+                enableBottomToolbar: true,
+                enablePagination: true
+            } as MRT_TableOptions<ProductSchema>}
+
+        />
+    )
+}
+
+export default ProductsTable;

src/pages/ProductsPage/components/ProductsTable/columns.tsx

@@ -0,0 +1,20 @@
+import {useMemo} from "react";
+import {MRT_ColumnDef} from "mantine-react-table";
+import {ProductSchema} from "../../../../client";
+
+export const useProductsTableColumns = () => {
+    return useMemo<MRT_ColumnDef<ProductSchema>[]>(() => [
+        {
+            accessorKey: "article",
+            header: "Артикул",
+            enableSorting: false,
+        },
+        {
+            accessorKey: "name",
+            header: "Название",
+            enableSorting: false,
+
+        },
+    ], []);
+
+}

src/pages/ProductsPage/hooks/useProductsList.tsx

@@ -0,0 +1,19 @@
+import {useQuery} from "@tanstack/react-query";
+import {ProductService} from "../../../client";
+
+type Props = {
+    clientId: number,
+    page: number,
+    itemsPerPage: number,
+}
+const useServicesList = (props: Props) => {
+    const {clientId, page, itemsPerPage} = props;
+    const {isPending, error, data, refetch} = useQuery({
+        queryKey: ['getAllServices', clientId, page, itemsPerPage],
+        queryFn: () => ProductService.getProductsByClientId({clientId, page, itemsPerPage})
+    });
+    const products = isPending || error || !data ? [] : data.products;
+
+    return {products, refetch}
+}
+export default useServicesList;

src/pages/ProductsPage/index.ts

@@ -0,0 +1 @@
+export {ProductsPage} from './ui/ProductsPage';

src/pages/ProductsPage/ui/ProductsPage.module.css

@@ -0,0 +1,17 @@
+.container {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    gap: rem(10);
+}
+
+
+.body-container {
+    padding: rem(5);
+}
+
+.top-panel {
+    padding: rem(5);
+    gap: rem(10);
+    display: flex;
+}

src/pages/ProductsPage/ui/ProductsPage.tsx

@@ -0,0 +1,40 @@
+import PageBlock from "../../../components/PageBlock/PageBlock.tsx";
+import {FC, useState} from "react";
+import styles from './ProductsPage.module.css';
+import {Drawer} from "@mantine/core";
+import {useDisclosure} from "@mantine/hooks";
+import ClientSelect from "../../../components/Selects/ClientSelect/ClientSelect.tsx";
+import ProductsTable from "../components/ProductsTable/ProductsTable.tsx";
+import useProductsList from "../hooks/useProductsList.tsx";
+
+export const ProductsPage: FC = () => {
+    const [opened, {open, close}] = useDisclosure(false);
+    const [clientId, setClientId] = useState(-1);
+    const {products} = useProductsList({clientId, page: 0, itemsPerPage: 10});
+    return (
+        <>
+            <Drawer
+                opened={opened}
+                onClose={close}
+                position={"right"}
+                size={"100%"}
+            />
+            <div className={styles['container']}>
+
+                <PageBlock>
+                    <div className={styles['top-panel']}>
+
+                        <ClientSelect onChange={event => setClientId(event.id)}/>
+                    </div>
+
+                </PageBlock>
+                <PageBlock>
+                    <div className={styles['body-container']}>
+                        <ProductsTable products={products}/>
+                    </div>
+                </PageBlock>
+            </div>
+
+        </>
+    )
+}