From 45417fe2c59a2ae0185686500079facad7c57d94 Mon Sep 17 00:00:00 2001
From: giancarlo <giancarlopsk@gmail.com>
Date: Mon, 8 Apr 2024 14:39:02 +0800
Subject: [PATCH] Wrap admin pages with AdminGuard component

The AdminGuard component has been added to the AccountPage, AccountsPage, and AdminPage in the web app. This server-side implementation ensures that these pages are only accessible to super-admin users. If a user is not a super-admin, the guard will trigger a redirect to a 404 page.
---
 apps/web/app/admin/accounts/[account]/page.tsx         | 6 +++++-
 apps/web/app/admin/accounts/page.tsx                   | 5 ++++-
 apps/web/app/admin/page.tsx                            | 5 ++++-
 packages/features/admin/src/components/admin-guard.tsx | 7 ++++++-
 4 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/apps/web/app/admin/accounts/[account]/page.tsx b/apps/web/app/admin/accounts/[account]/page.tsx
index 01cd60637..1ed85764f 100644
--- a/apps/web/app/admin/accounts/[account]/page.tsx
+++ b/apps/web/app/admin/accounts/[account]/page.tsx
@@ -1,3 +1,7 @@
-export default function AccountPage() {
+import { AdminGuard } from '@kit/admin/components/admin-guard';
+
+function AccountPage() {
   return <div></div>;
 }
+
+export default AdminGuard(AccountPage);
diff --git a/apps/web/app/admin/accounts/page.tsx b/apps/web/app/admin/accounts/page.tsx
index 9129598de..7e071c736 100644
--- a/apps/web/app/admin/accounts/page.tsx
+++ b/apps/web/app/admin/accounts/page.tsx
@@ -1,6 +1,7 @@
+import { AdminGuard } from '@kit/admin/components/admin-guard';
 import { PageBody, PageHeader } from '@kit/ui/page';
 
-export default function AccountsPage() {
+function AccountsPage() {
   return (
     <>
       <PageHeader title={'Accounts'} />
@@ -8,3 +9,5 @@ export default function AccountsPage() {
     </>
   );
 }
+
+export default AdminGuard(AccountsPage);
diff --git a/apps/web/app/admin/page.tsx b/apps/web/app/admin/page.tsx
index 859f822ad..b5c69a0ae 100644
--- a/apps/web/app/admin/page.tsx
+++ b/apps/web/app/admin/page.tsx
@@ -1,7 +1,8 @@
 import { AdminDashboard } from '@kit/admin/components/admin-dashboard';
+import { AdminGuard } from '@kit/admin/components/admin-guard';
 import { PageBody, PageHeader } from '@kit/ui/page';
 
-export default function AdminPage() {
+function AdminPage() {
   return (
     <>
       <PageHeader title={'Admin'} description={`Your SaaS stats at a glance`} />
@@ -12,3 +13,5 @@ export default function AdminPage() {
     </>
   );
 }
+
+export default AdminGuard(AdminPage);
diff --git a/packages/features/admin/src/components/admin-guard.tsx b/packages/features/admin/src/components/admin-guard.tsx
index 6a255a27d..1a26c8cdd 100644
--- a/packages/features/admin/src/components/admin-guard.tsx
+++ b/packages/features/admin/src/components/admin-guard.tsx
@@ -2,10 +2,15 @@ import { notFound } from 'next/navigation';
 
 import { getSupabaseServerComponentClient } from '@kit/supabase/server-component-client';
 
-import { isSuperAdmin } from '../lib/is-super-admin';
+import { isSuperAdmin } from '../lib/server/is-super-admin';
 
 type LayoutOrPageComponent<Params> = React.ComponentType<Params>;
 
+/**
+ * AdminGuard is a server component wrapper that checks if the user is a super-admin before rendering the component.
+ * If the user is not a super-admin, we redirect to a 404.
+ * @param Component - The Page or Layout component to wrap
+ */
 export function AdminGuard<Params extends object>(
   Component: LayoutOrPageComponent<Params>,
 ) {