From 9fc1ef029c101103d92df148e9357f89ac01dbdc Mon Sep 17 00:00:00 2001
From: Firman Ramdhani <33869609+firmanramdhani@users.noreply.github.com>
Date: Wed, 21 Jan 2026 10:10:52 +0700
Subject: [PATCH] feat: add optional action props to system pages for enhanced
 user navigation

---
 .../components/system-pages/coming-soon.tsx   | 25 +++++++----
 .../src/components/system-pages/forbidden.tsx | 42 +++++++++++++------
 .../components/system-pages/maintenance.tsx   | 25 +++++++----
 .../src/components/system-pages/not-found.tsx | 42 +++++++++++++------
 4 files changed, 94 insertions(+), 40 deletions(-)

diff --git a/packages/ui/src/components/system-pages/coming-soon.tsx b/packages/ui/src/components/system-pages/coming-soon.tsx
index c31296d..7ec9d63 100644
--- a/packages/ui/src/components/system-pages/coming-soon.tsx
+++ b/packages/ui/src/components/system-pages/coming-soon.tsx
@@ -1,4 +1,10 @@
-export function ComingSoon() {
+interface ComingSoonProps {
+  showActions?: boolean;
+}
+
+export function ComingSoon(props: ComingSoonProps) {
+  const { showActions = false } = props;
+
   return (
     <div className="flex min-h-screen items-center justify-center bg-white px-4">
       <div className="w-full max-w-md text-center">
@@ -6,7 +12,7 @@ export function ComingSoon() {
         <p className="text-sm font-medium uppercase tracking-widest text-gray-400">Coming Soon</p>
 
         {/* Title */}
-        <h1 className="mt-3 text-6xl font-extrabold text-gray-900">Feature in Progress</h1>
+        <h1 className="mt-3 text-6xl font-extrabold text-brand-900">Feature in Progress</h1>
 
         {/* Description */}
         <p className="mt-4 text-base text-gray-500">
@@ -14,11 +20,16 @@ export function ComingSoon() {
         </p>
 
         {/* Actions */}
-        <div className="mt-8 flex justify-center gap-3">
-          <a href="/" className="rounded-md bg-gray-900 px-5 py-2.5 text-sm font-medium text-white hover:bg-gray-800">
-            Back to Home
-          </a>
-        </div>
+        {showActions && (
+          <div className="mt-8 flex justify-center gap-3">
+            <a
+              href="/"
+              className="rounded-md bg-brand-900 px-5 py-2.5 text-sm font-medium text-white hover:bg-brand-800"
+            >
+              Back to Home
+            </a>
+          </div>
+        )}
       </div>
     </div>
   );
diff --git a/packages/ui/src/components/system-pages/forbidden.tsx b/packages/ui/src/components/system-pages/forbidden.tsx
index b49888a..f9c518d 100644
--- a/packages/ui/src/components/system-pages/forbidden.tsx
+++ b/packages/ui/src/components/system-pages/forbidden.tsx
@@ -1,4 +1,11 @@
-export function Forbidden() {
+interface ForbiddenProps {
+  showActionsBack?: boolean;
+  showActionsHome?: boolean;
+}
+
+export function Forbidden(props: ForbiddenProps) {
+  const { showActionsBack = true, showActionsHome = true } = props;
+
   return (
     <div className="flex min-h-screen items-center justify-center bg-white px-4">
       <div className="w-full max-w-md text-center">
@@ -6,7 +13,7 @@ export function Forbidden() {
         <p className="text-sm font-medium uppercase tracking-widest text-gray-400">403 Error</p>
 
         {/* Title */}
-        <h1 className="mt-3 text-6xl font-extrabold text-gray-900">Access Denied</h1>
+        <h1 className="mt-3 text-6xl font-extrabold text-brand-900">Access Denied</h1>
 
         {/* Description */}
         <p className="mt-4 text-base text-gray-500">
@@ -15,18 +22,27 @@ export function Forbidden() {
         </p>
 
         {/* Actions */}
-        <div className="mt-8 flex justify-center gap-3">
-          <button
-            onClick={() => window.history.back()}
-            className="rounded-md border border-gray-300 px-5 py-2.5 text-sm font-medium text-gray-700 hover:bg-gray-100"
-          >
-            Go Back
-          </button>
+        {(showActionsBack || showActionsHome) && (
+          <div className="mt-8 flex justify-center gap-3">
+            {showActionsBack && (
+              <button
+                onClick={() => window.history.back()}
+                className="rounded-md border border-gray-300 px-5 py-2.5 text-sm font-medium text-gray-700 hover:bg-gray-100 cursor-pointer"
+              >
+                Go Back
+              </button>
+            )}
 
-          <a href="/" className="rounded-md bg-gray-900 px-5 py-2.5 text-sm font-medium text-white hover:bg-gray-800">
-            Back to Home
-          </a>
-        </div>
+            {showActionsHome && (
+              <a
+                href="/"
+                className="rounded-md bg-brand-900 px-5 py-2.5 text-sm font-medium text-white hover:bg-brand-800"
+              >
+                Back to Home
+              </a>
+            )}
+          </div>
+        )}
       </div>
     </div>
   );
diff --git a/packages/ui/src/components/system-pages/maintenance.tsx b/packages/ui/src/components/system-pages/maintenance.tsx
index da861b2..7643be2 100644
--- a/packages/ui/src/components/system-pages/maintenance.tsx
+++ b/packages/ui/src/components/system-pages/maintenance.tsx
@@ -1,4 +1,10 @@
-export function Maintenance() {
+interface MaintenanceProps {
+  showActions?: boolean;
+}
+
+export function Maintenance(props: MaintenanceProps) {
+  const { showActions = false } = props;
+
   return (
     <div className="flex min-h-screen items-center justify-center bg-white px-4">
       <div className="w-full max-w-md text-center">
@@ -6,7 +12,7 @@ export function Maintenance() {
         <p className="text-sm font-medium uppercase tracking-widest text-gray-400">Maintenance</p>
 
         {/* Title */}
-        <h1 className="mt-3 text-6xl font-extrabold text-gray-900">We'll Be Back Soon</h1>
+        <h1 className="mt-3 text-6xl font-extrabold text-brand-900">We'll Be Back Soon</h1>
 
         {/* Description */}
         <p className="mt-4 text-base text-gray-500">
@@ -15,11 +21,16 @@ export function Maintenance() {
         </p>
 
         {/* Optional Actions */}
-        <div className="mt-8 flex justify-center gap-3">
-          <a href="/" className="rounded-md bg-gray-900 px-5 py-2.5 text-sm font-medium text-white hover:bg-gray-800">
-            Back to Home
-          </a>
-        </div>
+        {showActions && (
+          <div className="mt-8 flex justify-center gap-3">
+            <a
+              href="/"
+              className="rounded-md bg-brand-900 px-5 py-2.5 text-sm font-medium text-white hover:bg-brand-800"
+            >
+              Back to Home
+            </a>
+          </div>
+        )}
       </div>
     </div>
   );
diff --git a/packages/ui/src/components/system-pages/not-found.tsx b/packages/ui/src/components/system-pages/not-found.tsx
index 8746e19..ffb8efc 100644
--- a/packages/ui/src/components/system-pages/not-found.tsx
+++ b/packages/ui/src/components/system-pages/not-found.tsx
@@ -1,27 +1,43 @@
-export function NotFound() {
+interface NotFoundProps {
+  showActionsBack?: boolean;
+  showActionsHome?: boolean;
+}
+
+export function NotFound(props: NotFoundProps) {
+  const { showActionsBack = true, showActionsHome = true } = props;
+
   return (
     <div className="flex min-h-screen items-center justify-center bg-white px-4">
       <div className="w-full max-w-md text-center">
         <p className="text-sm font-medium uppercase tracking-widest text-gray-400">404 Error</p>
 
-        <h1 className="mt-3 text-6xl font-extrabold text-gray-900">Page Not Found</h1>
+        <h1 className="mt-3 text-6xl font-extrabold text-brand-900">Page Not Found</h1>
 
         <p className="mt-4 text-base text-gray-500">
           Sorry, the page you’re looking for doesn’t exist or has been moved.
         </p>
 
-        <div className="mt-8 flex justify-center gap-3">
-          <button
-            onClick={() => window.history.back()}
-            className="rounded-md border border-gray-300 px-5 py-2.5 text-sm font-medium text-gray-700 hover:bg-gray-100"
-          >
-            Go Back
-          </button>
+        {(showActionsBack || showActionsHome) && (
+          <div className="mt-8 flex justify-center gap-3">
+            {showActionsBack && (
+              <button
+                onClick={() => window.history.back()}
+                className="rounded-md border border-gray-300 px-5 py-2.5 text-sm font-medium text-gray-700 hover:bg-gray-100 cursor-pointer"
+              >
+                Go Back
+              </button>
+            )}
 
-          <a href="/" className="rounded-md bg-gray-900 px-5 py-2.5 text-sm font-medium text-white hover:bg-gray-800">
-            Back to Home
-          </a>
-        </div>
+            {showActionsHome && (
+              <a
+                href="/"
+                className="rounded-md bg-brand-900 px-5 py-2.5 text-sm font-medium text-white hover:bg-brand-800"
+              >
+                Back to Home
+              </a>
+            )}
+          </div>
+        )}
       </div>
     </div>
   );