From 9f1a099f74e465b624dd498157fbbe4ef2697771 Mon Sep 17 00:00:00 2001
From: pranavagarkar07 <pranavagarkar8@gmail.com>
Date: Wed, 27 May 2026 16:54:42 +0530
Subject: [PATCH 1/2] fix(console): improve placeholder copy with page-specific
 guidance

Replace generic 'Not Implemented' placeholder in NotImplemented component
with contextual guidance, actionable suggestions, and clearer CTAs.

Changes:
- Default title: 'Not Implemented' -> 'Coming Soon'
- Default description: friendlier copy encouraging exploration
- Added optional 'suggestions' prop for page-specific actions
- Removed developer-facing 'Hardcoded / mock data removed' badge
- Polished visual design with icons and sectioned layout

Fixes #15
---
 components/console/not-implemented.tsx | 59 +++++++++++++++++++-------
 1 file changed, 44 insertions(+), 15 deletions(-)

diff --git a/components/console/not-implemented.tsx b/components/console/not-implemented.tsx
index 6ec5da6..b0e5d5b 100644
--- a/components/console/not-implemented.tsx
+++ b/components/console/not-implemented.tsx
@@ -1,4 +1,4 @@
-import { Construction } from "lucide-react";
+import { Construction, ArrowRight, Rocket, Github, BookOpen } from "lucide-react";
 import Link from "next/link";
 
 interface NotImplementedProps {
@@ -6,31 +6,60 @@ interface NotImplementedProps {
   description?: string;
   /** Optional call-to-action link */
   cta?: { label: string; href: string };
+  /** List of suggestions for what the user can do next */
+  suggestions?: string[];
 }
 
+const DEFAULT_SUGGESTIONS = [
+  "Check the sidebar for other available sections",
+  "Deploy a repository to get started",
+  "Refer to the documentation for feature availability",
+];
+
 export function NotImplemented({
-  title = "Not Implemented",
-  description = "This section is a UI placeholder. Backend integration is required before real data appears here.",
+  title = "Coming Soon",
+  description = "This feature is under active development. Check back soon — or explore other parts of the console in the meantime.",
   cta,
+  suggestions,
 }: NotImplementedProps) {
+  const items = suggestions ?? DEFAULT_SUGGESTIONS;
   return (
     <div className="flex flex-col items-center justify-center min-h-[50vh] text-center px-4">
       <div className="w-14 h-14 rounded-2xl bg-amber-50 dark:bg-amber-500/10 border border-amber-200 dark:border-amber-500/20 flex items-center justify-center mb-5">
         <Construction className="w-7 h-7 text-amber-500" />
       </div>
       <h2 className="text-lg font-bold text-gray-900 dark:text-white mb-2">{title}</h2>
-      <p className="text-sm text-gray-500 dark:text-zinc-400 max-w-sm mb-1">{description}</p>
-      <p className="text-xs text-amber-600 dark:text-amber-400 bg-amber-50 dark:bg-amber-500/10 border border-amber-200 dark:border-amber-500/20 rounded-full px-3 py-1 mt-3">
-        Hardcoded / mock data removed
-      </p>
-      {cta && (
-        <Link
-          href={cta.href}
-          className="mt-5 px-4 py-2 text-sm font-medium text-white dark:text-gray-900 bg-gray-900 dark:bg-white hover:bg-gray-700 dark:hover:bg-gray-100 rounded-lg transition-colors"
-        >
-          {cta.label}
-        </Link>
-      )}
+      <p className="text-sm text-gray-500 dark:text-zinc-400 max-w-md mb-6">{description}</p>
+
+      <div className="flex flex-col items-center gap-3 w-full max-w-sm">
+        {cta && (
+          <Link
+            href={cta.href}
+            className="inline-flex items-center gap-2 px-5 py-2.5 text-sm font-medium text-white bg-gray-900 hover:bg-gray-700 dark:bg-white dark:hover:bg-gray-100 dark:text-gray-900 rounded-lg transition-colors"
+          >
+            {cta.label} <ArrowRight className="w-4 h-4" />
+          </Link>
+        )}
+
+        <div className="w-full border-t border-gray-100 dark:border-zinc-800 my-2" />
+
+        <p className="text-xs font-semibold text-gray-500 dark:text-zinc-500 uppercase tracking-wider">
+          In the meantime, you can:
+        </p>
+        <ul className="space-y-2 w-full">
+          {items.map((item, i) => (
+            <li
+              key={i}
+              className="flex items-center gap-2 text-sm text-gray-600 dark:text-zinc-400 bg-gray-50 dark:bg-zinc-800/50 rounded-lg px-4 py-2 border border-gray-100 dark:border-zinc-800"
+            >
+              {i === 0 ? <Rocket className="w-4 h-4 text-gray-400 shrink-0" /> :
+               i === 1 ? <Github className="w-4 h-4 text-gray-400 shrink-0" /> :
+               <BookOpen className="w-4 h-4 text-gray-400 shrink-0" />}
+              {item}
+            </li>
+          ))}
+        </ul>
+      </div>
     </div>
   );
 }

From 268c47380218583b2531f6753bfa81e45662d781 Mon Sep 17 00:00:00 2001
From: pranavagarkar07 <pranavagarkar8@gmail.com>
Date: Wed, 27 May 2026 17:02:36 +0530
Subject: [PATCH 2/2] fix(not-implemented): guard guidance section against
 empty suggestions

When suggestions is intentionally set to an empty array, items resolves to []
(not DEFAULT_SUGGESTIONS), so the divider, heading, and empty <ul> should
not render. Wrap the block with items.length > 0.
---
 components/console/not-implemented.tsx | 38 ++++++++++++++------------
 1 file changed, 21 insertions(+), 17 deletions(-)

diff --git a/components/console/not-implemented.tsx b/components/console/not-implemented.tsx
index b0e5d5b..bc88a08 100644
--- a/components/console/not-implemented.tsx
+++ b/components/console/not-implemented.tsx
@@ -41,24 +41,28 @@ export function NotImplemented({
           </Link>
         )}
 
-        <div className="w-full border-t border-gray-100 dark:border-zinc-800 my-2" />
+        {items.length > 0 && (
+          <>
+            <div className="w-full border-t border-gray-100 dark:border-zinc-800 my-2" />
 
-        <p className="text-xs font-semibold text-gray-500 dark:text-zinc-500 uppercase tracking-wider">
-          In the meantime, you can:
-        </p>
-        <ul className="space-y-2 w-full">
-          {items.map((item, i) => (
-            <li
-              key={i}
-              className="flex items-center gap-2 text-sm text-gray-600 dark:text-zinc-400 bg-gray-50 dark:bg-zinc-800/50 rounded-lg px-4 py-2 border border-gray-100 dark:border-zinc-800"
-            >
-              {i === 0 ? <Rocket className="w-4 h-4 text-gray-400 shrink-0" /> :
-               i === 1 ? <Github className="w-4 h-4 text-gray-400 shrink-0" /> :
-               <BookOpen className="w-4 h-4 text-gray-400 shrink-0" />}
-              {item}
-            </li>
-          ))}
-        </ul>
+            <p className="text-xs font-semibold text-gray-500 dark:text-zinc-500 uppercase tracking-wider">
+              In the meantime, you can:
+            </p>
+            <ul className="space-y-2 w-full">
+              {items.map((item, i) => (
+                <li
+                  key={i}
+                  className="flex items-center gap-2 text-sm text-gray-600 dark:text-zinc-400 bg-gray-50 dark:bg-zinc-800/50 rounded-lg px-4 py-2 border border-gray-100 dark:border-zinc-800"
+                >
+                  {i === 0 ? <Rocket className="w-4 h-4 text-gray-400 shrink-0" /> :
+                   i === 1 ? <Github className="w-4 h-4 text-gray-400 shrink-0" /> :
+                   <BookOpen className="w-4 h-4 text-gray-400 shrink-0" />}
+                  {item}
+                </li>
+              ))}
+            </ul>
+          </>
+        )}
       </div>
     </div>
   );