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>
<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

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

@@ -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,15 +187,13 @@ 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">
<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}
@@ -236,7 +235,8 @@ function FrameworkListPageContent({
</Link>
</Button>
</div>
</div>
}
/>
<div className="space-y-6">
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-2">
{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 { 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
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>
);
}

28
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 { PeopleListPagePaginationQuery } from "./__generated__/PeopleListPagePaginationQuery.graphql";
import { PeopleListPage_peoples$key } from "./__generated__/PeopleListPage_peoples.graphql";
import { PageHeader } from "./PageHeader";
const ITEMS_PER_PAGE = 25;
@@ -168,16 +169,17 @@ 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>
<div className="flex items-center justify-between">
<>
<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"
@@ -186,10 +188,11 @@ function PeopleListContent({
>
<Link to={`/organizations/${organizationId}/people/create`}>
<UserPlus className="h-4 w-4" />
Add a people
Add a person
</Link>
</Button>
</div>
}
/>
<div className="space-y-2">
{peoples.map((person) => (
@@ -286,6 +289,7 @@ function PeopleListContent({
}}
/>
</div>
</>
);
}

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

@@ -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>
<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>
</div>
}
/>
{/* Search and filter controls */}
<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 { 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>

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

@@ -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,14 +235,17 @@ function VendorListContent({
});
return (
<>
<Helmet>
<title>Vendors - Probo</title>
</Helmet>
<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>
<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">
@@ -260,7 +264,9 @@ function VendorListContent({
if (value.trim() === "") {
setFilteredVendors([]);
} else {
const results = fuse.search(value).map((result) => result.item);
const results = fuse
.search(value)
.map((result) => result.item);
setFilteredVendors(results);
}
}}
@@ -293,7 +299,8 @@ function VendorListContent({
setFilteredVendors([]);
toast({
title: "Vendor added",
description: "The vendor has been added successfully",
description:
"The vendor has been added successfully",
});
},
});
@@ -411,6 +418,7 @@ function VendorListContent({
}}
/>
</div>
</>
);
}