feat(dashboard): Auto generation of data table based on list query

packages/dashboard/src/routes/_authenticated/products.tsx

@@ -1,6 +1,11 @@
+import { DataTable } from '@/framework/internal/data-table/data-table.js';
 import { getListQueryFields } from '@/framework/internal/document-introspection/get-document-structure.js';
-import { createFileRoute } from '@tanstack/react-router';
+import { api } from '@/graphql/api.js';
 import { graphql } from '@/graphql/graphql.js';
+import { useQuery } from '@tanstack/react-query';
+import { createFileRoute } from '@tanstack/react-router';
+import { createColumnHelper } from '@tanstack/react-table';
+import { ResultOf } from 'gql.tada';
 import React from 'react';
 
 export const Route = createFileRoute('/_authenticated/products')({
@@ -15,35 +20,32 @@ const productListDocument = graphql(`
                 name
                 slug
                 enabled
+                updatedAt
             }
         }
     }
 `);
 
-const productFragment = graphql(`
-    fragment ProductFragment on Product {
-        id
-        name
-        slug
-        enabled
-    }
-`);
+export function ProductListPage() {
+    const { data } = useQuery({
+        queryFn: () =>
+            api.query(productListDocument, {
+                options: {
+                    take: 100,
+                },
+            }),
+        queryKey: ['ProductList'],
+    });
+    const fields = getListQueryFields(productListDocument);
+    const columnHelper =
+        createColumnHelper<ResultOf<typeof productListDocument>['products']['items'][number]>();
 
-const productListDocument2 = graphql(
-    `
-        query ProductList($options: ProductListOptions) {
-            products(options: $options) {
-                items {
-                    ...ProductFragment
-                }
-            }
-        }
-    `,
-    [productFragment],
-);
+    const columns = fields.map(field =>
+        columnHelper.accessor(field.name as any, {
+            header: field.name,
+            meta: { type: field.type },
+        }),
+    );
 
-export function ProductListPage() {
-    console.log('regular', getListQueryFields(productListDocument));
-    console.log('with fragment', getListQueryFields(productListDocument2));
-    return <div>Product List Page</div>;
+    return <DataTable columns={columns} data={data?.products.items ?? []}></DataTable>;
 }

packages/dashboard/tsconfig.json

@@ -3,7 +3,7 @@
   "compilerOptions": {
     "lib": ["dom"],
     "types": ["node"],
-    "jsx": "react",
+    "jsx": "react-jsx",
     "baseUrl": ".",
     "paths": {
       "@/*": ["./src/*"]