Unify page headers on most pages
Signed-off-by: Émile Ré <nemile.re@gmail.com>
This commit is contained in:
Émile Ré
@@ -381,8 +381,8 @@ export default function ConsoleLayout() {
|
||||
<Suspense>
|
||||
<AppSidebar className="p-4" />
|
||||
</Suspense>
|
||||
<SidebarInset className="flex items-center">
|
||||
<div className="w-lg md:w-xl lg:w-3xl xl:w-4xl 2xl:w-5xl p-8">
|
||||
<SidebarInset>
|
||||
<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">
|
||||
<Routes>
|
||||
<Route
|
||||
|
||||
@@ -23,6 +23,7 @@ import {
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { FrameworkListPageImportFrameworkMutation as FrameworkListPageImportFrameworkMutationType } from "./__generated__/FrameworkListPageImportFrameworkMutation.graphql";
|
||||
import { PageHeader } from "./PageHeader";
|
||||
|
||||
const FrameworkListPageQuery = graphql`
|
||||
query FrameworkListPageQuery($organizationId: ID!) {
|
||||
@@ -186,57 +187,56 @@ function FrameworkListPageContent({
|
||||
<Helmet>
|
||||
<title>Frameworks - Probo</title>
|
||||
</Helmet>
|
||||
<div className="container mx-auto py-6">
|
||||
<div className="flex justify-between items-center mb-6">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold">Frameworks</h1>
|
||||
<p className="text-muted-foreground">
|
||||
Manage your compliance frameworks
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<Dialog
|
||||
open={isImportDialogOpen}
|
||||
onOpenChange={setIsImportDialogOpen}
|
||||
>
|
||||
<DialogTrigger asChild>
|
||||
<Button variant="outline">
|
||||
<Upload className="mr-2 h-4 w-4" />
|
||||
Import Framework
|
||||
</Button>
|
||||
</DialogTrigger>
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>Import Framework</DialogTitle>
|
||||
</DialogHeader>
|
||||
<div className="space-y-4 py-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="framework-file">
|
||||
Upload Framework File
|
||||
</Label>
|
||||
<Input
|
||||
id="framework-file"
|
||||
type="file"
|
||||
ref={fileInputRef}
|
||||
onChange={handleFileChange}
|
||||
disabled={isUploading}
|
||||
accept=".json"
|
||||
/>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Upload a JSON file containing your framework definition.
|
||||
</p>
|
||||
<div className="container">
|
||||
<PageHeader
|
||||
className="mb-17"
|
||||
title="Frameworks"
|
||||
description="Manage your compliance frameworks"
|
||||
actions={
|
||||
<div className="flex gap-4">
|
||||
<Dialog
|
||||
open={isImportDialogOpen}
|
||||
onOpenChange={setIsImportDialogOpen}
|
||||
>
|
||||
<DialogTrigger asChild>
|
||||
<Button variant="outline">
|
||||
<Upload className="mr-2 h-4 w-4" />
|
||||
Import Framework
|
||||
</Button>
|
||||
</DialogTrigger>
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>Import Framework</DialogTitle>
|
||||
</DialogHeader>
|
||||
<div className="space-y-4 py-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="framework-file">
|
||||
Upload Framework File
|
||||
</Label>
|
||||
<Input
|
||||
id="framework-file"
|
||||
type="file"
|
||||
ref={fileInputRef}
|
||||
onChange={handleFileChange}
|
||||
disabled={isUploading}
|
||||
accept=".json"
|
||||
/>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Upload a JSON file containing your framework definition.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
<Button asChild>
|
||||
<Link to={`/organizations/${organizationId}/frameworks/create`}>
|
||||
<Plus className="mr-2 h-4 w-4" />
|
||||
Create Framework
|
||||
</Link>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
<Button asChild>
|
||||
<Link to={`/organizations/${organizationId}/frameworks/create`}>
|
||||
<Plus className="mr-2 h-4 w-4" />
|
||||
Create Framework
|
||||
</Link>
|
||||
</Button>
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
<div className="space-y-6">
|
||||
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-2">
|
||||
{frameworks.map((framework) => {
|
||||
|
||||
@@ -12,6 +12,7 @@ import { Button } from "@/components/ui/button";
|
||||
import type { FrameworkOverviewPageQuery as FrameworkOverviewPageQueryType } from "./__generated__/FrameworkOverviewPageQuery.graphql";
|
||||
import { Helmet } from "react-helmet-async";
|
||||
import { createPortal } from "react-dom";
|
||||
import { PageHeader } from "./PageHeader";
|
||||
|
||||
const FrameworkOverviewPageQuery = graphql`
|
||||
query FrameworkOverviewPageQuery($frameworkId: ID!) {
|
||||
@@ -81,14 +82,13 @@ function FrameworkOverviewPageContent({
|
||||
).length;
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-background p-6 space-y-6">
|
||||
<div className="space-y-4 mb-8">
|
||||
<div className="flex justify-between items-center">
|
||||
<div>
|
||||
<h2 className="text-2xl font-semibold mb-1">{framework.name}</h2>
|
||||
<p className="text-muted-foreground">{framework.description}</p>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<div className="container space-y-6">
|
||||
<PageHeader
|
||||
className="mb-17"
|
||||
title={framework.name ?? ""}
|
||||
description={framework.description ?? ""}
|
||||
actions={
|
||||
<div className="flex gap-4">
|
||||
<Button variant="outline" asChild>
|
||||
<Link
|
||||
to={`/organizations/${organizationId}/frameworks/${framework.id}/update`}
|
||||
@@ -105,8 +105,8 @@ function FrameworkOverviewPageContent({
|
||||
</Link>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
|
||||
<div className="mb-6 flex justify-between items-center">
|
||||
<h2 className="text-xl font-semibold">Controls</h2>
|
||||
|
||||
50
apps/console/src/pages/PageHeader.tsx
Normal file
50
apps/console/src/pages/PageHeader.tsx
Normal 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>
|
||||
);
|
||||
}
|
||||
@@ -18,6 +18,7 @@ import type { PeopleListPageQuery as PeopleListPageQueryType } from "./__generat
|
||||
import type { PeopleListPageDeletePeopleMutation } from "./__generated__/PeopleListPageDeletePeopleMutation.graphql";
|
||||
import { PeopleListPagePaginationQuery } from "./__generated__/PeopleListPagePaginationQuery.graphql";
|
||||
import { PeopleListPage_peoples$key } from "./__generated__/PeopleListPage_peoples.graphql";
|
||||
import { PageHeader } from "./PageHeader";
|
||||
|
||||
const ITEMS_PER_PAGE = 25;
|
||||
|
||||
@@ -168,124 +169,127 @@ function PeopleListContent({
|
||||
const pageInfo = peoplesConnection.peoples.pageInfo;
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div>
|
||||
<h2 className="text-2xl font-semibold mb-1">Employees</h2>
|
||||
<p className="text-muted-foreground">
|
||||
Keep track of your company{"'"}s workforce and their progress towards
|
||||
completing tasks assigned to them.
|
||||
</p>
|
||||
</div>
|
||||
<>
|
||||
<Helmet>
|
||||
<title>People - Probo</title>
|
||||
</Helmet>
|
||||
<div className="container space-y-6">
|
||||
<PageHeader
|
||||
className="mb-17"
|
||||
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">
|
||||
<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 people
|
||||
</Link>
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
{peoples.map((person) => (
|
||||
<Link
|
||||
key={person?.id}
|
||||
to={`/organizations/${organizationId}/people/${person?.id}`}
|
||||
className="block"
|
||||
>
|
||||
<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">
|
||||
<Avatar className="h-8 w-8">
|
||||
<AvatarFallback>{person?.fullName?.[0]}</AvatarFallback>
|
||||
</Avatar>
|
||||
<div className="space-y-2">
|
||||
{peoples.map((person) => (
|
||||
<Link
|
||||
key={person?.id}
|
||||
to={`/organizations/${organizationId}/people/${person?.id}`}
|
||||
className="block"
|
||||
>
|
||||
<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">
|
||||
<Avatar className="h-8 w-8">
|
||||
<AvatarFallback>{person?.fullName?.[0]}</AvatarFallback>
|
||||
</Avatar>
|
||||
<div className="flex items-center gap-2">
|
||||
<p className="font-medium">{person?.fullName}</p>
|
||||
{person?.primaryEmailAddress && (
|
||||
<>
|
||||
<span className="text-muted-foreground">•</span>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{person.primaryEmailAddress}
|
||||
</p>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<p className="font-medium">{person?.fullName}</p>
|
||||
{person?.primaryEmailAddress && (
|
||||
<>
|
||||
<span className="text-muted-foreground">•</span>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{person.primaryEmailAddress}
|
||||
</p>
|
||||
</>
|
||||
)}
|
||||
<Badge
|
||||
variant="secondary"
|
||||
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>
|
||||
<div className="flex items-center gap-2">
|
||||
<Badge
|
||||
variant="secondary"
|
||||
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>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<LoadAboveButton
|
||||
isLoading={isLoadingPrevious}
|
||||
hasMore={hasPrevious}
|
||||
onLoadMore={() => {
|
||||
startTransition(() => {
|
||||
setSearchParams((prev) => {
|
||||
prev.set("before", pageInfo?.startCursor || "");
|
||||
prev.delete("after");
|
||||
return prev;
|
||||
<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}
|
||||
hasMore={hasNext}
|
||||
onLoadMore={() => {
|
||||
startTransition(() => {
|
||||
setSearchParams((prev) => {
|
||||
prev.set("after", pageInfo?.endCursor || "");
|
||||
prev.delete("before");
|
||||
return prev;
|
||||
}}
|
||||
/>
|
||||
<LoadBelowButton
|
||||
isLoading={isLoadingNext}
|
||||
hasMore={hasNext}
|
||||
onLoadMore={() => {
|
||||
startTransition(() => {
|
||||
setSearchParams((prev) => {
|
||||
prev.set("after", pageInfo?.endCursor || "");
|
||||
prev.delete("before");
|
||||
return prev;
|
||||
});
|
||||
loadNext(ITEMS_PER_PAGE);
|
||||
});
|
||||
loadNext(ITEMS_PER_PAGE);
|
||||
});
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@@ -34,6 +34,7 @@ import {
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { format } from "date-fns";
|
||||
import type { PolicyListPageQuery as PolicyListPageQueryType } from "./__generated__/PolicyListPageQuery.graphql";
|
||||
import { PageHeader } from "./PageHeader";
|
||||
|
||||
const PolicyListPageQuery = graphql`
|
||||
query PolicyListPageQuery($organizationId: ID!) {
|
||||
@@ -223,21 +224,20 @@ function PolicyListPageContent({
|
||||
<Helmet>
|
||||
<title>Policies - Probo</title>
|
||||
</Helmet>
|
||||
<div className="container mx-auto py-6">
|
||||
<div className="flex justify-between items-center mb-6">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold">Policies</h1>
|
||||
<p className="text-muted-foreground">
|
||||
Manage your organization{"'"}s policies
|
||||
</p>
|
||||
</div>
|
||||
<Button asChild>
|
||||
<Link to={`/organizations/${organizationId}/policies/create`}>
|
||||
<Plus className="mr-2 h-4 w-4" />
|
||||
Create Policy
|
||||
</Link>
|
||||
</Button>
|
||||
</div>
|
||||
<div className="container space-y-6">
|
||||
<PageHeader
|
||||
className="mb-17"
|
||||
title="Policies"
|
||||
description="Manage your organization's policies"
|
||||
actions={
|
||||
<Button asChild>
|
||||
<Link to={`/organizations/${organizationId}/policies/create`}>
|
||||
<Plus className="mr-2 h-4 w-4" />
|
||||
Create Policy
|
||||
</Link>
|
||||
</Button>
|
||||
}
|
||||
/>
|
||||
|
||||
{/* Search and filter controls */}
|
||||
<div className="flex flex-col md:flex-row gap-4 mb-6">
|
||||
|
||||
@@ -39,6 +39,7 @@ import type { SettingsPageQuery as SettingsPageQueryType } from "./__generated__
|
||||
import type { SettingsPageUpdateOrganizationMutation as SettingsPageUpdateOrganizationMutationType } from "./__generated__/SettingsPageUpdateOrganizationMutation.graphql";
|
||||
import type { SettingsPageInviteUserMutation as SettingsPageInviteUserMutationType } from "./__generated__/SettingsPageInviteUserMutation.graphql";
|
||||
import type { SettingsPageRemoveUserMutation as SettingsPageRemoveUserMutationType } from "./__generated__/SettingsPageRemoveUserMutation.graphql";
|
||||
import { PageHeader } from "./PageHeader";
|
||||
|
||||
const settingsPageQuery = graphql`
|
||||
query SettingsPageQuery($organizationID: ID!) {
|
||||
@@ -290,13 +291,12 @@ function SettingsPageContent({
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="container mx-auto p-6 space-y-6">
|
||||
<div>
|
||||
<h1 className="text-4xl font-medium tracking-tight">Settings</h1>
|
||||
<p className="text-lg text-muted-foreground">
|
||||
Manage your details and personal preferences here.
|
||||
</p>
|
||||
</div>
|
||||
<div className="container space-y-6">
|
||||
<PageHeader
|
||||
className="mb-17"
|
||||
title="Settings"
|
||||
description="Manage your details and personal preferences here"
|
||||
/>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
|
||||
@@ -22,6 +22,7 @@ import { VendorListPageDeleteVendorMutation } from "./__generated__/VendorListPa
|
||||
import { VendorListPagePaginationQuery } from "./__generated__/VendorListPagePaginationQuery.graphql";
|
||||
import { VendorListPage_vendors$key } from "./__generated__/VendorListPage_vendors.graphql";
|
||||
import { useToast } from "@/hooks/use-toast";
|
||||
import { PageHeader } from "./PageHeader";
|
||||
|
||||
const ITEMS_PER_PAGE = 25;
|
||||
|
||||
@@ -234,183 +235,190 @@ function VendorListContent({
|
||||
});
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div>
|
||||
<h2 className="text-2xl font-semibold mb-1">Vendors</h2>
|
||||
<p className="text-muted-foreground">
|
||||
Vendors are third-party services that your company uses. Add them to
|
||||
keep track of their risk and compliance status.
|
||||
</p>
|
||||
</div>
|
||||
<>
|
||||
<Helmet>
|
||||
<title>Vendors - Probo</title>
|
||||
</Helmet>
|
||||
<div className="space-y-6">
|
||||
<PageHeader
|
||||
className="mb-17"
|
||||
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="flex items-center gap-2 mb-4">
|
||||
<Store className="h-5 w-5" />
|
||||
<h3 className="font-medium">Add a vendor</h3>
|
||||
</div>
|
||||
<div className="flex gap-2 relative">
|
||||
<Input
|
||||
type="text"
|
||||
placeholder="Type vendor's name"
|
||||
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
|
||||
<div className="rounded-xl border bg-card p-4">
|
||||
<div className="flex items-center gap-2 mb-4">
|
||||
<Store className="h-5 w-5" />
|
||||
<h3 className="font-medium">Add a vendor</h3>
|
||||
</div>
|
||||
<div className="flex gap-2 relative">
|
||||
<Input
|
||||
type="text"
|
||||
placeholder="Type vendor's name"
|
||||
value={searchTerm}
|
||||
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"
|
||||
>
|
||||
{filteredVendors.map((vendor: VendorItem) => (
|
||||
<button
|
||||
key={vendor.id}
|
||||
className="w-full px-3 py-2 text-left hover:bg-accent"
|
||||
onClick={() => {
|
||||
createVendor({
|
||||
variables: {
|
||||
connections: [vendorsConnection.vendors.__id],
|
||||
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>
|
||||
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);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
|
||||
<div className="space-y-2">
|
||||
{vendors.map((vendor) => (
|
||||
<Link
|
||||
key={vendor?.id}
|
||||
to={`/organizations/${organizationId}/vendors/${vendor?.id}`}
|
||||
className="block"
|
||||
>
|
||||
<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">
|
||||
<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({
|
||||
{searchTerm.trim() !== "" && filteredVendors.length > 0 && (
|
||||
<div
|
||||
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"
|
||||
>
|
||||
{filteredVendors.map((vendor: VendorItem) => (
|
||||
<button
|
||||
key={vendor.id}
|
||||
className="w-full px-3 py-2 text-left hover:bg-accent"
|
||||
onClick={() => {
|
||||
createVendor({
|
||||
variables: {
|
||||
connections: [vendorsConnection.vendors.__id],
|
||||
input: {
|
||||
vendorId: vendor.id,
|
||||
organizationId: data.organization.id,
|
||||
name: vendor.name,
|
||||
description: "",
|
||||
serviceStartAt: new Date().toISOString(),
|
||||
serviceCriticality: "LOW",
|
||||
riskTier: "GENERAL",
|
||||
},
|
||||
},
|
||||
onCompleted() {
|
||||
setSearchTerm("");
|
||||
setFilteredVendors([]);
|
||||
toast({
|
||||
title: "Vendor deleted",
|
||||
title: "Vendor added",
|
||||
description:
|
||||
"The vendor has been deleted successfully",
|
||||
"The vendor has been added successfully",
|
||||
});
|
||||
},
|
||||
});
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Trash2 className="h-4 w-4 transition-colors" />
|
||||
</Button>
|
||||
<ChevronRight className="h-4 w-4 text-muted-foreground" />
|
||||
}}
|
||||
>
|
||||
{vendor.name}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<LoadAboveButton
|
||||
isLoading={isLoadingPrevious}
|
||||
hasMore={hasPrevious}
|
||||
onLoadMore={() => {
|
||||
startTransition(() => {
|
||||
setSearchParams((prev) => {
|
||||
prev.set("before", pageInfo?.startCursor || "");
|
||||
prev.delete("after");
|
||||
return prev;
|
||||
<div className="space-y-2">
|
||||
{vendors.map((vendor) => (
|
||||
<Link
|
||||
key={vendor?.id}
|
||||
to={`/organizations/${organizationId}/vendors/${vendor?.id}`}
|
||||
className="block"
|
||||
>
|
||||
<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">
|
||||
<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}
|
||||
hasMore={hasNext}
|
||||
onLoadMore={() => {
|
||||
startTransition(() => {
|
||||
setSearchParams((prev) => {
|
||||
prev.set("after", pageInfo?.endCursor || "");
|
||||
prev.delete("before");
|
||||
return prev;
|
||||
}}
|
||||
/>
|
||||
<LoadBelowButton
|
||||
isLoading={isLoadingNext}
|
||||
hasMore={hasNext}
|
||||
onLoadMore={() => {
|
||||
startTransition(() => {
|
||||
setSearchParams((prev) => {
|
||||
prev.set("after", pageInfo?.endCursor || "");
|
||||
prev.delete("before");
|
||||
return prev;
|
||||
});
|
||||
loadNext(ITEMS_PER_PAGE);
|
||||
});
|
||||
loadNext(ITEMS_PER_PAGE);
|
||||
});
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user