From 3a58474996af9e98c58a291913894751c317170e Mon Sep 17 00:00:00 2001
From: Njeriiii <joymwenjwa@gmail.com>
Date: Mon, 3 Feb 2025 13:40:23 -0800
Subject: [PATCH 01/13] proposal builder initial setup

---
 Frontend/src/App.js                           |   2 +
 Frontend/src/components/Header.js             |   1 +
 .../ProjectNarrativeSection.js                | 331 ++++++++++++++++++
 Frontend/src/pages/ProposalBuilderPage.js     | 102 ++++++
 4 files changed, 436 insertions(+)
 create mode 100644 Frontend/src/components/ProposalBuilderComponents/ProjectNarrativeSection.js
 create mode 100644 Frontend/src/pages/ProposalBuilderPage.js

diff --git a/Frontend/src/App.js b/Frontend/src/App.js
index f22c474..f7b9fac 100644
--- a/Frontend/src/App.js
+++ b/Frontend/src/App.js
@@ -17,6 +17,7 @@ import VolunteerPage from './pages/VolunteerPage';
 import SelectUserTypePage from './pages/SelectUserTypePage';
 import EstablishmentGuide from './pages/EstablishmentGuide';
 import EditProfile from './pages/EditProfilePage';
+import ProposalBuilderPage from './pages/ProposalBuilderPage';
 
 
 function App() {
@@ -43,6 +44,7 @@ function App() {
               <Route path="/edit_profile" element={<EditProfile />} />
 
               <Route path="/establishment-guide" element={<EstablishmentGuide />} />
+              <Route path="/proposal-builder" element={<ProposalBuilderPage />} />
             </Routes>
             </TranslationProvider>
         </ApiProvider>
diff --git a/Frontend/src/components/Header.js b/Frontend/src/components/Header.js
index ce1be62..d36b6fc 100644
--- a/Frontend/src/components/Header.js
+++ b/Frontend/src/components/Header.js
@@ -15,6 +15,7 @@ const navigation = [
     { name: "Home", href: "/" },
     { name: "Find GOs", href: "/find-gos" },
     { name: "Establishment Guide", href: "/establishment-guide" },
+    { name: "Proposal Builder", href: "/proposal-builder" },
     { name: "Volunteer", href: "/volunteer" },
     { name: "About", href: "/about" },
 ];
diff --git a/Frontend/src/components/ProposalBuilderComponents/ProjectNarrativeSection.js b/Frontend/src/components/ProposalBuilderComponents/ProjectNarrativeSection.js
new file mode 100644
index 0000000..f490967
--- /dev/null
+++ b/Frontend/src/components/ProposalBuilderComponents/ProjectNarrativeSection.js
@@ -0,0 +1,331 @@
+import React, { useState, useEffect } from 'react';
+import { 
+    DocumentTextIcon,
+    ArrowPathIcon,
+} from '@heroicons/react/24/outline';
+import { useApi } from '../../contexts/ApiProvider';
+
+/**
+ * ProjectNarrativeSection
+ * 
+ * Collects project details and generates a comprehensive narrative section
+ * using AI assistance. Uses organization context to maintain consistency.
+ * 
+ * Features:
+ * - Problem statement inputs
+ * - Solution/approach details
+ * - Goals and outcomes
+ * - Timeline information
+ * - Considers org context for cohesive narrative
+ */
+export default function ProjectNarrativeSection({ }) {
+
+    const [generatedContent, setGeneratedContent] = useState('');
+    const [isGenerating, setIsGenerating] = useState(false);
+    const [error, setError] = useState(null);
+    const { apiClient } = useApi();
+
+    const [inputs, setInputs] = useState({
+        problem: {
+            statement: '',
+            affectedPopulation: '',
+            currentSituation: '',
+            relevance: ''
+        },
+        solution: {
+            approach: '',
+            methodology: '',
+            innovation: ''
+        },
+        impact: {
+            shortTerm: '',
+            longTerm: '',
+            beneficiaries: '',
+            measurement: ''
+        },
+        timeline: {
+            duration: '',
+            majorPhases: '',
+            keyMilestones: ''
+        }
+    });
+
+    const sections = [
+        {
+            title: 'Problem Statement',
+            stateKey: 'problem',
+            fields: [
+                {
+                    id: 'statement',
+                    label: 'What specific problem are you addressing?',
+                    placeholder: 'Describe the core issue your project tackles...',
+                    type: 'textarea'
+                },
+                {
+                    id: 'affectedPopulation',
+                    label: 'Who is affected by this problem?',
+                    placeholder: 'Detail the communities or groups impacted...',
+                    type: 'textarea'
+                },
+                {
+                    id: 'currentSituation',
+                    label: 'What is the current situation?',
+                    placeholder: 'Explain the existing conditions and challenges...',
+                    type: 'textarea'
+                },
+                {
+                    id: 'relevance',
+                    label: 'Why is addressing this important now?',
+                    placeholder: 'Describe the urgency and significance...',
+                    type: 'textarea'
+                }
+            ]
+        },
+        {
+            title: 'Proposed Solution',
+            stateKey: 'solution',
+            fields: [
+                {
+                    id: 'approach',
+                    label: 'What is your approach to solving this problem?',
+                    placeholder: 'Outline your solution strategy...',
+                    type: 'textarea'
+                },
+                {
+                    id: 'methodology',
+                    label: 'How will you implement this solution?',
+                    placeholder: 'Detail your implementation methods...',
+                    type: 'textarea'
+                },
+                {
+                    id: 'innovation',
+                    label: 'What makes your approach innovative or effective?',
+                    placeholder: 'Highlight unique aspects of your solution...',
+                    type: 'textarea'
+                }
+            ]
+        },
+        {
+            title: 'Expected Impact',
+            stateKey: 'impact',
+            fields: [
+                {
+                    id: 'shortTerm',
+                    label: 'What are the immediate outcomes?',
+                    placeholder: 'List expected results in first year...',
+                    type: 'textarea'
+                },
+                {
+                    id: 'longTerm',
+                    label: 'What are the long-term impacts?',
+                    placeholder: 'Describe lasting changes...',
+                    type: 'textarea'
+                },
+                {
+                    id: 'beneficiaries',
+                    label: 'Who will benefit and how?',
+                    placeholder: 'Detail direct and indirect beneficiaries...',
+                    type: 'textarea'
+                },
+                {
+                    id: 'measurement',
+                    label: 'How will you measure success?',
+                    placeholder: 'Outline key metrics and evaluation methods...',
+                    type: 'textarea'
+                }
+            ]
+        },
+        {
+            title: 'Timeline',
+            stateKey: 'timeline',
+            fields: [
+                {
+                    id: 'duration',
+                    label: 'What is the project duration?',
+                    placeholder: 'e.g., 18 months, 2 years...',
+                    type: 'text'
+                },
+                {
+                    id: 'majorPhases',
+                    label: 'What are the major project phases?',
+                    placeholder: 'List main implementation phases...',
+                    type: 'textarea'
+                },
+                {
+                    id: 'keyMilestones',
+                    label: 'What are the key milestones?',
+                    placeholder: 'List important project milestones...',
+                    type: 'textarea'
+                }
+            ]
+        }
+    ];
+
+    const handleInputChange = (section, field, value) => {
+        setInputs(prev => ({
+            ...prev,
+            [section]: {
+                ...prev[section],
+                [field]: value
+            }
+        }));
+    };
+
+    const handleGenerate = async () => {
+        setIsGenerating(true);
+        setError(null);
+
+        console.log('inputs:', inputs);
+
+        try {
+            // Get previous content for context
+            const orgContent = localStorage.getItem('organizationContent');
+
+            const prompt = `You are an expert grant writer. Using the provided information, create a compelling project narrative section for a grant proposal. 
+            Make it professional, clear, and persuasive.
+
+            Organization Context:
+            ${orgContent}
+
+            Problem Information:
+            ${inputs.problem.statement}
+            Affected Population: ${inputs.problem.affectedPopulation}
+            Current Situation: ${inputs.problem.currentSituation}
+            Relevance: ${inputs.problem.relevance}
+
+            Proposed Solution:
+            Approach: ${inputs.solution.approach}
+            Methodology: ${inputs.solution.methodology}
+            Innovation: ${inputs.solution.innovation}
+
+            Expected Impact:
+            Short-term Outcomes: ${inputs.impact.shortTerm}
+            Long-term Impact: ${inputs.impact.longTerm}
+            Beneficiaries: ${inputs.impact.beneficiaries}
+            Success Metrics: ${inputs.impact.measurement}
+
+            Timeline:
+            Duration: ${inputs.timeline.duration}
+            Major Phases: ${inputs.timeline.majorPhases}
+            Key Milestones: ${inputs.timeline.keyMilestones}
+
+            Generate a cohesive project narrative that:
+            1. Clearly states the problem and its significance
+            2. Presents a compelling solution
+            3. Details expected outcomes and impact
+            4. Outlines a clear implementation timeline
+            5. Maintains consistency with the organization's context
+            6. Uses professional grant writing language and structure`;
+
+            const response = await apiClient.post('/claude/generate', {
+                prompt,
+                section: 'narrative'
+            });
+
+            setGeneratedContent(response.content);
+            localStorage.setItem('projectNarrativeContent', response.content);
+
+        } catch (error) {
+            console.error('Generation failed:', error);
+            setError('Failed to generate content. Please try again.');
+        } finally {
+            setIsGenerating(false);
+        }
+    };
+
+
+    return (
+        <div className="bg-white rounded-lg shadow-md p-6">
+            <h2 className="text-2xl font-bold text-gray-900 mb-6">Project Narrative</h2>
+            
+            {/* Input Form */}
+            <div className="space-y-8">
+                {!generatedContent && sections.map((section) => (
+                    <div key={section.title} className="border-b border-gray-200 pb-6">
+                        <h3 className="text-xl font-medium text-gray-900 mb-4">
+                            {section.title}
+                        </h3>
+                        <div className="space-y-4">
+                            {section.fields.map((field) => (
+                                <div key={field.id}>
+                                    <label className="block text-m font-medium text-gray-700 mb-1">
+                                        {field.label}
+                                    </label>
+                                    {field.type === 'textarea' ? (
+                                    <textarea
+                                        value={inputs[section.stateKey][field.id]}
+                                        onChange={(e) => handleInputChange(
+                                            section.stateKey,  // Use the explicit key
+                                            field.id,
+                                            e.target.value
+                                        )}
+                                        placeholder={field.placeholder}
+                                        rows={3}
+                                        className="block w-full rounded-md border-gray-300 shadow-sm focus:border-teal-500 focus:ring-teal-500"
+                                    />
+                                ) : (
+                                    <input
+                                        type="text"
+                                        value={inputs[section.stateKey][field.id]}
+                                        onChange={(e) => handleInputChange(
+                                            section.stateKey,  // Use the explicit key
+                                            field.id,
+                                            e.target.value
+                                        )}
+                                        placeholder={field.placeholder}
+                                        className="block w-full rounded-md border-gray-300 shadow-sm focus:border-teal-500 focus:ring-teal-500"
+                                    />
+                                )}
+                                </div>
+                            ))}
+                        </div>
+                    </div>
+                ))}
+            </div>
+
+            {/* Generate button that calls handleGenerate */}
+            {!generatedContent && (
+                <button
+                    onClick={handleGenerate}
+                    disabled={isGenerating}
+                    className="mt-6 inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-teal-600 hover:bg-teal-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-teal-500 disabled:opacity-50"
+                >
+                    {isGenerating ? (
+                        <>
+                            <ArrowPathIcon className="animate-spin h-5 w-5 mr-2" />
+                            Generating...
+                        </>
+                    ) : (
+                        <>
+                            <DocumentTextIcon className="h-5 w-5 mr-2" />
+                            Generate Narrative
+                        </>
+                    )}
+                </button>
+            )}
+
+            {/* Display generated content */}
+            {generatedContent && (
+                <div className="prose max-w-none mt-6">
+                    <div className="bg-gray-50 rounded-lg p-6">
+                        {generatedContent}
+                    </div>
+                    <button
+                        onClick={handleGenerate}
+                        className="mt-4 inline-flex items-center px-4 py-2 border border-gray-300 text-m font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"
+                    >
+                        <ArrowPathIcon className="h-4 w-4 mr-2" />
+                        Regenerate
+                    </button>
+                </div>
+            )}
+
+            {/* Error display */}
+            {error && (
+                <div className="mt-4 text-red-600 text-m">
+                    {error}
+                </div>
+            )}
+        </div>
+    );
+}
\ No newline at end of file
diff --git a/Frontend/src/pages/ProposalBuilderPage.js b/Frontend/src/pages/ProposalBuilderPage.js
new file mode 100644
index 0000000..378d21e
--- /dev/null
+++ b/Frontend/src/pages/ProposalBuilderPage.js
@@ -0,0 +1,102 @@
+import React, { useState } from 'react';
+import { 
+    BuildingOfficeIcon, 
+    DocumentIcon,
+    CurrencyDollarIcon,
+    DocumentTextIcon
+} from '@heroicons/react/24/outline';
+import ProjectNarrativeSection from '../components/ProposalBuilderComponents/ProjectNarrativeSection';
+import Header from '../components/Header';
+
+/**
+ * ProposalBuilder
+ * 
+ * A step-by-step grant proposal generator that creates professional proposal content
+ * based on user inputs. The tool guides users through four main sections:
+ * 
+ * 1. Organization Information - Details about your organization
+ * 2. Project Narrative - Core project description and goals
+ * 3. Budget - Financial requirements and justification
+ * 4. Project Summary - Executive summary (generated last, displayed first)
+ * 
+ * Each section:
+ * - Collects specific inputs
+ * - Generates content using AI
+ * - Builds upon previous sections' content
+ * - Can be regenerated as needed
+ * 
+ * Content is saved to localStorage for persistence between sessions.
+ */
+export default function ProposalBuilder() {
+    const [activeSection, setActiveSection] = useState('organization');
+
+    const sections = [
+        { id: 'organization', label: 'Organization Information', icon: BuildingOfficeIcon },
+        { id: 'projectNarrative', label: 'Project Narrative', icon: DocumentIcon },
+        { id: 'budget', label: 'Budget', icon: CurrencyDollarIcon },
+        { id: 'summary', label: 'Project Summary', icon: DocumentTextIcon }
+    ];
+
+    return (
+        <div className="min-h-screen bg-gray-50">
+            <Header />
+            <main>
+                {/* Introduction section */}
+                <div className="max-w-7xl mx-auto py-8 px-4 sm:px-6 lg:px-8">
+                    <div className="bg-white rounded-lg shadow-md p-6 mb-8">
+                        <div className="max-w-3xl">
+                            <h1 className="text-3xl font-bold text-gray-900 mb-4">
+                                AI-Powered Grant Proposal Builder
+                            </h1>
+                            <div className="space-y-4 text-gray-600">
+                                <p className="text-lg">
+                                    Transform your project ideas into professionally written grant proposals. Our AI assistant guides you through each section, ensuring comprehensive and compelling content.
+                                </p>
+                                <div className="flex space-x-4">
+                                    <div className="border-l-4 border-teal-500 pl-4">
+                                        <h2 className="font-medium text-gray-900">Professional Quality</h2>
+                                        <p className="text-lg mt-1">Generate polished, funder-ready content that follows grant writing best practices.</p>
+                                    </div>
+                                </div>
+                                <div className="bg-gray-50 rounded-lg p-4 mt-6">
+                                    <p className="text-lg">
+                                        <span className="font-medium">Pro tip:</span> While we'll generate your project summary last, it should appear first in your final document. This ensures it captures the essence of your complete proposal.
+                                    </p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                {/* Section Navigation */}
+                    <div className="mb-6 border-b border-gray-200">
+                        <nav className="flex space-x-4" aria-label="Sections">
+                            {sections.map((section) => (
+                                <button
+                                    key={section.id}
+                                    onClick={() => setActiveSection(section.id)}
+                                    className={`
+                                        py-4 px-1 border-b-2 font-medium text-lg
+                                        ${activeSection === section.id
+                                            ? 'border-teal-500 text-teal-600'
+                                            : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
+                                        }
+                                    `}
+                                >
+                                    <section.icon className="h-5 w-5 inline-block mr-2" />
+                                    {section.label}
+                                </button>
+                            ))}
+                        </nav>
+                    </div>
+
+                    {/* Navigation and Section Content */}
+                    <div>                      
+                        {/* Project Narrative Section */}
+                        {activeSection === 'projectNarrative' && (
+                        <ProjectNarrativeSection/> )}
+                    </div>
+                    {/* Similar patterns for Budget and Summary sections */}
+                </div>
+            </main>
+        </div>
+    );
+}
\ No newline at end of file

From 3dd2cf1c0ca5b030487f4b484eff4d8c7dcdf2c1 Mon Sep 17 00:00:00 2001
From: Njeriiii <joymwenjwa@gmail.com>
Date: Mon, 3 Feb 2025 15:53:31 -0800
Subject: [PATCH 02/13] contd org info section & backend routes

---
 Backend/app/__init__.py                       |   2 +
 Backend/app/claude/__init__.py                |   0
 Backend/app/claude/routes.py                  | 122 ++++++
 Backend/app/config.py                         |   3 +
 .../OrganizationInfoSection.js                | 382 ++++++++++++++++++
 .../ProjectNarrativeSection.js                |   2 +-
 Frontend/src/pages/ProposalBuilderPage.js     |   8 +-
 docker-compose.dev.yml                        |   2 +
 8 files changed, 518 insertions(+), 3 deletions(-)
 create mode 100644 Backend/app/claude/__init__.py
 create mode 100644 Backend/app/claude/routes.py
 create mode 100644 Frontend/src/components/ProposalBuilderComponents/OrganizationInfoSection.js

diff --git a/Backend/app/__init__.py b/Backend/app/__init__.py
index 434a2ac..2163748 100644
--- a/Backend/app/__init__.py
+++ b/Backend/app/__init__.py
@@ -101,9 +101,11 @@ def invalid_token_callback(error_string):
     from app.auth.routes import auth as auth_blueprint
     from app.profile.routes import profile as profile_blueprint
     from app.main.routes import main as main_blueprint
+    from app.claude.routes import claude as claude_blueprint
 
     app.register_blueprint(auth_blueprint)
     app.register_blueprint(profile_blueprint)
     app.register_blueprint(main_blueprint)
+    app.register_blueprint(claude_blueprint)
 
     return app
diff --git a/Backend/app/claude/__init__.py b/Backend/app/claude/__init__.py
new file mode 100644
index 0000000..e69de29
diff --git a/Backend/app/claude/routes.py b/Backend/app/claude/routes.py
new file mode 100644
index 0000000..6e2dd36
--- /dev/null
+++ b/Backend/app/claude/routes.py
@@ -0,0 +1,122 @@
+from flask import Blueprint, request, jsonify
+from flask_jwt_extended import jwt_required, get_jwt_identity
+from anthropic import Anthropic, APIError
+import httpx
+import os
+import logging
+import sys
+
+# Set up logging
+logging.basicConfig(level=logging.INFO)
+logger = logging.getLogger(__name__)
+
+claude = Blueprint("claude", __name__)
+
+# Get API key
+logger.info("Current directory: %s", os.getcwd())
+logger.info("Python path: %s", sys.path)
+logger.info("Environment variables: %s", 
+    {k: v for k, v in os.environ.items() if 'KEY' in k or 'SECRET' in k or 'PASSWORD' in k})
+api_key = os.environ.get('ANTHROPIC_API_KEY')
+logger.info(f"API Key present: {bool(api_key)}")
+
+try:
+    client = httpx.Client()
+    anthropic = Anthropic(
+        api_key=api_key,
+        http_client=client
+    )
+    logger.info("Anthropic client initialized successfully")
+    logger.info(f"Anthropic client: {anthropic}")
+    logger.info("Api key: " + api_key)
+except Exception as e:
+    logger.error(f"Failed to initialize Anthropic client: {str(e)}")
+    anthropic = None
+
+@claude.route('/claude/generate', methods=['POST'])
+def generate_content():
+    """
+    Generate proposal content using Claude AI.
+    """
+    # Log request received
+    logger.info("Received generation request")
+    
+    # Check API key first
+    if not api_key:
+        logger.error("No API key found")
+        return jsonify({
+            'error': 'API key not configured',
+            'api_status': 'missing'
+        }), 500
+
+    # Check client initialization
+    if not anthropic:
+        logger.error("Anthropic client not initialized")
+        return jsonify({
+            'error': 'Anthropic client not initialized',
+            'api_status': 'client_error'
+        }), 500
+
+    try:
+        # Get and validate request data
+        data = request.get_json()
+        if not data:
+            logger.error("No JSON data in request")
+            return jsonify({'error': 'No JSON data provided'}), 400
+            
+        if 'prompt' not in data or 'section' not in data:
+            logger.error(f"Missing required fields. Received fields: {data.keys()}")
+            return jsonify({'error': 'Missing required fields: prompt and/or section'}), 400
+
+        logger.info(f"Generating content for section: {data['section']}")
+        
+        try:
+            # Generate content using Claude
+            message = anthropic.messages.create(
+                model="claude-3-haiku-20240307",
+                max_tokens=1500,
+                messages=[{
+                    "role": "user",
+                    "content": data['prompt']
+                }],
+                temperature=0.7,
+            )
+            
+            if not message.content:
+                logger.error("No content generated")
+                return jsonify({
+                    'error': 'Content generation failed',
+                    'api_status': 'generation_error'
+                }), 500
+
+            generated_content = message.content[0].text
+            logger.info("Content generated successfully")
+
+            return jsonify({
+                'content': generated_content,
+                'status': 'success'
+            }), 200
+
+        except APIError as ae:
+            logger.error(f"Anthropic API error: {str(ae)}")
+            return jsonify({
+                'error': 'Anthropic API error',
+                'details': str(ae),
+                'api_status': 'api_error'
+            }), 500
+            
+        except Exception as e:
+            logger.error(f"Generation error: {str(e)}")
+            return jsonify({
+                'error': 'Content generation failed',
+                'details': str(e),
+                'api_status': 'generation_error'
+            }), 500
+
+    except Exception as e:
+        logger.error(f"Request processing error: {str(e)}")
+        return jsonify({
+            'error': 'Request processing failed',
+            'details': str(e),
+            'api_status': 'request_error'
+        }), 500
\ No newline at end of file
diff --git a/Backend/app/config.py b/Backend/app/config.py
index 27d1262..939f8c0 100644
--- a/Backend/app/config.py
+++ b/Backend/app/config.py
@@ -86,6 +86,9 @@ class AppConfig:
     GOOGLE_CLOUD_PROJECT = os.getenv("GOOGLE_CLOUD_PROJECT")
     GOOGLE_APPLICATION_CREDENTIALS = os.getenv("GOOGLE_APPLICATION_CREDENTIALS")
 
+    # Anthropic API key
+    ANTHROPIC_API_KEY = os.getenv('ANTHROPIC_API_KEY')
+
 class TestConfig(AppConfig):
     SQLALCHEMY_DATABASE_URI = "sqlite://"
     TESTING = True
diff --git a/Frontend/src/components/ProposalBuilderComponents/OrganizationInfoSection.js b/Frontend/src/components/ProposalBuilderComponents/OrganizationInfoSection.js
new file mode 100644
index 0000000..21117c1
--- /dev/null
+++ b/Frontend/src/components/ProposalBuilderComponents/OrganizationInfoSection.js
@@ -0,0 +1,382 @@
+import React, { useState, useEffect } from 'react';
+import { BuildingOfficeIcon, ArrowPathIcon } from '@heroicons/react/24/outline';
+import { useApi } from '../../contexts/ApiProvider';
+import { useAuth } from '../../contexts/AuthProvider';
+
+/**
+ * OrganizationInfoSection
+ * 
+ * Displays and manages organization information for grant proposals.
+ * Loads data from the API and allows for proposal-specific additions.
+ * 
+ * Features:
+ * - Uses auth context for user identification
+ * - Loads existing org profile data from API
+ * - Displays loading states and error handling
+ * - Allows additional proposal-specific details
+ * - Generates AI-enhanced content for grant proposals
+ * - Saves to localStorage for proposal persistence
+ */
+export default function OrganizationInfoSection() {
+    const apiClient = useApi();
+    const { user } = useAuth();
+    const userId = user ? user.id : null;
+    
+    const [loading, setLoading] = useState(true);
+    const [orgData, setOrgData] = useState(null);
+    const [isGenerating, setIsGenerating] = useState(false);
+    const [error, setError] = useState(null);
+    const [generatedContent, setGeneratedContent] = useState('');
+
+    // State for form inputs, will be populated with org data
+    const [inputs, setInputs] = useState({
+        // Basic Info (pre-populated)
+        orgName: '',
+        yearEstablished: '',
+        registrationNumber: '',
+        missionStatement: '',
+        
+        // Contact Info (pre-populated)
+        location: {
+            country: '',
+            county: '',
+            district: ''
+        },
+        contact: {
+            email: '',
+            phone: '',
+            website: ''
+        },
+
+        // Grant-Specific Info (user input)
+        grantSpecific: {
+            orgCapacity: '',
+            previousGrants: '',
+            successStories: '',
+            teamQualifications: '',
+            partnershipHistory: '',
+            relevantInitiatives: '',
+            ongoingProjects: ''
+        }
+    });
+
+    // Load org data when userId is available
+    useEffect(() => {
+        const loadOrgData = async () => {
+            if (!userId) {
+                setLoading(false);
+                return;
+            }
+
+            try {
+                const response = await apiClient.get(`/profile/load_org?user_id=${userId}`);
+                
+                if (response.ok) {
+                    setOrgData(response.body);
+                    
+                    // Update inputs with loaded data
+                    const { orgProfile, orgInitiatives, orgProjects } = response.body;
+                    
+                    setInputs(prev => ({
+                        ...prev,
+                        orgName: orgProfile.org_name,
+                        yearEstablished: orgProfile.org_year_established,
+                        registrationNumber: orgProfile.org_registration_number,
+                        missionStatement: orgProfile.org_mission_statement,
+                        location: {
+                            country: orgProfile.org_country,
+                            county: orgProfile.org_county,
+                            district: orgProfile.org_district_town
+                        },
+                        contact: {
+                            email: orgProfile.org_email,
+                            phone: orgProfile.org_phone,
+                            website: orgProfile.org_website || ''
+                        },
+                        // Pre-populate relevant initiatives and projects
+                        grantSpecific: {
+                            ...prev.grantSpecific,
+                            relevantInitiatives: orgInitiatives
+                                .map(init => `${init.initiative_name}: ${init.initiative_description}`)
+                                .join('\n\n'),
+                            ongoingProjects: orgProjects
+                                .filter(proj => proj.project_status === 'ongoing')
+                                .map(proj => `${proj.project_name}: ${proj.project_description}`)
+                                .join('\n\n')
+                        }
+                    }));
+                } else {
+                    setError("Failed to load organization data");
+                    console.error("Error fetching data: ", response.body);
+                }
+            } catch (error) {
+                setError("Error connecting to server");
+                console.error("Error fetching data: ", error);
+            } finally {
+                setLoading(false);
+            }
+        };
+
+        loadOrgData();
+    }, [apiClient, userId]);
+
+    const handleInputChange = (section, field, value) => {
+        setInputs(prev => ({
+            ...prev,
+            [section]: section === 'grantSpecific' || section === 'location' || section === 'contact'
+                ? { ...prev[section], [field]: value }
+                : value
+        }));
+    };
+
+    const handleGenerate = async () => {
+        setIsGenerating(true);
+        setError(null);
+
+        try {
+            const prompt = `Create a professional organization background section for a grant proposal using the following information:
+
+            Organization Name: ${inputs.orgName}
+            Year Established: ${inputs.yearEstablished}
+            Registration: ${inputs.registrationNumber}
+            Mission: ${inputs.missionStatement}
+
+            Location: ${inputs.location.district}, ${inputs.location.county}, ${inputs.location.country}
+
+            Current Initiatives:
+            ${inputs.grantSpecific.relevantInitiatives}
+
+            Ongoing Projects:
+            ${inputs.grantSpecific.ongoingProjects}
+
+            Additional Context:
+            Organizational Capacity: ${inputs.grantSpecific.orgCapacity}
+            Previous Grants: ${inputs.grantSpecific.previousGrants}
+            Success Stories: ${inputs.grantSpecific.successStories}
+            Team Qualifications: ${inputs.grantSpecific.teamQualifications}
+            Partnership History: ${inputs.grantSpecific.partnershipHistory}
+
+            Please create a compelling narrative that:
+            1. Establishes organizational credibility
+            2. Highlights relevant experience and success
+            3. Demonstrates capacity to implement projects
+            4. Showcases strong governance and accountability
+            5. Uses professional grant writing language`;
+
+            const response = await apiClient.post('/claude/generate', {
+                prompt,
+                section: 'organizationInfo'
+            });
+
+            console.log('Generated content:', response);
+
+            setGeneratedContent(response.body.content);
+            console.log('generatedContent:', generatedContent);
+            localStorage.setItem('organizationContent', response.body.content);
+
+        } catch (error) {
+            console.error('Generation failed:', error);
+            setError('Failed to generate content. Please try again.');
+        } finally {
+            setIsGenerating(false);
+        }
+    };
+
+    if (loading) {
+        return (
+            <div className="flex justify-center items-center h-64">
+                <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-teal-500"></div>
+            </div>
+        );
+    }
+
+    if (!userId) {
+        return (
+            <div className="bg-yellow-50 border border-yellow-200 rounded-lg p-4">
+                <p className="text-yellow-800">
+                    Please log in to access organization information.
+                </p>
+            </div>
+        );
+    }
+
+    return (
+        <div className="bg-white rounded-lg shadow-md p-6">
+            <h2 className="text-2xl font-bold text-gray-900 mb-6">Organization Information</h2>
+            
+            {error && (
+                <div className="mb-6 bg-red-50 border border-red-200 text-red-600 px-4 py-3 rounded-lg">
+                    {error}
+                </div>
+            )}
+
+            <div className="space-y-8">
+                {/* Information Notice */}
+                <div className="mb-8 bg-blue-50 border border-blue-200 rounded-lg p-4">
+                    <p className="text-blue-800">
+                        This section builds upon your organization's existing profile information. The following fields are optional 
+                        and should only be filled if they provide additional context specific to this grant application. 
+                        If the information is already covered in your organization profile, you may leave these fields blank.
+                    </p>
+                </div>
+
+                {/* Pre-populated Organization Information */}
+                <div className="border-b border-gray-200 pb-6">
+                    <h3 className="text-xl font-medium text-gray-900 mb-4">Basic Information</h3>
+                    <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                        <div>
+                            <label className="block text-m font-medium text-gray-700">Organization Name</label>
+                            <input
+                                type="text"
+                                value={inputs.orgName}
+                                className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-teal-500 focus:ring-teal-500"
+                                readOnly
+                            />
+                        </div>
+                        <div>
+                            <label className="block text-m font-medium text-gray-700">Year Established</label>
+                            <input
+                                type="text"
+                                value={inputs.yearEstablished}
+                                className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-teal-500 focus:ring-teal-500"
+                                readOnly
+                            />
+                        </div>
+                    </div>
+                </div>
+
+                {/* Current Initiatives & Projects */}
+                <div className="border-b border-gray-200 pb-6">
+                    <h3 className="text-xl font-medium text-gray-900 mb-4">Current Work</h3>
+                    <div className="space-y-4">
+                        <div>
+                            <label className="block text-m font-medium text-gray-700">
+                                Relevant Initiatives
+                            </label>
+                            <textarea
+                                value={inputs.grantSpecific.relevantInitiatives}
+                                onChange={(e) => handleInputChange('grantSpecific', 'relevantInitiatives', e.target.value)}
+                                rows={4}
+                                className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-teal-500 focus:ring-teal-500"
+                            />
+                        </div>
+                        <div>
+                            <label className="block text-m font-medium text-gray-700">
+                                Ongoing Projects
+                            </label>
+                            <textarea
+                                value={inputs.grantSpecific.ongoingProjects}
+                                onChange={(e) => handleInputChange('grantSpecific', 'ongoingProjects', e.target.value)}
+                                rows={4}
+                                className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-teal-500 focus:ring-teal-500"
+                            />
+                        </div>
+                    </div>
+                </div>
+
+                {/* Grant-Specific Information */}
+                <div className="border-b border-gray-200 pb-6">
+                    <h3 className="text-xl font-medium text-gray-900 mb-4">Additional Grant-Specific Details (Optional)</h3>
+                    <div className="space-y-4">
+                        <div>
+                            <label className="block text-m font-medium text-gray-700">
+                                Project-Specific Organizational Capacity
+                            </label>
+                            <textarea
+                                value={inputs.grantSpecific.orgCapacity}
+                                onChange={(e) => handleInputChange('grantSpecific', 'orgCapacity', e.target.value)}
+                                placeholder="If relevant, describe any additional capacity specific to this project..."
+                                rows={3}
+                                className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-teal-500 focus:ring-teal-500"
+                            />
+                        </div>
+                        <div>
+                            <label className="block text-m font-medium text-gray-700">
+                                Relevant Grant Experience
+                            </label>
+                            <textarea
+                                value={inputs.grantSpecific.previousGrants}
+                                onChange={(e) => handleInputChange('grantSpecific', 'previousGrants', e.target.value)}
+                                placeholder="If applicable, mention specific grants relevant to this application..."
+                                rows={3}
+                                className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-teal-500 focus:ring-teal-500"
+                            />
+                        </div>
+                        <div>
+                            <label className="block text-m font-medium text-gray-700">
+                                Project-Specific Success Stories
+                            </label>
+                            <textarea
+                                value={inputs.grantSpecific.successStories}
+                                onChange={(e) => handleInputChange('grantSpecific', 'successStories', e.target.value)}
+                                placeholder="If relevant, share success stories related to similar projects..."
+                                rows={3}
+                                className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-teal-500 focus:ring-teal-500"
+                            />
+                        </div>
+                        <div>
+                            <label className="block text-m font-medium text-gray-700">
+                                Additional Team Qualifications
+                            </label>
+                            <textarea
+                                value={inputs.grantSpecific.teamQualifications}
+                                onChange={(e) => handleInputChange('grantSpecific', 'teamQualifications', e.target.value)}
+                                placeholder="If applicable, mention specific team qualifications relevant to this project..."
+                                rows={3}
+                                className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-teal-500 focus:ring-teal-500"
+                            />
+                        </div>
+                        <div>
+                            <label className="block text-m font-medium text-gray-700">
+                                Relevant Partnership History
+                            </label>
+                            <textarea
+                                value={inputs.grantSpecific.partnershipHistory}
+                                onChange={(e) => handleInputChange('grantSpecific', 'partnershipHistory', e.target.value)}
+                                placeholder="If applicable, describe partnerships relevant to this specific project..."
+                                rows={3}
+                                className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-teal-500 focus:ring-teal-500"
+                            />
+                        </div>
+                    </div>
+                </div>
+
+                {/* Generate Button */}
+                <button
+                    onClick={handleGenerate}
+                    disabled={isGenerating}
+                    className="mt-6 inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-teal-600 hover:bg-teal-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-teal-500 disabled:opacity-50"
+                >
+                    {isGenerating ? (
+                        <>
+                            <ArrowPathIcon className="animate-spin h-5 w-5 mr-2" />
+                            Generating...
+                        </>
+                    ) : (
+                        <>
+                            <BuildingOfficeIcon className="h-5 w-5 mr-2" />
+                            Generate Organization Section
+                        </>
+                    )}
+                </button>
+            </div>
+            
+
+            {/* Display generated content */}
+            {generatedContent && (
+                <div className="prose max-w-none mt-6">
+                    <div className="bg-gray-50 rounded-lg p-6">
+                        {generatedContent}
+                    </div>
+                    <button
+                        onClick={handleGenerate}
+                        className="mt-4 inline-flex items-center px-4 py-2 border border-gray-300 text-m font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"
+                    >
+                        <ArrowPathIcon className="h-4 w-4 mr-2" />
+                        Regenerate
+                    </button>
+                </div>
+            )}
+        </div>
+    );
+}
\ No newline at end of file
diff --git a/Frontend/src/components/ProposalBuilderComponents/ProjectNarrativeSection.js b/Frontend/src/components/ProposalBuilderComponents/ProjectNarrativeSection.js
index f490967..a60d2a6 100644
--- a/Frontend/src/components/ProposalBuilderComponents/ProjectNarrativeSection.js
+++ b/Frontend/src/components/ProposalBuilderComponents/ProjectNarrativeSection.js
@@ -219,7 +219,7 @@ export default function ProjectNarrativeSection({ }) {
 
             const response = await apiClient.post('/claude/generate', {
                 prompt,
-                section: 'narrative'
+                section: 'projectNarrative'
             });
 
             setGeneratedContent(response.content);
diff --git a/Frontend/src/pages/ProposalBuilderPage.js b/Frontend/src/pages/ProposalBuilderPage.js
index 378d21e..61589b9 100644
--- a/Frontend/src/pages/ProposalBuilderPage.js
+++ b/Frontend/src/pages/ProposalBuilderPage.js
@@ -6,6 +6,7 @@ import {
     DocumentTextIcon
 } from '@heroicons/react/24/outline';
 import ProjectNarrativeSection from '../components/ProposalBuilderComponents/ProjectNarrativeSection';
+import OrganizationInfoSection from '../components/ProposalBuilderComponents/OrganizationInfoSection';
 import Header from '../components/Header';
 
 /**
@@ -31,7 +32,7 @@ export default function ProposalBuilder() {
     const [activeSection, setActiveSection] = useState('organization');
 
     const sections = [
-        { id: 'organization', label: 'Organization Information', icon: BuildingOfficeIcon },
+        { id: 'organizationInfo', label: 'Organization Information', icon: BuildingOfficeIcon },
         { id: 'projectNarrative', label: 'Project Narrative', icon: DocumentIcon },
         { id: 'budget', label: 'Budget', icon: CurrencyDollarIcon },
         { id: 'summary', label: 'Project Summary', icon: DocumentTextIcon }
@@ -93,8 +94,11 @@ export default function ProposalBuilder() {
                         {/* Project Narrative Section */}
                         {activeSection === 'projectNarrative' && (
                         <ProjectNarrativeSection/> )}
+
+                        {/* Organization Information Section */}
+                        {activeSection === 'organizationInfo' && (
+                        <OrganizationInfoSection/> )}
                     </div>
-                    {/* Similar patterns for Budget and Summary sections */}
                 </div>
             </main>
         </div>
diff --git a/docker-compose.dev.yml b/docker-compose.dev.yml
index 56c56e6..b6085bf 100644
--- a/docker-compose.dev.yml
+++ b/docker-compose.dev.yml
@@ -28,6 +28,8 @@ services:
       - PORT=5162
       - DEBUG=True
       - GOOGLE_APPLICATION_CREDENTIALS=/app/credentials/google-credentials.json
+    env_file:
+      - ./Backend/.env
     volumes:
       - ./backend:/app
       - ./Backend/flawless-snow-443501-q3-85e4441a1dd7.json:/app/credentials/google-credentials.json

From a1640b9b324b882b5a80e92556fd01c8f8046909 Mon Sep 17 00:00:00 2001
From: Njeriiii <joymwenjwa@gmail.com>
Date: Thu, 6 Feb 2025 11:08:53 -0800
Subject: [PATCH 03/13] improved UI

---
 .../GeneratedContent.js                       | 141 ++++++++++++++++++
 .../OrganizationInfoSection.js                |  27 ++--
 Frontend/src/pages/ProposalBuilderPage.js     |   2 +-
 3 files changed, 157 insertions(+), 13 deletions(-)
 create mode 100644 Frontend/src/components/ProposalBuilderComponents/GeneratedContent.js

diff --git a/Frontend/src/components/ProposalBuilderComponents/GeneratedContent.js b/Frontend/src/components/ProposalBuilderComponents/GeneratedContent.js
new file mode 100644
index 0000000..74c38a8
--- /dev/null
+++ b/Frontend/src/components/ProposalBuilderComponents/GeneratedContent.js
@@ -0,0 +1,141 @@
+import React, { useState, useEffect } from 'react';
+import { ArrowPathIcon, DocumentDuplicateIcon, CheckIcon, TrashIcon } from '@heroicons/react/24/outline';
+// import { Alert, AlertDescription } from '@/components/ui/alert';
+
+const GeneratedContent = ({ content, onRegenerate }) => {
+    // State for managing content display and interactions
+    const [copied, setCopied] = useState(false);
+    const [localContent, setLocalContent] = useState('');
+    const [isRegenerating, setIsRegenerating] = useState(false);
+    const [showAlert, setShowAlert] = useState(false);
+
+    // Load content from localStorage on mount and when content prop changes
+    useEffect(() => {
+        const storedContent = localStorage.getItem('organizationContent');
+        setLocalContent(content || storedContent || '');
+    }, [content]);
+
+    // Format content with proper line breaks and spacing
+    const formatContent = (text) => {
+        if (!text) return null;
+        
+        const paragraphs = text.split('\n\n');
+        return paragraphs.map((paragraph, index) => {
+            const lines = paragraph.split('\n');
+            return (
+                <div key={index} className="mb-4">
+                    {lines.map((line, lineIndex) => (
+                        <React.Fragment key={lineIndex}>
+                            {line}
+                            {lineIndex < lines.length - 1 && <br />}
+                        </React.Fragment>
+                    ))}
+                </div>
+            );
+        });
+    };
+
+    // Handle copying content to clipboard
+    const handleCopy = async () => {
+        try {
+            await navigator.clipboard.writeText(localContent);
+            setCopied(true);
+            setTimeout(() => setCopied(false), 2000);
+        } catch (err) {
+            console.error('Failed to copy text:', err);
+            setShowAlert(true);
+        }
+    };
+
+    // Handle regeneration of content
+    const handleRegenerate = () => {
+        setIsRegenerating(true);
+        onRegenerate();
+        // Reset states after regeneration starts
+        setLocalContent('');
+        setIsRegenerating(false);
+    };
+
+    // Clear content from localStorage
+    const handleClear = () => {
+        localStorage.removeItem('organizationContent');
+        setLocalContent('');
+        setShowAlert(true);
+        setTimeout(() => setShowAlert(false), 3000);
+    };
+
+    // Don't render if no content available
+    if (!localContent) {
+        return null;
+    }
+
+    return (
+        <div className="mt-8 bg-white border border-gray-200 rounded-xl shadow-sm">
+            {/* Alert for notifications */}
+            {/* {showAlert && (
+                // <Alert className="mb-4">
+                //     <AlertDescription>
+                //         {copied ? 'Content copied to clipboard!' : 'Content cleared from storage!'}
+                //     </AlertDescription>
+                // </Alert>
+            )} */}
+
+            {/* Header */}
+            <div className="px-6 py-4 border-b border-gray-200">
+                <h3 className="text-lg font-semibold text-gray-900">
+                    Generated Content
+                </h3>
+            </div>
+
+            {/* Content */}
+            <div className="px-6 py-4">
+                <div className="prose max-w-none">
+                    {formatContent(localContent)}
+                </div>
+            </div>
+
+            {/* Footer with actions */}
+            <div className="px-6 py-4 bg-gray-50 border-t border-gray-200 rounded-b-xl">
+                <div className="flex justify-between items-center">
+                    <div className="flex gap-2">
+                        <button
+                            onClick={handleRegenerate}
+                            disabled={isRegenerating}
+                            className="inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-teal-500 disabled:opacity-50"
+                        >
+                            <ArrowPathIcon className={`h-4 w-4 mr-2 ${isRegenerating ? 'animate-spin' : ''}`} />
+                            {isRegenerating ? 'Regenerating...' : 'Regenerate'}
+                        </button>
+
+                        <button
+                            onClick={handleClear}
+                            className="inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-red-600 bg-white hover:bg-red-50 hover:border-red-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500"
+                        >
+                            <TrashIcon className="h-4 w-4 mr-2" />
+                            Clear Saved
+                        </button>
+                    </div>
+
+                    <button
+                        onClick={handleCopy}
+                        className="inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-teal-500"
+                    >
+                        {copied ? (
+                            <>
+                                <CheckIcon className="h-4 w-4 mr-2 text-green-500" />
+                                Copied!
+                            </>
+                        ) : (
+                            <>
+                                <DocumentDuplicateIcon className="h-4 w-4 mr-2" />
+                                Copy to Clipboard
+                            </>
+                        )}
+                    </button>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default GeneratedContent;
\ No newline at end of file
diff --git a/Frontend/src/components/ProposalBuilderComponents/OrganizationInfoSection.js b/Frontend/src/components/ProposalBuilderComponents/OrganizationInfoSection.js
index 21117c1..be2c996 100644
--- a/Frontend/src/components/ProposalBuilderComponents/OrganizationInfoSection.js
+++ b/Frontend/src/components/ProposalBuilderComponents/OrganizationInfoSection.js
@@ -2,6 +2,7 @@ import React, { useState, useEffect } from 'react';
 import { BuildingOfficeIcon, ArrowPathIcon } from '@heroicons/react/24/outline';
 import { useApi } from '../../contexts/ApiProvider';
 import { useAuth } from '../../contexts/AuthProvider';
+import GeneratedContent from './GeneratedContent';
 
 /**
  * OrganizationInfoSection
@@ -28,6 +29,14 @@ export default function OrganizationInfoSection() {
     const [error, setError] = useState(null);
     const [generatedContent, setGeneratedContent] = useState('');
 
+    // Load stored content from localStorage on mount
+    useEffect(() => {
+        const storedContent = localStorage.getItem('organizationContent');
+        if (storedContent) {
+            setGeneratedContent(storedContent);
+        }
+    }, []);
+
     // State for form inputs, will be populated with org data
     const [inputs, setInputs] = useState({
         // Basic Info (pre-populated)
@@ -200,6 +209,8 @@ export default function OrganizationInfoSection() {
         );
     }
 
+    console.log('generatedContent:', generatedContent);
+
     return (
         <div className="bg-white rounded-lg shadow-md p-6">
             <h2 className="text-2xl font-bold text-gray-900 mb-6">Organization Information</h2>
@@ -364,18 +375,10 @@ export default function OrganizationInfoSection() {
 
             {/* Display generated content */}
             {generatedContent && (
-                <div className="prose max-w-none mt-6">
-                    <div className="bg-gray-50 rounded-lg p-6">
-                        {generatedContent}
-                    </div>
-                    <button
-                        onClick={handleGenerate}
-                        className="mt-4 inline-flex items-center px-4 py-2 border border-gray-300 text-m font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"
-                    >
-                        <ArrowPathIcon className="h-4 w-4 mr-2" />
-                        Regenerate
-                    </button>
-                </div>
+                <GeneratedContent 
+                    content={generatedContent}
+                    onRegenerate={handleGenerate}
+                />
             )}
         </div>
     );
diff --git a/Frontend/src/pages/ProposalBuilderPage.js b/Frontend/src/pages/ProposalBuilderPage.js
index 61589b9..55095d8 100644
--- a/Frontend/src/pages/ProposalBuilderPage.js
+++ b/Frontend/src/pages/ProposalBuilderPage.js
@@ -29,7 +29,7 @@ import Header from '../components/Header';
  * Content is saved to localStorage for persistence between sessions.
  */
 export default function ProposalBuilder() {
-    const [activeSection, setActiveSection] = useState('organization');
+    const [activeSection, setActiveSection] = useState('organizationInfo');
 
     const sections = [
         { id: 'organizationInfo', label: 'Organization Information', icon: BuildingOfficeIcon },

From 0f490afc7e2e8fb9c2c65a93403592757cc02627 Mon Sep 17 00:00:00 2001
From: Njeriiii <joymwenjwa@gmail.com>
Date: Mon, 10 Feb 2025 13:11:30 -0800
Subject: [PATCH 04/13] update requirements

---
 Backend/requirements.dev.txt  | 1 +
 Backend/requirements.prod.txt | 1 +
 2 files changed, 2 insertions(+)

diff --git a/Backend/requirements.dev.txt b/Backend/requirements.dev.txt
index 49f0f44..862e198 100644
--- a/Backend/requirements.dev.txt
+++ b/Backend/requirements.dev.txt
@@ -1,4 +1,5 @@
 # Core dependencies
+anthropic>=0.10.0
 bcrypt>=4.0.1
 Flask>=2.2.3
 Flask-Bcrypt>=1.0.1
diff --git a/Backend/requirements.prod.txt b/Backend/requirements.prod.txt
index ad8fa51..d146c8b 100644
--- a/Backend/requirements.prod.txt
+++ b/Backend/requirements.prod.txt
@@ -1,4 +1,5 @@
 # Core dependencies
+anthropic>=0.10.0
 bcrypt==4.0.1
 Flask==2.2.3
 Flask-Bcrypt==1.0.1

From 2a050595ad423cc294f3a2050cfd473f0e3a1b97 Mon Sep 17 00:00:00 2001
From: Njeriiii <joymwenjwa@gmail.com>
Date: Mon, 3 Feb 2025 15:53:31 -0800
Subject: [PATCH 05/13] contd org info section & backend routes

---
 Backend/app/config.py | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/Backend/app/config.py b/Backend/app/config.py
index 3b077b5..35f0a25 100644
--- a/Backend/app/config.py
+++ b/Backend/app/config.py
@@ -90,6 +90,9 @@ class AppConfig:
     # Anthropic API key
     ANTHROPIC_API_KEY = os.getenv('ANTHROPIC_API_KEY')
 
+    # Anthropic API key
+    ANTHROPIC_API_KEY = os.getenv('ANTHROPIC_API_KEY')
+
 class TestConfig(AppConfig):
     SQLALCHEMY_DATABASE_URI = "sqlite://"
     TESTING = True

From 213ddfa8814e21426e42ef51655038aca2c72635 Mon Sep 17 00:00:00 2001
From: Njeriiii <joymwenjwa@gmail.com>
Date: Mon, 17 Feb 2025 14:23:34 -0800
Subject: [PATCH 06/13] fix config.py

---
 Backend/app/config.py | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/Backend/app/config.py b/Backend/app/config.py
index 35f0a25..3b077b5 100644
--- a/Backend/app/config.py
+++ b/Backend/app/config.py
@@ -90,9 +90,6 @@ class AppConfig:
     # Anthropic API key
     ANTHROPIC_API_KEY = os.getenv('ANTHROPIC_API_KEY')
 
-    # Anthropic API key
-    ANTHROPIC_API_KEY = os.getenv('ANTHROPIC_API_KEY')
-
 class TestConfig(AppConfig):
     SQLALCHEMY_DATABASE_URI = "sqlite://"
     TESTING = True

From f68b756d9aac6e2b3237c639b5d55dee8744d42f Mon Sep 17 00:00:00 2001
From: Njeriiii <joymwenjwa@gmail.com>
Date: Mon, 17 Feb 2025 15:06:23 -0800
Subject: [PATCH 07/13] improving UX and UI of projectNarrative

---
 .../ProjectNarrativeSection.js                | 99 ++++++++++---------
 1 file changed, 53 insertions(+), 46 deletions(-)

diff --git a/Frontend/src/components/ProposalBuilderComponents/ProjectNarrativeSection.js b/Frontend/src/components/ProposalBuilderComponents/ProjectNarrativeSection.js
index a60d2a6..4c10f77 100644
--- a/Frontend/src/components/ProposalBuilderComponents/ProjectNarrativeSection.js
+++ b/Frontend/src/components/ProposalBuilderComponents/ProjectNarrativeSection.js
@@ -4,7 +4,7 @@ import {
     ArrowPathIcon,
 } from '@heroicons/react/24/outline';
 import { useApi } from '../../contexts/ApiProvider';
-
+import GeneratedContent from './GeneratedContent';
 /**
  * ProjectNarrativeSection
  * 
@@ -23,7 +23,15 @@ export default function ProjectNarrativeSection({ }) {
     const [generatedContent, setGeneratedContent] = useState('');
     const [isGenerating, setIsGenerating] = useState(false);
     const [error, setError] = useState(null);
-    const { apiClient } = useApi();
+    const apiClient = useApi();
+
+    // Load stored content from localStorage on mount
+    useEffect(() => {
+        const storedContent = localStorage.getItem('projectNarrative');
+        if (storedContent) {
+            setGeneratedContent(storedContent);
+        }
+    }, []);
 
     const [inputs, setInputs] = useState({
         problem: {
@@ -175,8 +183,6 @@ export default function ProjectNarrativeSection({ }) {
         setIsGenerating(true);
         setError(null);
 
-        console.log('inputs:', inputs);
-
         try {
             // Get previous content for context
             const orgContent = localStorage.getItem('organizationContent');
@@ -222,9 +228,9 @@ export default function ProjectNarrativeSection({ }) {
                 section: 'projectNarrative'
             });
 
-            setGeneratedContent(response.content);
-            localStorage.setItem('projectNarrativeContent', response.content);
-
+            setGeneratedContent(response.body.content);
+            localStorage.setItem("projectNarrative", response.body.content);
+            
         } catch (error) {
             console.error('Generation failed:', error);
             setError('Failed to generate content. Please try again.');
@@ -237,10 +243,28 @@ export default function ProjectNarrativeSection({ }) {
     return (
         <div className="bg-white rounded-lg shadow-md p-6">
             <h2 className="text-2xl font-bold text-gray-900 mb-6">Project Narrative</h2>
+
+            {/* Information Notice */}
+                <div className="mb-8 bg-blue-50 border border-blue-200 rounded-lg p-4">
+                    <p className="text-blue-800 font-normal">
+                        <ul className="list-disc list-inside">
+                            <li><span class="font-bold">Be thorough and specific</span> in your responses.</li>
+                            <li><span class="font-bold">Provide context</span> where necessary, and include relevant details to support your points.</li>
+                            <li><span class="font-bold">Ensure you highlight key information</span> that helps convey the urgency, impact, and effectiveness of your approach.</li>
+                            <li>Keep your answers clear and focused while making sure to address all aspects of the request.</li>
+                        </ul>
+                    </p>
+                </div>
+
+            {error && (
+                <div className="mb-6 bg-red-50 border border-red-200 text-red-600 px-4 py-3 rounded-lg">
+                    {error}
+                </div>
+            )}
             
             {/* Input Form */}
             <div className="space-y-8">
-                {!generatedContent && sections.map((section) => (
+                {sections.map((section) => (
                     <div key={section.title} className="border-b border-gray-200 pb-6">
                         <h3 className="text-xl font-medium text-gray-900 mb-4">
                             {section.title}
@@ -284,47 +308,30 @@ export default function ProjectNarrativeSection({ }) {
             </div>
 
             {/* Generate button that calls handleGenerate */}
-            {!generatedContent && (
-                <button
-                    onClick={handleGenerate}
-                    disabled={isGenerating}
-                    className="mt-6 inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-teal-600 hover:bg-teal-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-teal-500 disabled:opacity-50"
-                >
-                    {isGenerating ? (
-                        <>
-                            <ArrowPathIcon className="animate-spin h-5 w-5 mr-2" />
-                            Generating...
-                        </>
-                    ) : (
-                        <>
-                            <DocumentTextIcon className="h-5 w-5 mr-2" />
-                            Generate Narrative
-                        </>
-                    )}
-                </button>
-            )}
+            <button
+                onClick={handleGenerate}
+                disabled={isGenerating}
+                className="mt-6 inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-teal-600 hover:bg-teal-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-teal-500 disabled:opacity-50"
+            >
+                {isGenerating ? (
+                    <>
+                        <ArrowPathIcon className="animate-spin h-5 w-5 mr-2" />
+                        Generating...
+                    </>
+                ) : (
+                    <>
+                        <DocumentTextIcon className="h-5 w-5 mr-2" />
+                        Generate Narrative
+                    </>
+                )}
+            </button>
 
             {/* Display generated content */}
             {generatedContent && (
-                <div className="prose max-w-none mt-6">
-                    <div className="bg-gray-50 rounded-lg p-6">
-                        {generatedContent}
-                    </div>
-                    <button
-                        onClick={handleGenerate}
-                        className="mt-4 inline-flex items-center px-4 py-2 border border-gray-300 text-m font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"
-                    >
-                        <ArrowPathIcon className="h-4 w-4 mr-2" />
-                        Regenerate
-                    </button>
-                </div>
-            )}
-
-            {/* Error display */}
-            {error && (
-                <div className="mt-4 text-red-600 text-m">
-                    {error}
-                </div>
+                <GeneratedContent 
+                    content={generatedContent}
+                    onRegenerate={handleGenerate}
+                />
             )}
         </div>
     );

From 11280d20f83f3118df09ed9be8dfc21989b803ee Mon Sep 17 00:00:00 2001
From: Njeriiii <joymwenjwa@gmail.com>
Date: Mon, 17 Feb 2025 15:37:57 -0800
Subject: [PATCH 08/13] implement budget section

---
 .../ProposalBudgetSection.js                  | 290 ++++++++++++++++++
 Frontend/src/pages/ProposalBuilderPage.js     |   7 +-
 2 files changed, 296 insertions(+), 1 deletion(-)
 create mode 100644 Frontend/src/components/ProposalBuilderComponents/ProposalBudgetSection.js

diff --git a/Frontend/src/components/ProposalBuilderComponents/ProposalBudgetSection.js b/Frontend/src/components/ProposalBuilderComponents/ProposalBudgetSection.js
new file mode 100644
index 0000000..9971ff0
--- /dev/null
+++ b/Frontend/src/components/ProposalBuilderComponents/ProposalBudgetSection.js
@@ -0,0 +1,290 @@
+import React, { useState, useEffect } from 'react';
+import { 
+    CurrencyDollarIcon,
+    ArrowPathIcon,
+} from '@heroicons/react/24/outline';
+import { useApi } from '../../contexts/ApiProvider';
+import GeneratedContent from './GeneratedContent';
+
+/**
+ * ProposalBudgetSection
+ * 
+ * A flexible budget component that handles both specific grant requirements
+ * and open-ended proposals. Adapts to different funding situations and
+ * generates appropriate budget narratives.
+ */
+export default function ProposalBudgetSection() {
+    const [generatedContent, setGeneratedContent] = useState('');
+    const [isGenerating, setIsGenerating] = useState(false);
+    const [error, setError] = useState(null);
+    const apiClient = useApi();
+
+    // Initialize form state
+    const [inputs, setInputs] = useState({
+        grantType: 'open', // 'open' or 'specific'
+        grantRequirements: '', // For pasting specific grant budget requirements
+        budget: {
+            totalAmount: '',
+            breakdown: '', // Flexible text area for budget breakdown
+            justification: '' // Explanation of costs
+        },
+        sustainability: {
+            additionalFunding: '', // Other funding sources or plans
+            continuationPlan: '' // How the project will continue after funding
+        }
+    });
+
+    // Load stored content from localStorage on mount
+    useEffect(() => {
+        const storedContent = localStorage.getItem('proposalBudget');
+        if (storedContent) {
+            setGeneratedContent(storedContent);
+        }
+    }, []);
+
+    const handleInputChange = (section, field, value) => {
+        setInputs(prev => ({
+            ...prev,
+            [section]: {
+                ...prev[section],
+                [field]: value
+            }
+        }));
+    };
+
+    const handleGrandTypeChange = (type) => {
+        setInputs(prev => ({
+            ...prev,
+            grantType: type
+        }));
+    };
+
+    const handleGenerate = async () => {
+        setIsGenerating(true);
+        setError(null);
+
+        try {
+            // Get previous content for context
+            const orgContent = localStorage.getItem('organizationContent');
+            const narrativeContent = localStorage.getItem('projectNarrative');
+
+            const prompt = `You are an expert grant writer. Using the provided information, create a budget narrative that ${
+                inputs.grantType === 'specific' 
+                ? 'addresses the specific grant requirements provided'
+                : 'follows standard grant writing best practices'
+            }.
+
+            Organization Context:
+            ${orgContent}
+
+            Project Narrative Context:
+            ${narrativeContent}
+
+            ${inputs.grantType === 'specific' ? `Grant Requirements:
+            ${inputs.grantRequirements}` : ''}
+
+            Budget Information:
+            Total Amount: ${inputs.budget.totalAmount}
+            Budget Breakdown: ${inputs.budget.breakdown}
+            Budget Justification: ${inputs.budget.justification}
+
+            Additional Funding: ${inputs.sustainability.additionalFunding}
+            Continuation Plan: ${inputs.sustainability.continuationPlan}
+
+            Generate a professional budget narrative that:
+            1. ${inputs.grantType === 'specific' ? 'Directly addresses the grant requirements' : 'Follows standard grant writing best practices'}
+            2. Clearly justifies all costs
+            3. Demonstrates fiscal responsibility
+            4. Shows alignment with project goals
+            5. Explains sustainability plans`;
+
+            const response = await apiClient.post('/claude/generate', {
+                prompt,
+                section: 'proposalBudget'
+            });
+
+            setGeneratedContent(response.body.content);
+            localStorage.setItem('proposalBudget', response.body.content);
+            
+        } catch (error) {
+            console.error('Generation failed:', error);
+            setError('Failed to generate budget narrative. Please try again.');
+        } finally {
+            setIsGenerating(false);
+        }
+    };
+
+    return (
+        <div className="bg-white rounded-lg shadow-md p-6">
+            <h2 className="text-2xl font-bold text-gray-900 mb-6">Project Budget</h2>
+
+            {/* Grant Type Selection */}
+            <div className="mb-8">
+                <div className="mb-8 bg-blue-50 border border-blue-200 rounded-lg p-4">
+                    <p className="text-blue-800 font-normal">
+                        <ul className="list-disc list-inside">
+                            <li><span className="font-bold">Be detailed and specific</span> with all cost estimates and line items.</li>
+                            <li><span className="font-bold">Explain the rationale</span> behind each budget category and how it supports project goals.</li>
+                            <li><span className="font-bold">Include all funding sources</span> and demonstrate responsible financial planning.</li>
+                            <li><span className="font-bold">Show sustainability</span> by explaining how the project will continue beyond the grant period.</li>
+                            <li>Use clear, professional language and accurate calculations.</li>
+                        </ul>
+                    </p>
+                </div>
+
+                <label className="block text-xl font-medium text-gray-700 mb-2">
+                    Are you applying for a specific grant or creating an open proposal?
+                </label>
+                
+                <div className="mb-4 bg-gray-50 p-4 rounded-lg">
+                    <h3 className="text-lg font-medium text-gray-900 mb-2">Choose your approach:</h3>
+                    <div className="space-y-3 text-gray-600">
+                        <div>
+                            <span className="font-semibold text-gray-900">Specific Grant:</span> Choose this if you're responding to a particular grant opportunity with defined requirements and guidelines. You'll be able to paste the grant's budget requirements and ensure your proposal aligns perfectly with the funder's expectations.
+                        </div>
+                        <div>
+                            <span className="font-semibold text-gray-900">Open Proposal:</span> Select this if you're creating a general funding proposal or planning to approach multiple funders. This will help you create a flexible budget narrative that follows grant writing best practices and can be adapted for different opportunities.
+                        </div>
+                    </div>
+                </div>
+
+                <div className="flex space-x-4">
+                    <button
+                        onClick={() => handleGrandTypeChange('specific')}
+                        className={`px-4 py-2 rounded-md ${
+                            inputs.grantType === 'specific'
+                                ? 'bg-teal-600 text-white'
+                                : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
+                        }`}
+                    >
+                        Specific Grant
+                    </button>
+                    <button
+                        onClick={() => handleGrandTypeChange('open')}
+                        className={`px-4 py-2 rounded-md ${
+                            inputs.grantType === 'open'
+                                ? 'bg-teal-600 text-white'
+                                : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
+                        }`}
+                    >
+                        Open Proposal
+                    </button>
+                </div>
+            </div>
+
+            {/* Grant Requirements (if specific grant selected) */}
+            {inputs.grantType === 'specific' && (
+                <div className="mb-6">
+                    <label className="block text-m font-medium text-gray-700 mb-2">
+                        Paste Grant Budget Requirements
+                    </label>
+                    <textarea
+                        value={inputs.grantRequirements}
+                        onChange={(e) => setInputs(prev => ({
+                            ...prev,
+                            grantRequirements: e.target.value
+                        }))}
+                        placeholder="Paste the budget-related requirements from the grant listing..."
+                        rows={4}
+                        className="block w-full rounded-md border-gray-300 shadow-sm focus:border-teal-500 focus:ring-teal-500"
+                    />
+                </div>
+            )}
+
+            {/* Budget Information */}
+            <div className="space-y-6">
+                <div>
+                    <label className="block text-m font-medium text-gray-700 mb-2">
+                        Total Amount Requested
+                    </label>
+                    <input
+                        type="text"
+                        value={inputs.budget.totalAmount}
+                        onChange={(e) => handleInputChange('budget', 'totalAmount', e.target.value)}
+                        placeholder="e.g., $50,000"
+                        className="block w-full rounded-md border-gray-300 shadow-sm focus:border-teal-500 focus:ring-teal-500"
+                    />
+                </div>
+
+                <div>
+                    <label className="block text-m font-medium text-gray-700 mb-2">
+                        Budget Breakdown
+                    </label>
+                    <textarea
+                        value={inputs.budget.breakdown}
+                        onChange={(e) => handleInputChange('budget', 'breakdown', e.target.value)}
+                        placeholder="List major budget categories and amounts..."
+                        rows={4}
+                        className="block w-full rounded-md border-gray-300 shadow-sm focus:border-teal-500 focus:ring-teal-500"
+                    />
+                </div>
+
+                <div>
+                    <label className="block text-m font-medium text-gray-700 mb-2">
+                        Budget Justification
+                    </label>
+                    <textarea
+                        value={inputs.budget.justification}
+                        onChange={(e) => handleInputChange('budget', 'justification', e.target.value)}
+                        placeholder="Explain why each cost is necessary..."
+                        rows={4}
+                        className="block w-full rounded-md border-gray-300 shadow-sm focus:border-teal-500 focus:ring-teal-500"
+                    />
+                </div>
+
+                <div>
+                    <label className="block text-m font-medium text-gray-700 mb-2">
+                        Additional Funding Sources
+                    </label>
+                    <textarea
+                        value={inputs.sustainability.additionalFunding}
+                        onChange={(e) => handleInputChange('sustainability', 'additionalFunding', e.target.value)}
+                        placeholder="Describe any matching funds, other grants, or revenue sources..."
+                        rows={3}
+                        className="block w-full rounded-md border-gray-300 shadow-sm focus:border-teal-500 focus:ring-teal-500"
+                    />
+                </div>
+
+                <div>
+                    <label className="block text-m font-medium text-gray-700 mb-2">
+                        Project Continuation Plan
+                    </label>
+                    <textarea
+                        value={inputs.sustainability.continuationPlan}
+                        onChange={(e) => handleInputChange('sustainability', 'continuationPlan', e.target.value)}
+                        placeholder="How will the project continue after the grant period?"
+                        rows={3}
+                        className="block w-full rounded-md border-gray-300 shadow-sm focus:border-teal-500 focus:ring-teal-500"
+                    />
+                </div>
+            </div>
+
+            {/* Generate Button */}
+            <button
+                onClick={handleGenerate}
+                disabled={isGenerating}
+                className="mt-6 inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-teal-600 hover:bg-teal-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-teal-500 disabled:opacity-50"
+            >
+                {isGenerating ? (
+                    <>
+                        <ArrowPathIcon className="animate-spin h-5 w-5 mr-2" />
+                        Generating...
+                    </>
+                ) : (
+                    <>
+                        <CurrencyDollarIcon className="h-5 w-5 mr-2" />
+                        Generate Budget Content
+                    </>
+                )}
+            </button>
+
+            {/* Display generated content */}
+            {generatedContent && (
+                <GeneratedContent 
+                    content={generatedContent}
+                    onRegenerate={handleGenerate}
+                />
+            )}
+        </div>
+    );
+}
diff --git a/Frontend/src/pages/ProposalBuilderPage.js b/Frontend/src/pages/ProposalBuilderPage.js
index 55095d8..6171c37 100644
--- a/Frontend/src/pages/ProposalBuilderPage.js
+++ b/Frontend/src/pages/ProposalBuilderPage.js
@@ -7,6 +7,7 @@ import {
 } from '@heroicons/react/24/outline';
 import ProjectNarrativeSection from '../components/ProposalBuilderComponents/ProjectNarrativeSection';
 import OrganizationInfoSection from '../components/ProposalBuilderComponents/OrganizationInfoSection';
+import ProposalBudgetSection from '../components/ProposalBuilderComponents/ProposalBudgetSection';
 import Header from '../components/Header';
 
 /**
@@ -34,7 +35,7 @@ export default function ProposalBuilder() {
     const sections = [
         { id: 'organizationInfo', label: 'Organization Information', icon: BuildingOfficeIcon },
         { id: 'projectNarrative', label: 'Project Narrative', icon: DocumentIcon },
-        { id: 'budget', label: 'Budget', icon: CurrencyDollarIcon },
+        { id: 'proposalBudget', label: 'Budget', icon: CurrencyDollarIcon },
         { id: 'summary', label: 'Project Summary', icon: DocumentTextIcon }
     ];
 
@@ -98,6 +99,10 @@ export default function ProposalBuilder() {
                         {/* Organization Information Section */}
                         {activeSection === 'organizationInfo' && (
                         <OrganizationInfoSection/> )}
+
+                        {/* Proposal Budget Section */}
+                        {activeSection === 'proposalBudget' && (
+                        <ProposalBudgetSection/> )}
                     </div>
                 </div>
             </main>

From ec27c757efc6100fd59be559e49cb0697f2eced7 Mon Sep 17 00:00:00 2001
From: Njeriiii <joymwenjwa@gmail.com>
Date: Mon, 17 Feb 2025 15:52:51 -0800
Subject: [PATCH 09/13] executive summary section

---
 .../ExecutiveSummarySection.js                | 212 ++++++++++++++++++
 Frontend/src/pages/ProposalBuilderPage.js     |  12 +-
 2 files changed, 218 insertions(+), 6 deletions(-)
 create mode 100644 Frontend/src/components/ProposalBuilderComponents/ExecutiveSummarySection.js

diff --git a/Frontend/src/components/ProposalBuilderComponents/ExecutiveSummarySection.js b/Frontend/src/components/ProposalBuilderComponents/ExecutiveSummarySection.js
new file mode 100644
index 0000000..3329efc
--- /dev/null
+++ b/Frontend/src/components/ProposalBuilderComponents/ExecutiveSummarySection.js
@@ -0,0 +1,212 @@
+import React, { useState, useEffect } from 'react';
+import { 
+    DocumentTextIcon,
+    ArrowPathIcon,
+} from '@heroicons/react/24/outline';
+import { useApi } from '../../contexts/ApiProvider';
+import GeneratedContent from './GeneratedContent';
+
+/**
+ * ExecutiveSummarySection
+ * 
+ * Creates a compelling executive summary that synthesizes all proposal sections.
+ * Written last but appears first in the final document.
+ * Pulls context from organization info, project narrative, and budget sections.
+ */
+export default function ExecutiveSummarySection() {
+    const [generatedContent, setGeneratedContent] = useState('');
+    const [isGenerating, setIsGenerating] = useState(false);
+    const [error, setError] = useState(null);
+    const apiClient = useApi();
+
+    const [inputs, setInputs] = useState({
+        keyHighlights: '', // Additional points to emphasize
+        uniqueValue: '', // What makes this project special
+        urgency: '', // Why now/why this project
+        impact: '' // Expected outcomes worth highlighting
+    });
+
+    // Load stored content from localStorage on mount
+    useEffect(() => {
+        const storedContent = localStorage.getItem('executiveSummary');
+        if (storedContent) {
+            setGeneratedContent(storedContent);
+        }
+    }, []);
+
+    const handleInputChange = (field, value) => {
+        setInputs(prev => ({
+            ...prev,
+            [field]: value
+        }));
+    };
+
+    const handleGenerate = async () => {
+        setIsGenerating(true);
+        setError(null);
+
+        try {
+            // Get content from all previous sections
+            const orgContent = localStorage.getItem('organizationContent');
+            const narrativeContent = localStorage.getItem('projectNarrative');
+            const budgetContent = localStorage.getItem("proposalBudget");
+
+            const prompt = `You are an expert grant writer. Create a compelling executive summary that synthesizes all sections of the grant proposal into a powerful opening statement. 
+            
+            Use these sections for context:
+            
+            Organization Information:
+            ${orgContent}
+
+            Project Narrative:
+            ${narrativeContent}
+
+            Budget Information:
+            ${budgetContent}
+
+            Additional Emphasis Points:
+            Key Highlights: ${inputs.keyHighlights}
+            Unique Value: ${inputs.uniqueValue}
+            Urgency: ${inputs.urgency}
+            Impact: ${inputs.impact}
+
+            Create an executive summary that:
+            1. Captures attention in the first paragraph
+            2. Clearly states the problem and your solution
+            3. Emphasizes your organization's unique capability
+            4. Includes key financial figures and project timeline
+            5. Highlights expected impact and outcomes
+            6. Maintains professional tone while conveying urgency
+            7. Stays under 500 words
+            
+            Note: This summary will appear first in the proposal but synthesizes all sections.`;
+
+            const response = await apiClient.post('/claude/generate', {
+                prompt,
+                section: 'executiveSummary'
+            });
+
+            setGeneratedContent(response.body.content);
+            localStorage.setItem('executiveSummary', response.body.content);
+            
+        } catch (error) {
+            console.error('Generation failed:', error);
+            setError('Failed to generate executive summary. Please try again.');
+        } finally {
+            setIsGenerating(false);
+        }
+    };
+
+    return (
+        <div className="bg-white rounded-lg shadow-md p-6">
+            <h2 className="text-2xl font-bold text-gray-900 mb-6">Executive Summary</h2>
+
+            {/* Information Notice */}
+            <div className="mb-8 bg-blue-50 border border-blue-200 rounded-lg p-4">
+                <p className="text-blue-800 font-normal">
+                    <ul className="list-disc list-inside">
+                        <li><span className="font-bold">This is your opening pitch</span> - make every word count.</li>
+                        <li><span className="font-bold">Write this section last</span> but present it first in your proposal.</li>
+                        <li><span className="font-bold">Focus on key points</span> from each section of your proposal.</li>
+                        <li><span className="font-bold">Keep it concise</span> - aim for 500 words or less.</li>
+                        <li>Remember: Many readers will only see this section.</li>
+                    </ul>
+                </p>
+            </div>
+
+            {error && (
+                <div className="mb-6 bg-red-50 border border-red-200 text-red-600 px-4 py-3 rounded-lg">
+                    {error}
+                </div>
+            )}
+
+            <div className="mb-8 bg-yellow-50 border border-yellow-200 rounded-lg p-4">
+                <p className="text-yellow-800">
+                    <span className="font-bold">Note:</span> Before generating the executive summary, make sure you've completed all other sections of your proposal. The AI will use that context to create a comprehensive summary.
+                </p>
+            </div>
+
+            {/* Input Form */}
+            <div className="space-y-6">
+                <div>
+                    <label className="block text-m font-medium text-gray-700 mb-2">
+                        Key Points to Emphasize
+                    </label>
+                    <textarea
+                        value={inputs.keyHighlights}
+                        onChange={(e) => handleInputChange('keyHighlights', e.target.value)}
+                        placeholder="What are the most important points that should stand out?"
+                        rows={3}
+                        className="block w-full rounded-md border-gray-300 shadow-sm focus:border-teal-500 focus:ring-teal-500"
+                    />
+                </div>
+
+                <div>
+                    <label className="block text-m font-medium text-gray-700 mb-2">
+                        Unique Value Proposition
+                    </label>
+                    <textarea
+                        value={inputs.uniqueValue}
+                        onChange={(e) => handleInputChange('uniqueValue', e.target.value)}
+                        placeholder="What makes your organization/project uniquely qualified to address this need?"
+                        rows={3}
+                        className="block w-full rounded-md border-gray-300 shadow-sm focus:border-teal-500 focus:ring-teal-500"
+                    />
+                </div>
+
+                <div>
+                    <label className="block text-m font-medium text-gray-700 mb-2">
+                        Urgency and Timing
+                    </label>
+                    <textarea
+                        value={inputs.urgency}
+                        onChange={(e) => handleInputChange('urgency', e.target.value)}
+                        placeholder="Why is this project critical now? What makes the timing important?"
+                        rows={3}
+                        className="block w-full rounded-md border-gray-300 shadow-sm focus:border-teal-500 focus:ring-teal-500"
+                    />
+                </div>
+
+                <div>
+                    <label className="block text-m font-medium text-gray-700 mb-2">
+                        Impact Highlights
+                    </label>
+                    <textarea
+                        value={inputs.impact}
+                        onChange={(e) => handleInputChange('impact', e.target.value)}
+                        placeholder="What are the most compelling outcomes and impacts to highlight?"
+                        rows={3}
+                        className="block w-full rounded-md border-gray-300 shadow-sm focus:border-teal-500 focus:ring-teal-500"
+                    />
+                </div>
+            </div>
+
+            {/* Generate Button */}
+            <button
+                onClick={handleGenerate}
+                disabled={isGenerating}
+                className="mt-6 inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-teal-600 hover:bg-teal-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-teal-500 disabled:opacity-50"
+            >
+                {isGenerating ? (
+                    <>
+                        <ArrowPathIcon className="animate-spin h-5 w-5 mr-2" />
+                        Generating...
+                    </>
+                ) : (
+                    <>
+                        <DocumentTextIcon className="h-5 w-5 mr-2" />
+                        Generate Executive Summary
+                    </>
+                )}
+            </button>
+
+            {/* Display generated content */}
+            {generatedContent && (
+                <GeneratedContent 
+                    content={generatedContent}
+                    onRegenerate={handleGenerate}
+                />
+            )}
+        </div>
+    );
+}
\ No newline at end of file
diff --git a/Frontend/src/pages/ProposalBuilderPage.js b/Frontend/src/pages/ProposalBuilderPage.js
index 6171c37..6c94aa4 100644
--- a/Frontend/src/pages/ProposalBuilderPage.js
+++ b/Frontend/src/pages/ProposalBuilderPage.js
@@ -8,6 +8,7 @@ import {
 import ProjectNarrativeSection from '../components/ProposalBuilderComponents/ProjectNarrativeSection';
 import OrganizationInfoSection from '../components/ProposalBuilderComponents/OrganizationInfoSection';
 import ProposalBudgetSection from '../components/ProposalBuilderComponents/ProposalBudgetSection';
+import ExecutiveSummarySection from '../components/ProposalBuilderComponents/ExecutiveSummarySection';
 import Header from '../components/Header';
 
 /**
@@ -36,7 +37,7 @@ export default function ProposalBuilder() {
         { id: 'organizationInfo', label: 'Organization Information', icon: BuildingOfficeIcon },
         { id: 'projectNarrative', label: 'Project Narrative', icon: DocumentIcon },
         { id: 'proposalBudget', label: 'Budget', icon: CurrencyDollarIcon },
-        { id: 'summary', label: 'Project Summary', icon: DocumentTextIcon }
+        { id: 'executiveSummary', label: 'Executive Summary', icon: DocumentTextIcon }
     ];
 
     return (
@@ -60,11 +61,6 @@ export default function ProposalBuilder() {
                                         <p className="text-lg mt-1">Generate polished, funder-ready content that follows grant writing best practices.</p>
                                     </div>
                                 </div>
-                                <div className="bg-gray-50 rounded-lg p-4 mt-6">
-                                    <p className="text-lg">
-                                        <span className="font-medium">Pro tip:</span> While we'll generate your project summary last, it should appear first in your final document. This ensures it captures the essence of your complete proposal.
-                                    </p>
-                                </div>
                             </div>
                         </div>
                     </div>
@@ -103,6 +99,10 @@ export default function ProposalBuilder() {
                         {/* Proposal Budget Section */}
                         {activeSection === 'proposalBudget' && (
                         <ProposalBudgetSection/> )}
+
+                        {/* Executive Summary Section */}
+                        {activeSection === 'executiveSummary' && (
+                        <ExecutiveSummarySection/> )}
                     </div>
                 </div>
             </main>

From 608a97f767bb2a118576d1ce7f3f5a954ea48d58 Mon Sep 17 00:00:00 2001
From: Njeriiii <joymwenjwa@gmail.com>
Date: Mon, 17 Feb 2025 15:54:09 -0800
Subject: [PATCH 10/13] remove logs

---
 .../ProposalBuilderComponents/OrganizationInfoSection.js     | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/Frontend/src/components/ProposalBuilderComponents/OrganizationInfoSection.js b/Frontend/src/components/ProposalBuilderComponents/OrganizationInfoSection.js
index be2c996..f1071d7 100644
--- a/Frontend/src/components/ProposalBuilderComponents/OrganizationInfoSection.js
+++ b/Frontend/src/components/ProposalBuilderComponents/OrganizationInfoSection.js
@@ -177,10 +177,7 @@ export default function OrganizationInfoSection() {
                 section: 'organizationInfo'
             });
 
-            console.log('Generated content:', response);
-
             setGeneratedContent(response.body.content);
-            console.log('generatedContent:', generatedContent);
             localStorage.setItem('organizationContent', response.body.content);
 
         } catch (error) {
@@ -209,8 +206,6 @@ export default function OrganizationInfoSection() {
         );
     }
 
-    console.log('generatedContent:', generatedContent);
-
     return (
         <div className="bg-white rounded-lg shadow-md p-6">
             <h2 className="text-2xl font-bold text-gray-900 mb-6">Organization Information</h2>

From ad8979388a0dbd46306ff19f248a7171c3d7cf71 Mon Sep 17 00:00:00 2001
From: Njeriiii <joymwenjwa@gmail.com>
Date: Mon, 17 Feb 2025 15:59:19 -0800
Subject: [PATCH 11/13] improve main page UI

---
 Frontend/src/pages/ProposalBuilderPage.js | 116 ++++++++++++++++++----
 1 file changed, 95 insertions(+), 21 deletions(-)

diff --git a/Frontend/src/pages/ProposalBuilderPage.js b/Frontend/src/pages/ProposalBuilderPage.js
index 6c94aa4..a2bc1b4 100644
--- a/Frontend/src/pages/ProposalBuilderPage.js
+++ b/Frontend/src/pages/ProposalBuilderPage.js
@@ -1,9 +1,11 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { 
     BuildingOfficeIcon, 
     DocumentIcon,
     CurrencyDollarIcon,
-    DocumentTextIcon
+    DocumentTextIcon,
+    CheckCircleIcon,
+    ArrowDownIcon
 } from '@heroicons/react/24/outline';
 import ProjectNarrativeSection from '../components/ProposalBuilderComponents/ProjectNarrativeSection';
 import OrganizationInfoSection from '../components/ProposalBuilderComponents/OrganizationInfoSection';
@@ -20,7 +22,7 @@ import Header from '../components/Header';
  * 1. Organization Information - Details about your organization
  * 2. Project Narrative - Core project description and goals
  * 3. Budget - Financial requirements and justification
- * 4. Project Summary - Executive summary (generated last, displayed first)
+ * 4. Executive Summary - Comprehensive overview (generated last, displayed first)
  * 
  * Each section:
  * - Collects specific inputs
@@ -32,6 +34,12 @@ import Header from '../components/Header';
  */
 export default function ProposalBuilder() {
     const [activeSection, setActiveSection] = useState('organizationInfo');
+    const [completedSections, setCompletedSections] = useState(() => {
+        // Initialize from localStorage
+        const saved = localStorage.getItem('completedSections');
+        return saved ? JSON.parse(saved) : [];
+    });
+    const [showTip, setShowTip] = useState(true);
 
     const sections = [
         { id: 'organizationInfo', label: 'Organization Information', icon: BuildingOfficeIcon },
@@ -40,12 +48,31 @@ export default function ProposalBuilder() {
         { id: 'executiveSummary', label: 'Executive Summary', icon: DocumentTextIcon }
     ];
 
+    // Track section completion
+    useEffect(() => {
+        const handleStorageChange = () => {
+            const completed = [];
+            if (localStorage.getItem('organizationContent')) completed.push('organizationInfo');
+            if (localStorage.getItem('projectNarrative')) completed.push('projectNarrative');
+            if (localStorage.getItem('proposalBudget')) completed.push('proposalBudget');
+            if (localStorage.getItem('executiveSummary')) completed.push('executiveSummary');
+            
+            setCompletedSections(completed);
+            localStorage.setItem('completedSections', JSON.stringify(completed));
+        };
+
+        // Check on mount and when localStorage changes
+        handleStorageChange();
+        window.addEventListener('storage', handleStorageChange);
+        return () => window.removeEventListener('storage', handleStorageChange);
+    }, []);
+
     return (
         <div className="min-h-screen bg-gray-50">
             <Header />
             <main>
-                {/* Introduction section */}
                 <div className="max-w-7xl mx-auto py-8 px-4 sm:px-6 lg:px-8">
+                    {/* Introduction section */}
                     <div className="bg-white rounded-lg shadow-md p-6 mb-8">
                         <div className="max-w-3xl">
                             <h1 className="text-3xl font-bold text-gray-900 mb-4">
@@ -64,7 +91,34 @@ export default function ProposalBuilder() {
                             </div>
                         </div>
                     </div>
-                {/* Section Navigation */}
+
+                    {/* Progress Overview */}
+                    {showTip && (
+                        <div className="mb-6 bg-yellow-50 border border-yellow-200 rounded-lg p-4">
+                            <div className="flex justify-between items-start">
+                                <div className="flex space-x-2">
+                                    <ArrowDownIcon className="h-5 w-5 text-yellow-600" />
+                                    <div>
+                                        <p className="text 
+                                        text-yellow-800">
+                                            <span className="font-bold">Recommended order:</span> Complete sections from left to right. The Executive Summary should be written last as it draws from all other sections.
+                                        </p>
+                                        <p className="text-yellow-600 text-sm mt-1">
+                                            Progress is automatically saved as you work.
+                                        </p>
+                                    </div>
+                                </div>
+                                <button 
+                                    onClick={() => setShowTip(false)}
+                                    className="text-yellow-600 hover:text-yellow-800"
+                                >
+                                    ×
+                                </button>
+                            </div>
+                        </div>
+                    )}
+
+                    {/* Section Navigation */}
                     <div className="mb-6 border-b border-gray-200">
                         <nav className="flex space-x-4" aria-label="Sections">
                             {sections.map((section) => (
@@ -72,7 +126,7 @@ export default function ProposalBuilder() {
                                     key={section.id}
                                     onClick={() => setActiveSection(section.id)}
                                     className={`
-                                        py-4 px-1 border-b-2 font-medium text-lg
+                                        relative py-4 px-1 border-b-2 font-medium text-lg
                                         ${activeSection === section.id
                                             ? 'border-teal-500 text-teal-600'
                                             : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
@@ -81,28 +135,48 @@ export default function ProposalBuilder() {
                                 >
                                     <section.icon className="h-5 w-5 inline-block mr-2" />
                                     {section.label}
+                                    {completedSections.includes(section.id) && (
+                                        <CheckCircleIcon className="h-5 w-5 text-green-500 absolute -top-2 -right-2" />
+                                    )}
                                 </button>
                             ))}
                         </nav>
                     </div>
 
-                    {/* Navigation and Section Content */}
+                    {/* Section Content */}
                     <div>                      
-                        {/* Project Narrative Section */}
-                        {activeSection === 'projectNarrative' && (
-                        <ProjectNarrativeSection/> )}
-
-                        {/* Organization Information Section */}
-                        {activeSection === 'organizationInfo' && (
-                        <OrganizationInfoSection/> )}
-
-                        {/* Proposal Budget Section */}
-                        {activeSection === 'proposalBudget' && (
-                        <ProposalBudgetSection/> )}
+                        {activeSection === 'projectNarrative' && <ProjectNarrativeSection />}
+                        {activeSection === 'organizationInfo' && <OrganizationInfoSection />}
+                        {activeSection === 'proposalBudget' && <ProposalBudgetSection />}
+                        {activeSection === 'executiveSummary' && <ExecutiveSummarySection />}
+                    </div>
 
-                        {/* Executive Summary Section */}
-                        {activeSection === 'executiveSummary' && (
-                        <ExecutiveSummarySection/> )}
+                    {/* Section Navigation Footer */}
+                    <div className="mt-8 flex justify-between">
+                        <button
+                            onClick={() => {
+                                const currentIndex = sections.findIndex(s => s.id === activeSection);
+                                if (currentIndex > 0) {
+                                    setActiveSection(sections[currentIndex - 1].id);
+                                }
+                            }}
+                            disabled={activeSection === sections[0].id}
+                            className="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed"
+                        >
+                            Previous Section
+                        </button>
+                        <button
+                            onClick={() => {
+                                const currentIndex = sections.findIndex(s => s.id === activeSection);
+                                if (currentIndex < sections.length - 1) {
+                                    setActiveSection(sections[currentIndex + 1].id);
+                                }
+                            }}
+                            disabled={activeSection === sections[sections.length - 1].id}
+                            className="px-4 py-2 text-sm font-medium text-white bg-teal-600 border border-transparent rounded-md hover:bg-teal-700 disabled:opacity-50 disabled:cursor-not-allowed"
+                        >
+                            Next Section
+                        </button>
                     </div>
                 </div>
             </main>

From ae91f01a2b744e4f28d95765fd40b0aaa06de3bf Mon Sep 17 00:00:00 2001
From: Njeriiii <joymwenjwa@gmail.com>
Date: Mon, 17 Feb 2025 16:53:02 -0800
Subject: [PATCH 12/13] fixing localStorage

---
 .../ExecutiveSummarySection.js                | 14 ++++---
 .../GeneratedContent.js                       |  6 ++-
 .../OrganizationInfoSection.js                | 14 +------
 .../ProjectNarrativeSection.js                |  9 +++--
 .../ProposalBudgetSection.js                  | 11 ++++--
 Frontend/src/pages/ProposalBuilderPage.js     | 38 ++++++++++++-------
 6 files changed, 53 insertions(+), 39 deletions(-)

diff --git a/Frontend/src/components/ProposalBuilderComponents/ExecutiveSummarySection.js b/Frontend/src/components/ProposalBuilderComponents/ExecutiveSummarySection.js
index 3329efc..ffb5f0b 100644
--- a/Frontend/src/components/ProposalBuilderComponents/ExecutiveSummarySection.js
+++ b/Frontend/src/components/ProposalBuilderComponents/ExecutiveSummarySection.js
@@ -4,6 +4,7 @@ import {
     ArrowPathIcon,
 } from '@heroicons/react/24/outline';
 import { useApi } from '../../contexts/ApiProvider';
+import { useAuth } from '../../contexts/AuthProvider';
 import GeneratedContent from './GeneratedContent';
 
 /**
@@ -18,6 +19,8 @@ export default function ExecutiveSummarySection() {
     const [isGenerating, setIsGenerating] = useState(false);
     const [error, setError] = useState(null);
     const apiClient = useApi();
+    const { user } = useAuth();
+    const userId = user ? user.id : null;
 
     const [inputs, setInputs] = useState({
         keyHighlights: '', // Additional points to emphasize
@@ -28,7 +31,7 @@ export default function ExecutiveSummarySection() {
 
     // Load stored content from localStorage on mount
     useEffect(() => {
-        const storedContent = localStorage.getItem('executiveSummary');
+        const storedContent = localStorage.getItem(`${userId}_executiveSummary`);
         if (storedContent) {
             setGeneratedContent(storedContent);
         }
@@ -47,9 +50,9 @@ export default function ExecutiveSummarySection() {
 
         try {
             // Get content from all previous sections
-            const orgContent = localStorage.getItem('organizationContent');
-            const narrativeContent = localStorage.getItem('projectNarrative');
-            const budgetContent = localStorage.getItem("proposalBudget");
+            const orgContent = localStorage.getItem(`${userId}_organizationContent`);
+            const narrativeContent = localStorage.getItem(`${userId}_projectNarrative`);
+            const budgetContent = localStorage.getItem(`${userId}_proposalBudget`);
 
             const prompt = `You are an expert grant writer. Create a compelling executive summary that synthesizes all sections of the grant proposal into a powerful opening statement. 
             
@@ -87,7 +90,8 @@ export default function ExecutiveSummarySection() {
             });
 
             setGeneratedContent(response.body.content);
-            localStorage.setItem('executiveSummary', response.body.content);
+            localStorage.setItem(`${userId}_executiveSummary`, response.body.content);
+
             
         } catch (error) {
             console.error('Generation failed:', error);
diff --git a/Frontend/src/components/ProposalBuilderComponents/GeneratedContent.js b/Frontend/src/components/ProposalBuilderComponents/GeneratedContent.js
index 74c38a8..ca087a8 100644
--- a/Frontend/src/components/ProposalBuilderComponents/GeneratedContent.js
+++ b/Frontend/src/components/ProposalBuilderComponents/GeneratedContent.js
@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import { ArrowPathIcon, DocumentDuplicateIcon, CheckIcon, TrashIcon } from '@heroicons/react/24/outline';
-// import { Alert, AlertDescription } from '@/components/ui/alert';
+import { useAuth } from '../../contexts/AuthProvider';
 
 const GeneratedContent = ({ content, onRegenerate }) => {
     // State for managing content display and interactions
@@ -8,10 +8,12 @@ const GeneratedContent = ({ content, onRegenerate }) => {
     const [localContent, setLocalContent] = useState('');
     const [isRegenerating, setIsRegenerating] = useState(false);
     const [showAlert, setShowAlert] = useState(false);
+    const { user } = useAuth();
+    const userId = user ? user.id : null;
 
     // Load content from localStorage on mount and when content prop changes
     useEffect(() => {
-        const storedContent = localStorage.getItem('organizationContent');
+        const storedContent = localStorage.getItem(`${userId}_organizationContent`);
         setLocalContent(content || storedContent || '');
     }, [content]);
 
diff --git a/Frontend/src/components/ProposalBuilderComponents/OrganizationInfoSection.js b/Frontend/src/components/ProposalBuilderComponents/OrganizationInfoSection.js
index f1071d7..85b643c 100644
--- a/Frontend/src/components/ProposalBuilderComponents/OrganizationInfoSection.js
+++ b/Frontend/src/components/ProposalBuilderComponents/OrganizationInfoSection.js
@@ -31,7 +31,7 @@ export default function OrganizationInfoSection() {
 
     // Load stored content from localStorage on mount
     useEffect(() => {
-        const storedContent = localStorage.getItem('organizationContent');
+        const storedContent = localStorage.getItem(`${userId}_organizationContent`);
         if (storedContent) {
             setGeneratedContent(storedContent);
         }
@@ -178,7 +178,7 @@ export default function OrganizationInfoSection() {
             });
 
             setGeneratedContent(response.body.content);
-            localStorage.setItem('organizationContent', response.body.content);
+            localStorage.setItem(`${userId}_organizationContent`, response.body.content);
 
         } catch (error) {
             console.error('Generation failed:', error);
@@ -196,16 +196,6 @@ export default function OrganizationInfoSection() {
         );
     }
 
-    if (!userId) {
-        return (
-            <div className="bg-yellow-50 border border-yellow-200 rounded-lg p-4">
-                <p className="text-yellow-800">
-                    Please log in to access organization information.
-                </p>
-            </div>
-        );
-    }
-
     return (
         <div className="bg-white rounded-lg shadow-md p-6">
             <h2 className="text-2xl font-bold text-gray-900 mb-6">Organization Information</h2>
diff --git a/Frontend/src/components/ProposalBuilderComponents/ProjectNarrativeSection.js b/Frontend/src/components/ProposalBuilderComponents/ProjectNarrativeSection.js
index 4c10f77..cdfb007 100644
--- a/Frontend/src/components/ProposalBuilderComponents/ProjectNarrativeSection.js
+++ b/Frontend/src/components/ProposalBuilderComponents/ProjectNarrativeSection.js
@@ -4,6 +4,7 @@ import {
     ArrowPathIcon,
 } from '@heroicons/react/24/outline';
 import { useApi } from '../../contexts/ApiProvider';
+import { useAuth } from '../../contexts/AuthProvider';
 import GeneratedContent from './GeneratedContent';
 /**
  * ProjectNarrativeSection
@@ -24,10 +25,12 @@ export default function ProjectNarrativeSection({ }) {
     const [isGenerating, setIsGenerating] = useState(false);
     const [error, setError] = useState(null);
     const apiClient = useApi();
+    const { user } = useAuth();
+    const userId = user ? user.id : null;
 
     // Load stored content from localStorage on mount
     useEffect(() => {
-        const storedContent = localStorage.getItem('projectNarrative');
+        const storedContent = localStorage.getItem(`${userId}_projectNarrative`);
         if (storedContent) {
             setGeneratedContent(storedContent);
         }
@@ -185,7 +188,7 @@ export default function ProjectNarrativeSection({ }) {
 
         try {
             // Get previous content for context
-            const orgContent = localStorage.getItem('organizationContent');
+            const orgContent = localStorage.getItem(`${userId}_organizationContent`);
 
             const prompt = `You are an expert grant writer. Using the provided information, create a compelling project narrative section for a grant proposal. 
             Make it professional, clear, and persuasive.
@@ -229,7 +232,7 @@ export default function ProjectNarrativeSection({ }) {
             });
 
             setGeneratedContent(response.body.content);
-            localStorage.setItem("projectNarrative", response.body.content);
+            localStorage.setItem(`${userId}_projectNarrative`, response.body.content);
             
         } catch (error) {
             console.error('Generation failed:', error);
diff --git a/Frontend/src/components/ProposalBuilderComponents/ProposalBudgetSection.js b/Frontend/src/components/ProposalBuilderComponents/ProposalBudgetSection.js
index 9971ff0..1f834e6 100644
--- a/Frontend/src/components/ProposalBuilderComponents/ProposalBudgetSection.js
+++ b/Frontend/src/components/ProposalBuilderComponents/ProposalBudgetSection.js
@@ -4,6 +4,7 @@ import {
     ArrowPathIcon,
 } from '@heroicons/react/24/outline';
 import { useApi } from '../../contexts/ApiProvider';
+import { useAuth } from '../../contexts/AuthProvider';
 import GeneratedContent from './GeneratedContent';
 
 /**
@@ -18,6 +19,8 @@ export default function ProposalBudgetSection() {
     const [isGenerating, setIsGenerating] = useState(false);
     const [error, setError] = useState(null);
     const apiClient = useApi();
+    const { user } = useAuth();
+    const userId = user ? user.id : null;
 
     // Initialize form state
     const [inputs, setInputs] = useState({
@@ -36,7 +39,7 @@ export default function ProposalBudgetSection() {
 
     // Load stored content from localStorage on mount
     useEffect(() => {
-        const storedContent = localStorage.getItem('proposalBudget');
+        const storedContent = localStorage.getItem(`${userId}_proposalBudget`);
         if (storedContent) {
             setGeneratedContent(storedContent);
         }
@@ -65,8 +68,8 @@ export default function ProposalBudgetSection() {
 
         try {
             // Get previous content for context
-            const orgContent = localStorage.getItem('organizationContent');
-            const narrativeContent = localStorage.getItem('projectNarrative');
+            const orgContent = localStorage.getItem(`${userId}_organizationContent`);
+            const narrativeContent = localStorage.getItem(`${userId}_projectNarrative`);
 
             const prompt = `You are an expert grant writer. Using the provided information, create a budget narrative that ${
                 inputs.grantType === 'specific' 
@@ -104,7 +107,7 @@ export default function ProposalBudgetSection() {
             });
 
             setGeneratedContent(response.body.content);
-            localStorage.setItem('proposalBudget', response.body.content);
+            localStorage.setItem(`${userId}_proposalBudget`, response.body.content);
             
         } catch (error) {
             console.error('Generation failed:', error);
diff --git a/Frontend/src/pages/ProposalBuilderPage.js b/Frontend/src/pages/ProposalBuilderPage.js
index a2bc1b4..d77cd06 100644
--- a/Frontend/src/pages/ProposalBuilderPage.js
+++ b/Frontend/src/pages/ProposalBuilderPage.js
@@ -12,6 +12,7 @@ import OrganizationInfoSection from '../components/ProposalBuilderComponents/Org
 import ProposalBudgetSection from '../components/ProposalBuilderComponents/ProposalBudgetSection';
 import ExecutiveSummarySection from '../components/ProposalBuilderComponents/ExecutiveSummarySection';
 import Header from '../components/Header';
+import { useAuth } from '../contexts/AuthProvider';
 
 /**
  * ProposalBuilder
@@ -34,12 +35,14 @@ import Header from '../components/Header';
  */
 export default function ProposalBuilder() {
     const [activeSection, setActiveSection] = useState('organizationInfo');
+    const [showTip, setShowTip] = useState(true);
+    const { user } = useAuth();
+    const userId = user ? user.id : null;
     const [completedSections, setCompletedSections] = useState(() => {
         // Initialize from localStorage
-        const saved = localStorage.getItem('completedSections');
+        const saved = localStorage.getItem(`${userId}_completedSections`);
         return saved ? JSON.parse(saved) : [];
     });
-    const [showTip, setShowTip] = useState(true);
 
     const sections = [
         { id: 'organizationInfo', label: 'Organization Information', icon: BuildingOfficeIcon },
@@ -52,13 +55,13 @@ export default function ProposalBuilder() {
     useEffect(() => {
         const handleStorageChange = () => {
             const completed = [];
-            if (localStorage.getItem('organizationContent')) completed.push('organizationInfo');
-            if (localStorage.getItem('projectNarrative')) completed.push('projectNarrative');
-            if (localStorage.getItem('proposalBudget')) completed.push('proposalBudget');
-            if (localStorage.getItem('executiveSummary')) completed.push('executiveSummary');
+            if (localStorage.getItem(`${userId}_organizationContent`)) completed.push('organizationInfo');
+            if (localStorage.getItem(`${userId}_projectNarrative`)) completed.push('projectNarrative');
+            if (localStorage.getItem(`${userId}_proposalBudget`)) completed.push('proposalBudget');
+            if (localStorage.getItem(`${userId}_executiveSummary`)) completed.push('executiveSummary');
             
             setCompletedSections(completed);
-            localStorage.setItem('completedSections', JSON.stringify(completed));
+            localStorage.setItem(`${userId}_completedSection`, JSON.stringify(completed));
         };
 
         // Check on mount and when localStorage changes
@@ -143,12 +146,21 @@ export default function ProposalBuilder() {
                         </nav>
                     </div>
 
-                    {/* Section Content */}
-                    <div>                      
-                        {activeSection === 'projectNarrative' && <ProjectNarrativeSection />}
-                        {activeSection === 'organizationInfo' && <OrganizationInfoSection />}
-                        {activeSection === 'proposalBudget' && <ProposalBudgetSection />}
-                        {activeSection === 'executiveSummary' && <ExecutiveSummarySection />}
+                    <div className="mb-8">
+                        {!userId ? (
+                            <div className="bg-yellow-50 border border-yellow-200 rounded-lg p-4">
+                                <p className="text-yellow-800">
+                                    Please log in to access organization information.
+                                </p>
+                            </div>
+                        ) : (
+                            <>
+                                {activeSection === 'projectNarrative' && <ProjectNarrativeSection />}
+                                {activeSection === 'organizationInfo' && <OrganizationInfoSection />}
+                                {activeSection === 'proposalBudget' && <ProposalBudgetSection />}
+                                {activeSection === 'executiveSummary' && <ExecutiveSummarySection />}
+                            </>
+                        )}
                     </div>
 
                     {/* Section Navigation Footer */}

From f692d8aff45c3a0aad43031ac11de4fb44257576 Mon Sep 17 00:00:00 2001
From: Njeriiii <joymwenjwa@gmail.com>
Date: Tue, 18 Feb 2025 12:13:54 -0800
Subject: [PATCH 13/13] fix handle clear

---
 .../ExecutiveSummarySection.js                |  2 +
 .../GeneratedContent.js                       | 53 ++++++++++++-------
 .../OrganizationInfoSection.js                |  2 +
 .../ProjectNarrativeSection.js                |  2 +
 .../ProposalBudgetSection.js                  |  2 +
 5 files changed, 41 insertions(+), 20 deletions(-)

diff --git a/Frontend/src/components/ProposalBuilderComponents/ExecutiveSummarySection.js b/Frontend/src/components/ProposalBuilderComponents/ExecutiveSummarySection.js
index ffb5f0b..f9ac08a 100644
--- a/Frontend/src/components/ProposalBuilderComponents/ExecutiveSummarySection.js
+++ b/Frontend/src/components/ProposalBuilderComponents/ExecutiveSummarySection.js
@@ -209,6 +209,8 @@ export default function ExecutiveSummarySection() {
                 <GeneratedContent 
                     content={generatedContent}
                     onRegenerate={handleGenerate}
+                    storageKey="executiveSummary"
+                    title="Generated Executive Summary"
                 />
             )}
         </div>
diff --git a/Frontend/src/components/ProposalBuilderComponents/GeneratedContent.js b/Frontend/src/components/ProposalBuilderComponents/GeneratedContent.js
index ca087a8..a167626 100644
--- a/Frontend/src/components/ProposalBuilderComponents/GeneratedContent.js
+++ b/Frontend/src/components/ProposalBuilderComponents/GeneratedContent.js
@@ -2,8 +2,23 @@ import React, { useState, useEffect } from 'react';
 import { ArrowPathIcon, DocumentDuplicateIcon, CheckIcon, TrashIcon } from '@heroicons/react/24/outline';
 import { useAuth } from '../../contexts/AuthProvider';
 
-const GeneratedContent = ({ content, onRegenerate }) => {
-    // State for managing content display and interactions
+/**
+ * GeneratedContent
+ * 
+ * A reusable component for displaying and managing AI-generated content.
+ * Handles content display, copying, regeneration, and storage management.
+ * 
+ * @param {string} content - The content to display
+ * @param {function} onRegenerate - Callback function to regenerate content
+ * @param {string} storageKey - Key for localStorage (e.g., 'projectNarrative', 'executiveSummary')
+ * @param {string} title - Optional custom title for the content section
+ */
+const GeneratedContent = ({ 
+    content, 
+    onRegenerate, 
+    storageKey, 
+    title = 'Generated Content'
+}) => {
     const [copied, setCopied] = useState(false);
     const [localContent, setLocalContent] = useState('');
     const [isRegenerating, setIsRegenerating] = useState(false);
@@ -11,11 +26,14 @@ const GeneratedContent = ({ content, onRegenerate }) => {
     const { user } = useAuth();
     const userId = user ? user.id : null;
 
+    // Create full storage key with user ID if available
+    const fullStorageKey = userId ? `${userId}_${storageKey}` : storageKey;
+
     // Load content from localStorage on mount and when content prop changes
     useEffect(() => {
-        const storedContent = localStorage.getItem(`${userId}_organizationContent`);
+        const storedContent = localStorage.getItem(fullStorageKey);
         setLocalContent(content || storedContent || '');
-    }, [content]);
+    }, [content, fullStorageKey]);
 
     // Format content with proper line breaks and spacing
     const formatContent = (text) => {
@@ -50,17 +68,21 @@ const GeneratedContent = ({ content, onRegenerate }) => {
     };
 
     // Handle regeneration of content
-    const handleRegenerate = () => {
+    const handleRegenerate = async () => {
         setIsRegenerating(true);
-        onRegenerate();
-        // Reset states after regeneration starts
-        setLocalContent('');
-        setIsRegenerating(false);
+        try {
+            await onRegenerate();
+        } catch (error) {
+            console.error('Regeneration failed:', error);
+            setShowAlert(true);
+        } finally {
+            setIsRegenerating(false);
+        }
     };
 
     // Clear content from localStorage
     const handleClear = () => {
-        localStorage.removeItem('organizationContent');
+        localStorage.removeItem(fullStorageKey);
         setLocalContent('');
         setShowAlert(true);
         setTimeout(() => setShowAlert(false), 3000);
@@ -73,19 +95,10 @@ const GeneratedContent = ({ content, onRegenerate }) => {
 
     return (
         <div className="mt-8 bg-white border border-gray-200 rounded-xl shadow-sm">
-            {/* Alert for notifications */}
-            {/* {showAlert && (
-                // <Alert className="mb-4">
-                //     <AlertDescription>
-                //         {copied ? 'Content copied to clipboard!' : 'Content cleared from storage!'}
-                //     </AlertDescription>
-                // </Alert>
-            )} */}
-
             {/* Header */}
             <div className="px-6 py-4 border-b border-gray-200">
                 <h3 className="text-lg font-semibold text-gray-900">
-                    Generated Content
+                    {title}
                 </h3>
             </div>
 
diff --git a/Frontend/src/components/ProposalBuilderComponents/OrganizationInfoSection.js b/Frontend/src/components/ProposalBuilderComponents/OrganizationInfoSection.js
index 85b643c..122c427 100644
--- a/Frontend/src/components/ProposalBuilderComponents/OrganizationInfoSection.js
+++ b/Frontend/src/components/ProposalBuilderComponents/OrganizationInfoSection.js
@@ -363,6 +363,8 @@ export default function OrganizationInfoSection() {
                 <GeneratedContent 
                     content={generatedContent}
                     onRegenerate={handleGenerate}
+                    storageKey="organizationInfo"
+                    title="Generated Organization Information"
                 />
             )}
         </div>
diff --git a/Frontend/src/components/ProposalBuilderComponents/ProjectNarrativeSection.js b/Frontend/src/components/ProposalBuilderComponents/ProjectNarrativeSection.js
index cdfb007..1c266eb 100644
--- a/Frontend/src/components/ProposalBuilderComponents/ProjectNarrativeSection.js
+++ b/Frontend/src/components/ProposalBuilderComponents/ProjectNarrativeSection.js
@@ -334,6 +334,8 @@ export default function ProjectNarrativeSection({ }) {
                 <GeneratedContent 
                     content={generatedContent}
                     onRegenerate={handleGenerate}
+                    storageKey="projectNarrative"
+                    title="Generated Project Narrative"
                 />
             )}
         </div>
diff --git a/Frontend/src/components/ProposalBuilderComponents/ProposalBudgetSection.js b/Frontend/src/components/ProposalBuilderComponents/ProposalBudgetSection.js
index 1f834e6..2decd49 100644
--- a/Frontend/src/components/ProposalBuilderComponents/ProposalBudgetSection.js
+++ b/Frontend/src/components/ProposalBuilderComponents/ProposalBudgetSection.js
@@ -286,6 +286,8 @@ export default function ProposalBudgetSection() {
                 <GeneratedContent 
                     content={generatedContent}
                     onRegenerate={handleGenerate}
+                    storageKey="proposalBudget"
+                    title="Generated Budget"
                 />
             )}
         </div>