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

Unify page headers on most pages

Browse Source 
Signed-off-by: Émile Ré <nemile.re@gmail.com>
This commit is contained in:
Émile Ré
2025-03-14 16:36:18 +04:00
parent 4fc9430e8e
commit e56dac3f71
8 changed files with 416 additions and 354 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
apps/console/src/layouts/ConsoleLayout.tsx
View File

@@ -381,8 +381,8 @@ export default function ConsoleLayout() {
<Suspense> <Suspense>
<AppSidebar className="p-4" /> <AppSidebar className="p-4" />
</Suspense> </Suspense>
<SidebarInset className="flex items-center"> <SidebarInset>
<div className="w-lg md:w-xl lg:w-3xl xl:w-4xl 2xl:w-5xl p-8"> <div className="mx-auto w-lg md:w-xl lg:w-3xl xl:w-4xl 2xl:w-5xl p-8">
<header className="flex shrink-0 items-center gap-2"> <header className="flex shrink-0 items-center gap-2">
<Routes> <Routes>
<Route <Route

100
apps/console/src/pages/FrameworkListPage.tsx
View File

@@ -23,6 +23,7 @@ import {
import { Label } from "@/components/ui/label"; import { Label } from "@/components/ui/label";
import { Input } from "@/components/ui/input"; import { Input } from "@/components/ui/input";
import { FrameworkListPageImportFrameworkMutation as FrameworkListPageImportFrameworkMutationType } from "./__generated__/FrameworkListPageImportFrameworkMutation.graphql"; import { FrameworkListPageImportFrameworkMutation as FrameworkListPageImportFrameworkMutationType } from "./__generated__/FrameworkListPageImportFrameworkMutation.graphql";
import { PageHeader } from "./PageHeader";
const FrameworkListPageQuery = graphql` const FrameworkListPageQuery = graphql`
query FrameworkListPageQuery($organizationId: ID!) { query FrameworkListPageQuery($organizationId: ID!) {
@@ -186,57 +187,56 @@ function FrameworkListPageContent({
<Helmet> <Helmet>
<title>Frameworks - Probo</title> <title>Frameworks - Probo</title>
</Helmet> </Helmet>
<div className="container mx-auto py-6"> <div className="container">
<div className="flex justify-between items-center mb-6"> <PageHeader
<div> className="mb-17"
<h1 className="text-2xl font-bold">Frameworks</h1> title="Frameworks"
<p className="text-muted-foreground"> description="Manage your compliance frameworks"
Manage your compliance frameworks actions={
</p> <div className="flex gap-4">
</div> <Dialog
<div className="flex gap-2"> open={isImportDialogOpen}
<Dialog onOpenChange={setIsImportDialogOpen}
open={isImportDialogOpen} >
onOpenChange={setIsImportDialogOpen} <DialogTrigger asChild>
> <Button variant="outline">
<DialogTrigger asChild> <Upload className="mr-2 h-4 w-4" />
<Button variant="outline"> Import Framework
<Upload className="mr-2 h-4 w-4" /> </Button>
Import Framework </DialogTrigger>
</Button> <DialogContent>
</DialogTrigger> <DialogHeader>
<DialogContent> <DialogTitle>Import Framework</DialogTitle>
<DialogHeader> </DialogHeader>
<DialogTitle>Import Framework</DialogTitle> <div className="space-y-4 py-4">
</DialogHeader> <div className="space-y-2">
<div className="space-y-4 py-4"> <Label htmlFor="framework-file">
<div className="space-y-2"> Upload Framework File
<Label htmlFor="framework-file"> </Label>
Upload Framework File <Input
</Label> id="framework-file"
<Input type="file"
id="framework-file" ref={fileInputRef}
type="file" onChange={handleFileChange}
ref={fileInputRef} disabled={isUploading}
onChange={handleFileChange} accept=".json"
disabled={isUploading} />
accept=".json" <p className="text-sm text-muted-foreground">
/> Upload a JSON file containing your framework definition.
<p className="text-sm text-muted-foreground"> </p>
Upload a JSON file containing your framework definition. </div>
</p>
</div> </div>
</div> </DialogContent>
</DialogContent> </Dialog>
</Dialog> <Button asChild>
<Button asChild> <Link to={`/organizations/${organizationId}/frameworks/create`}>
<Link to={`/organizations/${organizationId}/frameworks/create`}> <Plus className="mr-2 h-4 w-4" />
<Plus className="mr-2 h-4 w-4" /> Create Framework
Create Framework </Link>
</Link> </Button>
</Button> </div>
</div> }
</div> />
<div className="space-y-6"> <div className="space-y-6">
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-2"> <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-2">
{frameworks.map((framework) => { {frameworks.map((framework) => {

20
apps/console/src/pages/FrameworkOverviewPage.tsx
View File

@@ -12,6 +12,7 @@ import { Button } from "@/components/ui/button";
import type { FrameworkOverviewPageQuery as FrameworkOverviewPageQueryType } from "./__generated__/FrameworkOverviewPageQuery.graphql"; import type { FrameworkOverviewPageQuery as FrameworkOverviewPageQueryType } from "./__generated__/FrameworkOverviewPageQuery.graphql";
import { Helmet } from "react-helmet-async"; import { Helmet } from "react-helmet-async";
import { createPortal } from "react-dom"; import { createPortal } from "react-dom";
import { PageHeader } from "./PageHeader";
const FrameworkOverviewPageQuery = graphql` const FrameworkOverviewPageQuery = graphql`
query FrameworkOverviewPageQuery($frameworkId: ID!) { query FrameworkOverviewPageQuery($frameworkId: ID!) {
@@ -81,14 +82,13 @@ function FrameworkOverviewPageContent({
).length; ).length;
return ( return (
<div className="min-h-screen bg-background p-6 space-y-6"> <div className="container space-y-6">
<div className="space-y-4 mb-8"> <PageHeader
<div className="flex justify-between items-center"> className="mb-17"
<div> title={framework.name ?? ""}
<h2 className="text-2xl font-semibold mb-1">{framework.name}</h2> description={framework.description ?? ""}
<p className="text-muted-foreground">{framework.description}</p> actions={
</div> <div className="flex gap-4">
<div className="flex gap-2">
<Button variant="outline" asChild> <Button variant="outline" asChild>
<Link <Link
to={`/organizations/${organizationId}/frameworks/${framework.id}/update`} to={`/organizations/${organizationId}/frameworks/${framework.id}/update`}
@@ -105,8 +105,8 @@ function FrameworkOverviewPageContent({
</Link> </Link>
</Button> </Button>
</div> </div>
</div> }
</div> />
<div className="mb-6 flex justify-between items-center"> <div className="mb-6 flex justify-between items-center">
<h2 className="text-xl font-semibold">Controls</h2> <h2 className="text-xl font-semibold">Controls</h2>

50
apps/console/src/pages/PageHeader.tsx Normal file
View File

@@ -0,0 +1,50 @@
import { cn } from "@/lib/utils";
import { ReactNode } from "react";
export function PageHeader({
className,
title,
actions,
description,
}: {
className?: string;
title: string;
actions?: ReactNode;
description: string;
}) {
return (
<div className={cn("space-y-6", className)}>
{actions ? (
<div className="flex items-center justify-between">
<PageHeading title={title} />
{actions}
</div>
) : (
<PageHeading title={title} />
)}
<PageDescription>{description}</PageDescription>
</div>
);
}
export function PageHeading({
title,
className,
}: {
className?: string;
title: string;
}) {
return <h1 className={cn("text-3xl font-medium", className)}>{title}</h1>;
}
export function PageDescription({
children,
className,
}: {
className?: string;
children: ReactNode;
}) {
return (
<p className={cn("text-lg text-muted-foreground", className)}>{children}</p>
);
}

226
apps/console/src/pages/PeopleListPage.tsx
View File

@@ -18,6 +18,7 @@ import type { PeopleListPageQuery as PeopleListPageQueryType } from "./__generat
import type { PeopleListPageDeletePeopleMutation } from "./__generated__/PeopleListPageDeletePeopleMutation.graphql"; import type { PeopleListPageDeletePeopleMutation } from "./__generated__/PeopleListPageDeletePeopleMutation.graphql";
import { PeopleListPagePaginationQuery } from "./__generated__/PeopleListPagePaginationQuery.graphql"; import { PeopleListPagePaginationQuery } from "./__generated__/PeopleListPagePaginationQuery.graphql";
import { PeopleListPage_peoples$key } from "./__generated__/PeopleListPage_peoples.graphql"; import { PeopleListPage_peoples$key } from "./__generated__/PeopleListPage_peoples.graphql";
import { PageHeader } from "./PageHeader";
const ITEMS_PER_PAGE = 25; const ITEMS_PER_PAGE = 25;
@@ -168,124 +169,127 @@ function PeopleListContent({
const pageInfo = peoplesConnection.peoples.pageInfo; const pageInfo = peoplesConnection.peoples.pageInfo;
return ( return (
<div className="space-y-6"> <>
<div> <Helmet>
<h2 className="text-2xl font-semibold mb-1">Employees</h2> <title>People - Probo</title>
<p className="text-muted-foreground"> </Helmet>
Keep track of your company{"'"}s workforce and their progress towards <div className="container space-y-6">
completing tasks assigned to them. <PageHeader
</p> className="mb-17"
</div> title="Employees"
description="Keep track of your company's workforce and their progress
towards completing tasks assigned to them."
actions={
<Button
asChild
variant="outline"
style={{ borderRadius: "0.5rem" }}
className="gap-2"
>
<Link to={`/organizations/${organizationId}/people/create`}>
<UserPlus className="h-4 w-4" />
Add a person
</Link>
</Button>
}
/>
<div className="flex items-center justify-between"> <div className="space-y-2">
<Button {peoples.map((person) => (
asChild <Link
variant="outline" key={person?.id}
style={{ borderRadius: "0.5rem" }} to={`/organizations/${organizationId}/people/${person?.id}`}
className="gap-2" className="block"
> >
<Link to={`/organizations/${organizationId}/people/create`}> <div className="flex items-center justify-between p-4 rounded-xl border bg-card hover:bg-accent/5 transition-colors">
<UserPlus className="h-4 w-4" /> <div className="flex items-center gap-3">
Add a people <Avatar className="h-8 w-8">
</Link> <AvatarFallback>{person?.fullName?.[0]}</AvatarFallback>
</Button> </Avatar>
</div> <div className="flex items-center gap-2">
<p className="font-medium">{person?.fullName}</p>
<div className="space-y-2"> {person?.primaryEmailAddress && (
{peoples.map((person) => ( <>
<Link <span className="text-muted-foreground">•</span>
key={person?.id} <p className="text-sm text-muted-foreground">
to={`/organizations/${organizationId}/people/${person?.id}`} {person.primaryEmailAddress}
className="block" </p>
> </>
<div className="flex items-center justify-between p-4 rounded-xl border bg-card hover:bg-accent/5 transition-colors"> )}
<div className="flex items-center gap-3"> </div>
<Avatar className="h-8 w-8"> </div>
<AvatarFallback>{person?.fullName?.[0]}</AvatarFallback>
</Avatar>
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<p className="font-medium">{person?.fullName}</p> <Badge
{person?.primaryEmailAddress && ( variant="secondary"
<> className="bg-lime-9 text-white rounded-full px-3 py-0.5 text-xs font-medium"
<span className="text-muted-foreground">•</span> >
<p className="text-sm text-muted-foreground"> {person?.kind === "EMPLOYEE"
{person.primaryEmailAddress} ? "Employee"
</p> : person?.kind === "CONTRACTOR"
</> ? "Contractor"
)} : "Vendor"}
</Badge>
<Button
variant="ghost"
size="icon"
className="h-8 w-8 text-muted-foreground hover:bg-transparent hover:[&>svg]:text-destructive"
onClick={(e) => {
e.preventDefault();
if (
window.confirm(
"Are you sure you want to delete this person?"
)
) {
deletePeople({
variables: {
connections: [peoplesConnection.peoples.__id],
input: {
peopleId: person.id,
},
},
});
}
}}
>
<Trash2 className="h-4 w-4 transition-colors" />
</Button>
<ChevronRight className="h-4 w-4 text-muted-foreground" />
</div> </div>
</div> </div>
<div className="flex items-center gap-2"> </Link>
<Badge ))}
variant="secondary" </div>
className="bg-lime-9 text-white rounded-full px-3 py-0.5 text-xs font-medium"
>
{person?.kind === "EMPLOYEE"
? "Employee"
: person?.kind === "CONTRACTOR"
? "Contractor"
: "Vendor"}
</Badge>
<Button
variant="ghost"
size="icon"
className="h-8 w-8 text-muted-foreground hover:bg-transparent hover:[&>svg]:text-destructive"
onClick={(e) => {
e.preventDefault();
if (
window.confirm(
"Are you sure you want to delete this person?"
)
) {
deletePeople({
variables: {
connections: [peoplesConnection.peoples.__id],
input: {
peopleId: person.id,
},
},
});
}
}}
>
<Trash2 className="h-4 w-4 transition-colors" />
</Button>
<ChevronRight className="h-4 w-4 text-muted-foreground" />
</div>
</div>
</Link>
))}
</div>
<LoadAboveButton <LoadAboveButton
isLoading={isLoadingPrevious} isLoading={isLoadingPrevious}
hasMore={hasPrevious} hasMore={hasPrevious}
onLoadMore={() => { onLoadMore={() => {
startTransition(() => { startTransition(() => {
setSearchParams((prev) => { setSearchParams((prev) => {
prev.set("before", pageInfo?.startCursor || ""); prev.set("before", pageInfo?.startCursor || "");
prev.delete("after"); prev.delete("after");
return prev; return prev;
});
loadPrevious(ITEMS_PER_PAGE);
}); });
loadPrevious(ITEMS_PER_PAGE); }}
}); />
}} <LoadBelowButton
/> isLoading={isLoadingNext}
<LoadBelowButton hasMore={hasNext}
isLoading={isLoadingNext} onLoadMore={() => {
hasMore={hasNext} startTransition(() => {
onLoadMore={() => { setSearchParams((prev) => {
startTransition(() => { prev.set("after", pageInfo?.endCursor || "");
setSearchParams((prev) => { prev.delete("before");
prev.set("after", pageInfo?.endCursor || ""); return prev;
prev.delete("before"); });
return prev; loadNext(ITEMS_PER_PAGE);
}); });
loadNext(ITEMS_PER_PAGE); }}
}); />
}} </div>
/> </>
</div>
); );
} }

30
apps/console/src/pages/PolicyListPage.tsx
View File

@@ -34,6 +34,7 @@ import {
import { Badge } from "@/components/ui/badge"; import { Badge } from "@/components/ui/badge";
import { format } from "date-fns"; import { format } from "date-fns";
import type { PolicyListPageQuery as PolicyListPageQueryType } from "./__generated__/PolicyListPageQuery.graphql"; import type { PolicyListPageQuery as PolicyListPageQueryType } from "./__generated__/PolicyListPageQuery.graphql";
import { PageHeader } from "./PageHeader";
const PolicyListPageQuery = graphql` const PolicyListPageQuery = graphql`
query PolicyListPageQuery($organizationId: ID!) { query PolicyListPageQuery($organizationId: ID!) {
@@ -223,21 +224,20 @@ function PolicyListPageContent({
<Helmet> <Helmet>
<title>Policies - Probo</title> <title>Policies - Probo</title>
</Helmet> </Helmet>
<div className="container mx-auto py-6"> <div className="container space-y-6">
<div className="flex justify-between items-center mb-6"> <PageHeader
<div> className="mb-17"
<h1 className="text-2xl font-bold">Policies</h1> title="Policies"
<p className="text-muted-foreground"> description="Manage your organization's policies"
Manage your organization{"'"}s policies actions={
</p> <Button asChild>
</div> <Link to={`/organizations/${organizationId}/policies/create`}>
<Button asChild> <Plus className="mr-2 h-4 w-4" />
<Link to={`/organizations/${organizationId}/policies/create`}> Create Policy
<Plus className="mr-2 h-4 w-4" /> </Link>
Create Policy </Button>
</Link> }
</Button> />
</div>
{/* Search and filter controls */} {/* Search and filter controls */}
<div className="flex flex-col md:flex-row gap-4 mb-6"> <div className="flex flex-col md:flex-row gap-4 mb-6">

14
apps/console/src/pages/SettingsPage.tsx
View File

@@ -39,6 +39,7 @@ import type { SettingsPageQuery as SettingsPageQueryType } from "./__generated__
import type { SettingsPageUpdateOrganizationMutation as SettingsPageUpdateOrganizationMutationType } from "./__generated__/SettingsPageUpdateOrganizationMutation.graphql"; import type { SettingsPageUpdateOrganizationMutation as SettingsPageUpdateOrganizationMutationType } from "./__generated__/SettingsPageUpdateOrganizationMutation.graphql";
import type { SettingsPageInviteUserMutation as SettingsPageInviteUserMutationType } from "./__generated__/SettingsPageInviteUserMutation.graphql"; import type { SettingsPageInviteUserMutation as SettingsPageInviteUserMutationType } from "./__generated__/SettingsPageInviteUserMutation.graphql";
import type { SettingsPageRemoveUserMutation as SettingsPageRemoveUserMutationType } from "./__generated__/SettingsPageRemoveUserMutation.graphql"; import type { SettingsPageRemoveUserMutation as SettingsPageRemoveUserMutationType } from "./__generated__/SettingsPageRemoveUserMutation.graphql";
import { PageHeader } from "./PageHeader";
const settingsPageQuery = graphql` const settingsPageQuery = graphql`
query SettingsPageQuery($organizationID: ID!) { query SettingsPageQuery($organizationID: ID!) {
@@ -290,13 +291,12 @@ function SettingsPageContent({
return ( return (
<> <>
<div className="container mx-auto p-6 space-y-6"> <div className="container space-y-6">
<div> <PageHeader
<h1 className="text-4xl font-medium tracking-tight">Settings</h1> className="mb-17"
<p className="text-lg text-muted-foreground"> title="Settings"
Manage your details and personal preferences here. description="Manage your details and personal preferences here"
</p> />
</div>
<Card> <Card>
<CardHeader> <CardHeader>

326
apps/console/src/pages/VendorListPage.tsx
View File

@@ -22,6 +22,7 @@ import { VendorListPageDeleteVendorMutation } from "./__generated__/VendorListPa
import { VendorListPagePaginationQuery } from "./__generated__/VendorListPagePaginationQuery.graphql"; import { VendorListPagePaginationQuery } from "./__generated__/VendorListPagePaginationQuery.graphql";
import { VendorListPage_vendors$key } from "./__generated__/VendorListPage_vendors.graphql"; import { VendorListPage_vendors$key } from "./__generated__/VendorListPage_vendors.graphql";
import { useToast } from "@/hooks/use-toast"; import { useToast } from "@/hooks/use-toast";
import { PageHeader } from "./PageHeader";
const ITEMS_PER_PAGE = 25; const ITEMS_PER_PAGE = 25;
@@ -234,183 +235,190 @@ function VendorListContent({
}); });
return ( return (
<div className="space-y-6"> <>
<div> <Helmet>
<h2 className="text-2xl font-semibold mb-1">Vendors</h2> <title>Vendors - Probo</title>
<p className="text-muted-foreground"> </Helmet>
Vendors are third-party services that your company uses. Add them to <div className="space-y-6">
keep track of their risk and compliance status. <PageHeader
</p> className="mb-17"
</div> title="Vendors"
description="Vendors are third-party services that your company uses. Add them to
keep track of their risk and compliance status."
/>
<div className="rounded-xl border bg-card p-4"> <div className="rounded-xl border bg-card p-4">
<div className="flex items-center gap-2 mb-4"> <div className="flex items-center gap-2 mb-4">
<Store className="h-5 w-5" /> <Store className="h-5 w-5" />
<h3 className="font-medium">Add a vendor</h3> <h3 className="font-medium">Add a vendor</h3>
</div> </div>
<div className="flex gap-2 relative"> <div className="flex gap-2 relative">
<Input <Input
type="text" type="text"
placeholder="Type vendor's name" placeholder="Type vendor's name"
value={searchTerm} value={searchTerm}
style={{ borderRadius: "0.3rem" }}
onChange={(e) => {
const value = e.target.value;
setSearchTerm(value);
if (value.trim() === "") {
setFilteredVendors([]);
} else {
const results = fuse.search(value).map((result) => result.item);
setFilteredVendors(results);
}
}}
/>
{searchTerm.trim() !== "" && filteredVendors.length > 0 && (
<div
style={{ borderRadius: "0.3rem" }} style={{ borderRadius: "0.3rem" }}
className="absolute top-full left-0 mt-1 w-[calc(100%-100px)] max-h-48 overflow-y-auto border bg-popover shadow-md z-10" onChange={(e) => {
> const value = e.target.value;
{filteredVendors.map((vendor: VendorItem) => ( setSearchTerm(value);
<button if (value.trim() === "") {
key={vendor.id} setFilteredVendors([]);
className="w-full px-3 py-2 text-left hover:bg-accent" } else {
onClick={() => { const results = fuse
createVendor({ .search(value)
variables: { .map((result) => result.item);
connections: [vendorsConnection.vendors.__id], setFilteredVendors(results);
input: { }
organizationId: data.organization.id, }}
name: vendor.name, />
description: "",
serviceStartAt: new Date().toISOString(),
serviceCriticality: "LOW",
riskTier: "GENERAL",
},
},
onCompleted() {
setSearchTerm("");
setFilteredVendors([]);
toast({
title: "Vendor added",
description: "The vendor has been added successfully",
});
},
});
}}
>
{vendor.name}
</button>
))}
</div>
)}
</div>
</div>
<div className="space-y-2"> {searchTerm.trim() !== "" && filteredVendors.length > 0 && (
{vendors.map((vendor) => ( <div
<Link style={{ borderRadius: "0.3rem" }}
key={vendor?.id} className="absolute top-full left-0 mt-1 w-[calc(100%-100px)] max-h-48 overflow-y-auto border bg-popover shadow-md z-10"
to={`/organizations/${organizationId}/vendors/${vendor?.id}`} >
className="block" {filteredVendors.map((vendor: VendorItem) => (
> <button
<div className="flex items-center justify-between p-4 rounded-xl border bg-card hover:bg-accent/5 transition-colors"> key={vendor.id}
<div className="flex items-center gap-3"> className="w-full px-3 py-2 text-left hover:bg-accent"
<Avatar className="h-8 w-8"> onClick={() => {
<AvatarFallback>{vendor?.name?.[0]}</AvatarFallback> createVendor({
</Avatar>
<div className="flex items-center gap-2">
<p className="font-medium">{vendor?.name}</p>
{vendor?.description && (
<>
<span className="text-muted-foreground">•</span>
<p className="text-sm text-muted-foreground">
{vendor.description}
</p>
</>
)}
</div>
</div>
<div className="flex items-center gap-2">
<Badge
variant="secondary"
className={
vendor.riskTier === "CRITICAL"
? "bg-red-100 text-red-900 rounded-full px-3 py-0.5 text-xs font-medium"
: vendor?.riskTier === "SIGNIFICANT"
? "bg-yellow-100 text-yellow-900 rounded-full px-3 py-0.5 text-xs font-medium"
: "bg-green-100 text-green-900 rounded-full px-3 py-0.5 text-xs font-medium"
}
>
{vendor.riskTier}
</Badge>
<Button
variant="ghost"
size="icon"
className="h-8 w-8 text-muted-foreground hover:bg-transparent hover:[&>svg]:text-destructive"
onClick={(e) => {
e.preventDefault(); // Prevent navigation
if (
window.confirm(
"Are you sure you want to delete this vendor?"
)
) {
deleteVendor({
variables: { variables: {
connections: [vendorsConnection.vendors.__id], connections: [vendorsConnection.vendors.__id],
input: { input: {
vendorId: vendor.id, organizationId: data.organization.id,
name: vendor.name,
description: "",
serviceStartAt: new Date().toISOString(),
serviceCriticality: "LOW",
riskTier: "GENERAL",
}, },
}, },
onCompleted() { onCompleted() {
setSearchTerm("");
setFilteredVendors([]);
toast({ toast({
title: "Vendor deleted", title: "Vendor added",
description: description:
"The vendor has been deleted successfully", "The vendor has been added successfully",
}); });
}, },
}); });
} }}
}} >
> {vendor.name}
<Trash2 className="h-4 w-4 transition-colors" /> </button>
</Button> ))}
<ChevronRight className="h-4 w-4 text-muted-foreground" />
</div> </div>
</div> )}
</Link> </div>
))} </div>
</div>
<LoadAboveButton <div className="space-y-2">
isLoading={isLoadingPrevious} {vendors.map((vendor) => (
hasMore={hasPrevious} <Link
onLoadMore={() => { key={vendor?.id}
startTransition(() => { to={`/organizations/${organizationId}/vendors/${vendor?.id}`}
setSearchParams((prev) => { className="block"
prev.set("before", pageInfo?.startCursor || ""); >
prev.delete("after"); <div className="flex items-center justify-between p-4 rounded-xl border bg-card hover:bg-accent/5 transition-colors">
return prev; <div className="flex items-center gap-3">
<Avatar className="h-8 w-8">
<AvatarFallback>{vendor?.name?.[0]}</AvatarFallback>
</Avatar>
<div className="flex items-center gap-2">
<p className="font-medium">{vendor?.name}</p>
{vendor?.description && (
<>
<span className="text-muted-foreground">•</span>
<p className="text-sm text-muted-foreground">
{vendor.description}
</p>
</>
)}
</div>
</div>
<div className="flex items-center gap-2">
<Badge
variant="secondary"
className={
vendor.riskTier === "CRITICAL"
? "bg-red-100 text-red-900 rounded-full px-3 py-0.5 text-xs font-medium"
: vendor?.riskTier === "SIGNIFICANT"
? "bg-yellow-100 text-yellow-900 rounded-full px-3 py-0.5 text-xs font-medium"
: "bg-green-100 text-green-900 rounded-full px-3 py-0.5 text-xs font-medium"
}
>
{vendor.riskTier}
</Badge>
<Button
variant="ghost"
size="icon"
className="h-8 w-8 text-muted-foreground hover:bg-transparent hover:[&>svg]:text-destructive"
onClick={(e) => {
e.preventDefault(); // Prevent navigation
if (
window.confirm(
"Are you sure you want to delete this vendor?"
)
) {
deleteVendor({
variables: {
connections: [vendorsConnection.vendors.__id],
input: {
vendorId: vendor.id,
},
},
onCompleted() {
toast({
title: "Vendor deleted",
description:
"The vendor has been deleted successfully",
});
},
});
}
}}
>
<Trash2 className="h-4 w-4 transition-colors" />
</Button>
<ChevronRight className="h-4 w-4 text-muted-foreground" />
</div>
</div>
</Link>
))}
</div>
<LoadAboveButton
isLoading={isLoadingPrevious}
hasMore={hasPrevious}
onLoadMore={() => {
startTransition(() => {
setSearchParams((prev) => {
prev.set("before", pageInfo?.startCursor || "");
prev.delete("after");
return prev;
});
loadPrevious(ITEMS_PER_PAGE);
}); });
loadPrevious(ITEMS_PER_PAGE); }}
}); />
}} <LoadBelowButton
/> isLoading={isLoadingNext}
<LoadBelowButton hasMore={hasNext}
isLoading={isLoadingNext} onLoadMore={() => {
hasMore={hasNext} startTransition(() => {
onLoadMore={() => { setSearchParams((prev) => {
startTransition(() => { prev.set("after", pageInfo?.endCursor || "");
setSearchParams((prev) => { prev.delete("before");
prev.set("after", pageInfo?.endCursor || ""); return prev;
prev.delete("before"); });
return prev; loadNext(ITEMS_PER_PAGE);
}); });
loadNext(ITEMS_PER_PAGE); }}
}); />
}} </div>
/> </>
</div>
); );
} }