rohit/probo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Rename vendor list page comp

Browse Source 
Signed-off-by: gearnode <bryan@frimin.fr>
This commit is contained in:
gearnode
2025-02-12 09:15:16 -08:00
parent 604868fddc
commit 8291217b93
2 changed files with 36 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
apps/console/src/App.tsx
View File

@@ -24,7 +24,7 @@ posthog.init(process.env.POSTHOG_KEY!, {
const HomePage = lazy(() => import("./pages/HomePage")); const HomePage = lazy(() => import("./pages/HomePage"));
const NotFoundPage = lazy(() => import("./pages/NotFoundPage")); const NotFoundPage = lazy(() => import("./pages/NotFoundPage"));
const PeoplesPage = lazy(() => import("./pages/PeoplesPage")); const PeoplesPage = lazy(() => import("./pages/PeoplesPage"));
const VendorList = lazy(() => import("./pages/VendorList")); const VendorListPage = lazy(() => import("./pages/VendorListPage"));
const FrameworksPage = lazy(() => import("./pages/FrameworksPage")); const FrameworksPage = lazy(() => import("./pages/FrameworksPage"));
const FrameworkOverviewPage = lazy(() => import("./pages/FrameworkOverviewPage")); const FrameworkOverviewPage = lazy(() => import("./pages/FrameworkOverviewPage"));
const VendorOverviewPage = lazy(() => import("./pages/VendorOverviewPage")); const VendorOverviewPage = lazy(() => import("./pages/VendorOverviewPage"));
@@ -71,7 +71,7 @@ function App() {
element={ element={
<Suspense> <Suspense>
<ErrorBoundary> <ErrorBoundary>
<VendorList /> <VendorListPage />
</ErrorBoundary> </ErrorBoundary>
</Suspense> </Suspense>
} }

66
apps/console/src/pages/VendorList.tsx → apps/console/src/pages/VendorListPage.tsx
View File

@@ -10,11 +10,12 @@ import { Badge } from "@/components/ui/badge";
import { CircleUser, Globe, Shield, Store } from "lucide-react"; import { CircleUser, Globe, Shield, Store } from "lucide-react";
import { Input } from "@/components/ui/input"; import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { Link } from "react-router";
import Fuse from "fuse.js"; import Fuse from "fuse.js";
import type { VendorListQuery as VendorListQueryType } from "./__generated__/VendorListQuery.graphql"; import type { VendorListPageQuery as VendorListPageQueryType } from "./__generated__/VendorListPageQuery.graphql";
const VendorListQuery = graphql` const VendorListPageQuery = graphql`
query VendorListQuery { query VendorListPageQuery {
node(id: "AZSfP_xAcAC5IAAAAAAltA") { node(id: "AZSfP_xAcAC5IAAAAAAltA") {
id id
... on Organization { ... on Organization {
@@ -46,9 +47,9 @@ const vendorsList = [
function VendorListContent({ function VendorListContent({
queryRef, queryRef,
}: { }: {
queryRef: PreloadedQuery<VendorListQueryType>; queryRef: PreloadedQuery<VendorListPageQueryType>;
}) { }) {
const data = usePreloadedQuery(VendorListQuery, queryRef); const data = usePreloadedQuery(VendorListPageQuery, queryRef);
const vendors = data.node?.vendors?.edges?.map(edge => edge?.node) ?? []; const vendors = data.node?.vendors?.edges?.map(edge => edge?.node) ?? [];
const [searchTerm, setSearchTerm] = useState(""); const [searchTerm, setSearchTerm] = useState("");
const [filteredVendors, setFilteredVendors] = useState<Array<typeof vendors[0]>>([]); const [filteredVendors, setFilteredVendors] = useState<Array<typeof vendors[0]>>([]);
@@ -125,35 +126,36 @@ function VendorListContent({
</div> </div>
</div> </div>
</div> </div>
<div className="space-y-2"> <div className="space-y-2">
{vendors.map((vendor) => ( {vendors.map((vendor) => (
<div <div key={vendor?.id} className="block hover:bg-accent/50 transition-colors">
key={vendor?.id} <Link
className="flex items-center justify-between p-4 rounded-lg border bg-card text-card-foreground shadow-sm" to={`/vendors/${vendor?.id}`}
> className="flex items-center justify-between p-4 rounded-lg border bg-card text-card-foreground shadow-sm"
<div className="flex items-center gap-4"> >
<Avatar className="h-10 w-10"> <div className="flex items-center gap-4">
<AvatarFallback>{vendor?.name?.[0]}</AvatarFallback> <Avatar className="h-10 w-10">
</Avatar> <AvatarFallback>{vendor?.name?.[0]}</AvatarFallback>
<div className="space-y-1"> </Avatar>
<p className="text-sm font-medium leading-none">{vendor?.name}</p> <div className="space-y-1">
<p className="text-sm text-muted-foreground">Vendor since {new Date(vendor?.createdAt).toLocaleDateString()}</p> <p className="text-sm font-medium leading-none">{vendor?.name}</p>
<p className="text-sm text-muted-foreground">Vendor since {new Date(vendor?.createdAt).toLocaleDateString()}</p>
</div>
</div> </div>
</div> <div className="flex items-center gap-4">
<div className="flex items-center gap-4"> <Badge variant="secondary" className="font-medium">
<Badge variant="secondary" className="font-medium"> Active
Active </Badge>
</Badge> <div className="flex gap-1">
<div className="flex gap-1"> <CircleUser className="h-4 w-4 text-muted-foreground" />
<CircleUser className="h-4 w-4 text-muted-foreground" /> <Globe className="h-4 w-4 text-muted-foreground" />
<Globe className="h-4 w-4 text-muted-foreground" /> <Shield className="h-4 w-4 text-muted-foreground" />
<Shield className="h-4 w-4 text-muted-foreground" /> </div>
<Badge variant="outline" className="text-muted-foreground">
Not assessed
</Badge>
</div> </div>
<Badge variant="outline" className="text-muted-foreground"> </Link>
Not assessed
</Badge>
</div>
</div> </div>
))} ))}
</div> </div>
@@ -177,8 +179,8 @@ function VendorListFallback() {
); );
} }
export default function VendorList() { export default function VendorListPage() {
const [queryRef, loadQuery] = useQueryLoader<VendorListQueryType>(VendorListQuery); const [queryRef, loadQuery] = useQueryLoader<VendorListPageQueryType>(VendorListPageQuery);
useEffect(() => { useEffect(() => {
loadQuery({}); loadQuery({});