feat: add optional action props to system pages for enhanced user navigation

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 */}
+        {showActions && (
           <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">
+            <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>
   );

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 */}
+        {(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"
+                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">
+            {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>
   );

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 */}
+        {showActions && (
           <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">
+            <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>
   );

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>
 
+        {(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"
+                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">
+            {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>
   );