Add vendors page

Signed-off-by: gearnode <bryan@frimin.fr>

apps/console/src/App.tsx

@@ -23,6 +23,7 @@ posthog.init(process.env.POSTHOG_KEY!, {
 const HomePage = lazy(() => import("./pages/HomePage"));
 const NotFoundPage = lazy(() => import("./pages/NotFoundPage"));
 const PeoplesPage = lazy(() => import("./pages/PeoplesPage"));
+const VendorsPage = lazy(() => import("./pages/VendorsPage"));
 
 function App() {
   return (
@@ -37,6 +38,7 @@ function App() {
                     <Route path="/" element={<ConsoleLayout />}>
                       <Route index element={<HomePage />} />
                       <Route path="/peoples" element={<PeoplesPage />} />
+                      <Route path="/vendors" element={<VendorsPage />} />
                     </Route>
                     <Route path="*" element={<NotFoundPage />} />
                   </Routes>

apps/console/src/pages/VendorsPage.tsx

@@ -0,0 +1,61 @@
+import { Suspense, useEffect } from "react";
+import {
+  graphql,
+  PreloadedQuery,
+  usePreloadedQuery,
+  useQueryLoader,
+} from "react-relay";
+import type { VendorsPageQuery as VendorsPageQueryType } from "./__generated__/VendorsPageQuery.graphql";
+
+const VendorsPageQuery = graphql`
+  query VendorsPageQuery {
+    node(id: "AZSfP_xAcAC5IAAAAAAltA") {
+      id
+      ... on Organization {
+        vendors {
+          edges {
+            node {
+              id
+              name
+              createdAt
+              updatedAt
+            }
+          }
+        }
+      }
+    }
+  }
+`;
+
+function VendorsPageContent({
+  queryRef,
+}: {
+  queryRef: PreloadedQuery<VendorsPageQueryType>;
+}) {
+  const data = usePreloadedQuery(VendorsPageQuery, queryRef);
+  return (
+    <pre>{JSON.stringify(data, null, 2)}</pre>
+  );
+}
+
+function VendorsPageFallback() {
+  return <div>Loading...</div>;
+}
+
+export default function VendorsPage() {
+  const [queryRef, loadQuery] = useQueryLoader<VendorsPageQueryType>(VendorsPageQuery);
+
+  useEffect(() => {
+    loadQuery({});
+  }, [loadQuery]);
+
+  if (!queryRef) {
+    return <VendorsPageFallback />;
+  }
+
+  return (
+    <Suspense fallback={<VendorsPageFallback />}>
+      <VendorsPageContent queryRef={queryRef} />
+    </Suspense>
+  );
+}