Rename comp

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

apps/console/src/App.tsx

@@ -23,7 +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"));
+const VendorList = lazy(() => import("./pages/VendorList"));
 const FrameworksPage = lazy(() => import("./pages/FrameworksPage"));
 const FrameworkOverviewPage = lazy(() => import("./pages/FrameworkOverviewPage"));
 
@@ -40,7 +40,7 @@ function App() {
                     <Route path="/" element={<ConsoleLayout />}>
                       <Route index element={<HomePage />} />
                       <Route path="/peoples" element={<PeoplesPage />} />
-                      <Route path="/vendors" element={<VendorsPage />} />
+                      <Route path="/vendors" element={<VendorList />} />
                       <Route path="/frameworks" element={<FrameworksPage />} />
                       <Route path="/frameworks/:frameworkId" element={<FrameworkOverviewPage />} />
                     </Route>

apps/console/src/pages/VendorList.tsx

@@ -7,11 +7,13 @@ import {
 } from "react-relay";
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import { Badge } from "@/components/ui/badge";
-import { CircleUser, Globe, Shield } from "lucide-react";
+import { CircleUser, Globe, Shield, Store } from "lucide-react";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
 import type { VendorsPageQuery as VendorsPageQueryType } from "./__generated__/VendorsPageQuery.graphql";
 
-const VendorsPageQuery = graphql`
-  query VendorsPageQuery {
+const VendorListQuery = graphql`
+  query VendorListQuery {
     node(id: "AZSfP_xAcAC5IAAAAAAltA") {
       id
       ... on Organization {
@@ -30,12 +32,12 @@ const VendorsPageQuery = graphql`
   }
 `;
 
-function VendorsPageContent({
+function VendorListContent({
   queryRef,
 }: {
   queryRef: PreloadedQuery<VendorsPageQueryType>;
 }) {
-  const data = usePreloadedQuery(VendorsPageQuery, queryRef);
+  const data = usePreloadedQuery(VendorListQuery, queryRef);
   const vendors = data.node.vendors?.edges.map(edge => edge?.node) ?? [];
 
   return (
@@ -46,6 +48,34 @@ function VendorsPageContent({
           Keep track of your company's vendors and their compliance status.
         </p>
       </div>
+
+      <div className="rounded-lg border p-4 shadow-sm bg-card text-card-foreground">
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-4">
+            <Avatar className="h-10 w-10">
+              <AvatarFallback>+</AvatarFallback>
+            </Avatar>
+            <div className="space-y-1">
+              <p className="text-sm font-medium leading-none">Add a vendor</p>
+              <p className="text-sm text-muted-foreground">Search and add new vendors</p>
+            </div>
+          </div>
+          <div className="flex items-center gap-4">
+            <div className="flex gap-3">
+              <Input
+                type="text"
+                placeholder="Type vendor's name"
+                className="w-64"
+              />
+              <Button variant="secondary">
+                Search
+                <span className="ml-2">→</span>
+              </Button>
+            </div>
+          </div>
+        </div>
+      </div>
+
       <div className="space-y-2">
         {vendors.map((vendor) => (
           <div
@@ -81,7 +111,7 @@ function VendorsPageContent({
   );
 }
 
-function VendorsPageFallback() {
+function VendorListFallback() {
   return (
     <div className="p-6 space-y-6">
       <div className="space-y-1">
@@ -97,20 +127,20 @@ function VendorsPageFallback() {
   );
 }
 
-export default function VendorsPage() {
-  const [queryRef, loadQuery] = useQueryLoader<VendorsPageQueryType>(VendorsPageQuery);
+export default function VendorList() {
+  const [queryRef, loadQuery] = useQueryLoader<VendorsPageQueryType>(VendorListQuery);
 
   useEffect(() => {
     loadQuery({});
   }, [loadQuery]);
 
   if (!queryRef) {
-    return <VendorsPageFallback />;
+    return <VendorListFallback />;
   }
 
   return (
-    <Suspense fallback={<VendorsPageFallback />}>
-      <VendorsPageContent queryRef={queryRef} />
+    <Suspense fallback={<VendorListFallback />}>
+      <VendorListContent queryRef={queryRef} />
     </Suspense>
   );
 }

apps/console/src/pages/__generated__/VendorListQuery.graphql.ts

@@ -1,5 +1,5 @@
 /**
- * @generated SignedSource<<76613a71949a43eb69fb9dfd0a4c1694>>
+ * @generated SignedSource<<825817de2398615779403c0817995f9f>>
  * @lightSyntaxTransform
  * @nogrep
  */
@@ -9,8 +9,8 @@
 // @ts-nocheck
 
 import { ConcreteRequest } from 'relay-runtime';
-export type VendorsPageQuery$variables = Record<PropertyKey, never>;
-export type VendorsPageQuery$data = {
+export type VendorListQuery$variables = Record<PropertyKey, never>;
+export type VendorListQuery$data = {
   readonly node: {
     readonly id: string;
     readonly vendors?: {
@@ -25,9 +25,9 @@ export type VendorsPageQuery$data = {
     };
   };
 };
-export type VendorsPageQuery = {
-  response: VendorsPageQuery$data;
-  variables: VendorsPageQuery$variables;
+export type VendorListQuery = {
+  response: VendorListQuery$data;
+  variables: VendorListQuery$variables;
 };
 
 const node: ConcreteRequest = (function(){
@@ -112,7 +112,7 @@ return {
     "argumentDefinitions": [],
     "kind": "Fragment",
     "metadata": null,
-    "name": "VendorsPageQuery",
+    "name": "VendorListQuery",
     "selections": [
       {
         "alias": null,
@@ -135,7 +135,7 @@ return {
   "operation": {
     "argumentDefinitions": [],
     "kind": "Operation",
-    "name": "VendorsPageQuery",
+    "name": "VendorListQuery",
     "selections": [
       {
         "alias": null,
@@ -160,16 +160,16 @@ return {
     ]
   },
   "params": {
-    "cacheID": "6e90edfb4e2117a046157785647169c7",
+    "cacheID": "ced04a7cfd00f4525d09d6bf5303167b",
     "id": null,
     "metadata": {},
-    "name": "VendorsPageQuery",
+    "name": "VendorListQuery",
     "operationKind": "query",
-    "text": "query VendorsPageQuery {\n  node(id: \"AZSfP_xAcAC5IAAAAAAltA\") {\n    __typename\n    id\n    ... on Organization {\n      vendors {\n        edges {\n          node {\n            id\n            name\n            createdAt\n            updatedAt\n          }\n        }\n      }\n    }\n  }\n}\n"
+    "text": "query VendorListQuery {\n  node(id: \"AZSfP_xAcAC5IAAAAAAltA\") {\n    __typename\n    id\n    ... on Organization {\n      vendors {\n        edges {\n          node {\n            id\n            name\n            createdAt\n            updatedAt\n          }\n        }\n      }\n    }\n  }\n}\n"
   }
 };
 })();
 
-(node as any).hash = "22ce46326b87e66442cdb832085dfe60";
+(node as any).hash = "4f125111c515f868693b33e5209d05fd";
 
 export default node;