feat: Add API integrations page and enhance content generation

app/(root)/dashboard/api-integrations/page.tsx

@@ -0,0 +1,7 @@
+export default function Page(){
+
+  return(
+    <>
+    </>
+  )
+}

app/api/image_upload/route.ts

@@ -1,6 +1,6 @@
 import { NextResponse } from 'next/server';
-import { createClient } from '@/utils/supabase/server'; // Supabase client utility
-import { randomUUID } from 'crypto'; // For unique file names
+import { createClient } from '@/utils/supabase/server';
+import { randomUUID } from 'crypto';
 
 export async function POST(req: Request) {
   const supabase = await createClient();

components/Layout/Dashboard/Dashboard.tsx

@@ -61,7 +61,7 @@ export default function Dashboard() {
 
     // 3. Empty State: Show No Content Message
     return (
-      <div className="rounded-xl border border-indigo-200 bg-indigo-50 p-16 text-center">
+      <div className="rounded-xl border w-full border-indigo-200 bg-indigo-50 p-16 text-center">
         <p className="mb-2 text-2xl font-bold text-black">No content found.</p>
         <p className="text-md text-black">
           Start a new search or create your first piece of content!

components/Layout/Dashboard/Generate/ApiSenderDialog.tsx

@@ -24,6 +24,7 @@ import { useContent } from '@/context/GenerationContext';
 import { cn } from '@/lib/utils';
 import { Input } from '@/components/ui/input';
 import { motion } from 'framer-motion';
+import { makeRequest } from '@/lib/actions/content.actions';
 
 export const ApiSenderDialog = ({ isOpen, onClose }) => {
   // Mock hook usage
@@ -106,20 +107,13 @@ export const ApiSenderDialog = ({ isOpen, onClose }) => {
     setErrorDetails('');
     setApiResult(null);
 
-    // --- Start Mock API Call (Replace this section with actual fetch in a real environment) ---
     try {
-      // Implement exponential backoff for resilience (optional but good practice)
       const maxRetries = 3;
       let delay = 1000;
 
       for (let i = 0; i < maxRetries; i++) {
         try {
-          // Simulate successful response
-          const mockResponse = {
-            id: 'post-' + Math.floor(Math.random() * 10000),
-            status: 'published',
-            url: 'https://preview.yourcms.com/article/' + Math.floor(Math.random() * 10000),
-          };
+          const mockResponse = await makeRequest(apiEndpoint, customBody);
 
           setApiResult(mockResponse);
           setStatus('success');

components/Layout/Dashboard/Generate/ContentRenderer.tsx

@@ -10,6 +10,7 @@ import '@mdxeditor/editor/style.css';
 import rehypeRaw from 'rehype-raw';
 import { useGlobalState } from '@/context/GlobalStateContext';
 import { useContent } from '@/context/GenerationContext';
+import { PromptSelector } from '@/components/Layout/Dashboard/Generate/PromptSelector';
 
 interface ContentRendererProps {
   isLoading: boolean;
@@ -52,7 +53,7 @@ export const Content: React.FC<ContentRendererProps> = ({ isLoading }: { isLoadi
       >
         {isLoading ? (
           <ContentLoadingSkeleton />
-        ) : (
+        ) : !generatedContent && !isLoading ? (<PromptSelector/>) : (
           // ARTICLE CONTAINER: This is where we control the content's width.
           // - max-w-4xl mx-auto: Limits content to a readable width (e.g., 56rem) and centers it.
           // - flex-col: Ensures Markdown content stacks vertically.

components/Layout/Dashboard/Generate/PromptSelector.tsx

@@ -0,0 +1,161 @@
+'use client'
+
+import React, { useState } from 'react';
+import {
+  Feather, // Placeholder icon for writing
+  FileText,
+  Rocket,
+  Search,
+  Zap,
+  CheckCircle,
+  TrendingUp,
+} from 'lucide-react';
+import { cn } from '@/lib/utils';
+import { motion } from 'framer-motion';
+import { useContent } from '@/context/GenerationContext';
+
+// --- Prompt Data Structure ---
+interface Prompt {
+  id: string;
+  title: string;
+  icon: React.ElementType;
+  summary: string;
+  fullPrompt: string;
+}
+
+// --- List of Well-Written Prompts ---
+const professionalPrompts: Prompt[] = [
+  {
+    id: 'p-1',
+    title: 'Executive Summary Generator',
+    icon: FileText,
+    summary: 'Analyze a 500-word document and extract the three most critical takeaways, summarizing them into a professional executive overview, suitable for C-level review.',
+    fullPrompt: 'Analyze the provided text. Identify the three most critical business insights, risks, or opportunities. Summarize these points into a single, concise executive summary paragraph, maintaining a formal and objective tone.',
+  },
+  {
+    id: 'p-2',
+    title: 'SEO-Optimized Blog Post',
+    icon: TrendingUp,
+    summary: 'Generate a 1000-word blog post on "The Future of Quantum Computing," incorporating a required set of five target keywords naturally throughout the text.',
+    fullPrompt: 'Draft a 1000-word SEO-optimized blog post titled "The Future of Quantum Computing." The post must include the following keywords: [quantum entanglement], [superposition], [qubit], [d-wave], and [quantum supremacy]. Structure the post with a compelling introduction, three detailed body sections, and a conclusion with a clear call to action.',
+  },
+  {
+    id: 'p-3',
+    title: 'Competitive Analysis Report',
+    icon: Search,
+    summary: 'Conduct a high-level competitive analysis of three specified companies, detailing their market position, primary product, and unique selling proposition (USP).',
+    fullPrompt: 'Perform a high-level competitive analysis comparing Company A, Company B, and Company C. For each company, detail their current market share (if known), their flagship product, their core technology advantage, and a concise summary of their Unique Selling Proposition (USP). Present the findings in a clear, comparative table format.',
+  },
+  {
+    id: 'p-4',
+    title: 'Viral Social Media Campaign',
+    icon: Rocket,
+    summary: 'Design a three-part social media campaign (Twitter thread, LinkedIn post, Instagram caption) to promote a new SaaS feature launch.',
+    fullPrompt: 'Design a high-impact, three-part social media campaign to promote the launch of a new SaaS feature: "Real-time AI Document Collaboration." Create a compelling, detailed Twitter thread (max 7 tweets), a professional LinkedIn post focused on business value, and a short, engaging Instagram caption with relevant hashtags.',
+  },
+];
+
+
+export const PromptSelector = () => {
+  // State to track the ID of the currently selected prompt
+  const [selectedPromptId, setSelectedPromptId] = useState(null);
+
+  const { setPrompt } = useContent();
+
+  // Derive the full details of the selected prompt
+  const selectedPrompt = professionalPrompts.find(p => p.id === selectedPromptId);
+
+  const handleSelect = (id: string, prompt = '') => {
+    setSelectedPromptId(id === selectedPromptId ? null : id);
+    setPrompt(prompt);
+  };
+
+  return (
+    <div className="font-sans p-6 bg-neutral-50 rounded-xl shadow-lg border border-neutral-200">
+      <h2 className="text-2xl font-bold text-neutral-900 mb-2 flex items-center">
+        <Feather className="w-6 h-6 mr-3 text-black" />
+        Prompt Templates Library
+      </h2>
+      <p className="text-neutral-600 mb-6 border-b pb-3 text-sm">
+        Select a template to instantly load a professionally written prompt into the editor, or use it as inspiration.
+      </p>
+
+      {/* Prompt Grid Container (Responsive Layout) */}
+      <div className="grid grid-cols-1 gap-4 sm:grid-cols-1 lg:grid-cols-2">
+        {professionalPrompts.map((prompt) => {
+          const isSelected = prompt.id === selectedPromptId;
+          const IconComponent = prompt.icon;
+
+          return (
+            <motion.div
+              key={prompt.id}
+              initial={{ scale: 1 }}
+              whileHover={{ scale: 1.01, zIndex: 10 }}
+              onClick={() => handleSelect(prompt.id, prompt.fullPrompt)}
+              className={cn(
+                'group p-4 rounded-xl border-2 transition-300 cursor-pointer shadow-sm',
+                'flex flex-col justify-between min-h-[180px]',
+                // Default state
+                'bg-white border-neutral-200 hover:border-black/50 hover:shadow-md',
+                // Selected state
+                isSelected
+                  ? 'border-black bg-black text-white shadow-xl ring-2 ring-offset-2 ring-black/50'
+                  : 'text-neutral-900',
+              )}
+            >
+              <div className="mb-4">
+                <div className={cn(
+                  'p-2 rounded-full mb-3 inline-block transition-colors duration-300',
+                  isSelected
+                    ? 'bg-white text-black'
+                    : 'bg-neutral-100 text-neutral-700 group-hover:bg-black group-hover:text-white',
+                )}>
+                  <IconComponent className="w-5 h-5" />
+                </div>
+                <h3 className={cn(
+                  "text-lg font-semibold",
+                  isSelected ? 'text-white' : 'text-neutral-900 group-hover:text-black'
+                )}>
+                  {prompt.title}
+                </h3>
+              </div>
+
+              <div className="text-xs opacity-90">
+                <p className={cn(
+                  "line-clamp-3",
+                  isSelected ? 'text-neutral-300' : 'text-neutral-600 group-hover:text-neutral-800'
+                )}>{prompt.summary}</p>
+              </div>
+
+              {isSelected && (
+                <div className="mt-3 flex items-center text-xs font-semibold text-white">
+                  <CheckCircle className="w-4 h-4 mr-1.5" /> Selected
+                </div>
+              )}
+            </motion.div>
+          );
+        })}
+      </div>
+
+      {/*/!* Selected Prompt Display (for demonstration) *!/*/}
+      {/*{selectedPrompt && (*/}
+      {/*  <motion.div*/}
+      {/*    initial={{ opacity: 0, y: 20 }}*/}
+      {/*    animate={{ opacity: 1, y: 0 }}*/}
+      {/*    className="mt-8 p-5 bg-black rounded-xl shadow-xl border border-neutral-700"*/}
+      {/*  >*/}
+      {/*    <h3 className="flex items-center text-lg font-bold text-white mb-2">*/}
+      {/*      <Zap className="w-5 h-5 mr-2 text-yellow-400" />*/}
+      {/*      Active Prompt Text*/}
+      {/*    </h3>*/}
+      {/*    <p className="font-mono text-sm text-neutral-300 whitespace-pre-wrap">*/}
+      {/*      {selectedPrompt.fullPrompt}*/}
+      {/*    </p>*/}
+      {/*    <p className="mt-4 text-xs text-neutral-500">*/}
+      {/*      *This text is now ready to be loaded into your main input field.**/}
+      {/*    </p>*/}
+      {/*  </motion.div>*/}
+      {/*)}*/}
+    </div>
+  );
+};

components/Layout/Dashboard/Generate/content/Renderer.tsx

@@ -11,6 +11,7 @@ import { MarkdownViewer } from '@/components/Layout/Dashboard/Generate/content/M
 import { Source } from '../RightSidebarPanel';
 import EditorLoader from '@/components/Layout/Dashboard/Generate/Editor/EditorLoader';
 import { FileText, PenLine, Link as LinkIcon, Code } from 'lucide-react';
+import { PromptSelector } from '@/components/Layout/Dashboard/Generate/PromptSelector';
 
 const Editor = dynamic(() => import('../Editor/Editor'), {
   // Make sure we turn SSR off
@@ -54,6 +55,12 @@ export default function Renderer() {
           >
             <MarkdownViewer />
           </TabsContent>
+          <TabsContent
+            className={'container-full overflow-hidden'}
+            value={contentRendererTabsState.templates}
+          >
+            <PromptSelector/>
+          </TabsContent>
         </div>
       </Tabs>
     </div>
@@ -68,6 +75,7 @@ const RendererTabs = () => {
     [contentRendererTabsState.editor]: PenLine,
     [contentRendererTabsState.sources]: LinkIcon,
     [contentRendererTabsState.markdown]: Code,
+    [contentRendererTabsState.templates]: Code,
   };
 
   return (

components/Layout/Navigations/Sidebar.tsx

@@ -39,6 +39,7 @@ const navigation = [
     title: 'Other',
     items: [
       { href: '/dashboard/explore', icon: Globe, label: 'Explore Tools' },
+      { href: '/dashboard/api-integrations', icon: Globe, label: 'API Intgrations' },
     ],
   },
 ];

context/GenerationContext.tsx

@@ -40,6 +40,7 @@ export const contentRendererTabsState = {
   editor: 'editor',
   sources: 'sources',
   markdown: 'markdown',
+  templates: 'templates'
 };
 
 // --- 1. Define the Context Interface (What components can access) ---
@@ -211,6 +212,7 @@ export function ContextProvider({ children }: { children: ReactNode }) {
 
     setIsLoading(true);
     setGeneratedContent('');
+    setPrompt('');
     setChatHistory((prev) => [...prev, { id, role: 'user', content: prompt }]);
 
     try {

lib/actions/content.actions.ts

@@ -5,6 +5,7 @@
 import { db } from '@/db';
 import { contents } from '@/drizzle/schema';
 import { and, eq } from 'drizzle-orm';
+import axios from 'axios';
 
 export async function deleteContent(contentId: string) {
   const supabase = await createClient();
@@ -69,3 +70,13 @@
     return { error: 'Failed to update content.' };
   }
 }
+
+export async function makeRequest(url: string, options: any) {
+
+  try {
+    return await axios.post(url, options);
+  }catch (e) {
+    console.log(e);
+    throw e;
+  }
+}

package.json

@@ -82,8 +82,8 @@
     "@types/react-syntax-highlighter": "^15.5.13",
     "autoprefixer": "^10.4.21",
     "drizzle-kit": "^0.31.7",
-    "eslint": "^9",
-    "eslint-config-next": "16.0.1",
+    "eslint": "^9.39.1",
+    "eslint-config-next": "^16.0.5",
     "eslint-config-prettier": "^10.1.8",
     "postcss": "^8.5.6",
     "prettier": "^3.6.2",