add product banner to approvals page

messages/en-US.json

@@ -56,6 +56,9 @@
     "sitesBannerTitle": "Connect Any Network",
     "sitesBannerDescription": "A site is a connection to a remote network that allows Pangolin to provide access to resources, whether public or private, to users anywhere. Install the site network connector (Newt) anywhere you can run a binary or container to establish the connection.",
     "sitesBannerButtonText": "Install Site",
+    "approvalsBannerTitle": "Approve or Deny Device Access",
+    "approvalsBannerDescription": "Review and approve or deny device access requests from users. When device approvals are required, users must get admin approval before their devices can connect to your organization's resources.",
+    "approvalsBannerButtonText": "Learn More",
     "siteCreate": "Create Site",
     "siteCreateDescription2": "Follow the steps below to create and connect a new site",
     "siteCreateDescription": "Create a new site to start connecting resources",
@@ -258,7 +261,7 @@
     "accessRolesAdd": "Add Role",
     "accessRoleDelete": "Delete Role",
     "accessApprovalsManage": "Manage Approvals",
-    "accessApprovalsDescription": "Manage approval requests in the organization",
+    "accessApprovalsDescription": "View and manage pending approvals for access to this organization",
     "description": "Description",
     "inviteTitle": "Open Invitations",
     "inviteDescription": "Manage invitations for other users to join the organization",

src/app/[orgId]/settings/(private)/access/approvals/page.tsx

@@ -1,6 +1,7 @@
 import { ApprovalFeed } from "@app/components/ApprovalFeed";
 import { PaidFeaturesAlert } from "@app/components/PaidFeaturesAlert";
 import SettingsSectionTitle from "@app/components/SettingsSectionTitle";
+import ApprovalsBanner from "@app/components/ApprovalsBanner";
 import { internal } from "@app/lib/api";
 import { authCookieHeader } from "@app/lib/api/cookies";
 import { getCachedOrg } from "@app/lib/api/getCachedOrg";
@@ -44,6 +45,8 @@ export default async function ApprovalFeedPage(props: ApprovalFeedPageProps) {
                 description={t("accessApprovalsDescription")}
             />
 
+            <ApprovalsBanner />
+
             <PaidFeaturesAlert />
 
             <OrgProvider org={org}>

src/components/ApprovalsBanner.tsx

@@ -0,0 +1,39 @@
+"use client";
+
+import React from "react";
+import { Button } from "@app/components/ui/button";
+import { ShieldCheck, ArrowRight } from "lucide-react";
+import { useTranslations } from "next-intl";
+import Link from "next/link";
+import DismissableBanner from "./DismissableBanner";
+
+export const ApprovalsBanner = () => {
+    const t = useTranslations();
+
+    return (
+        <DismissableBanner
+            storageKey="approvals-banner-dismissed"
+            version={1}
+            title={t("approvalsBannerTitle")}
+            titleIcon={<ShieldCheck className="w-5 h-5 text-primary" />}
+            description={t("approvalsBannerDescription")}
+        >
+            <Link
+                href="https://docs.pangolin.net/manage/access/approvals"
+                target="_blank"
+                rel="noopener noreferrer"
+            >
+                <Button
+                    variant="outline"
+                    size="sm"
+                    className="gap-2 hover:bg-primary/10 hover:border-primary/50 transition-colors"
+                >
+                    {t("approvalsBannerButtonText")}
+                    <ArrowRight className="w-4 h-4" />
+                </Button>
+            </Link>
+        </DismissableBanner>
+    );
+};
+
+export default ApprovalsBanner;