src/components/RFPManager.svelte

<script lang="ts">

  import { onMount } from 'svelte';

  import { backendService, type CurrentRFPDocument } from '../utils/backendService';

  import { suggestionEngine } from '../utils/suggestionEngine';



  export let visible = false;



  let currentRFPs: CurrentRFPDocument[] = [];

  let selectedRFP: CurrentRFPDocument | null = null;

  let rfpContent = '';

  let insights: any = null;

  let uploading = false;

  let loading = false;



  // File upload

  let fileInput: HTMLInputElement;



  onMount(() => {

    if (visible) {

      loadCurrentRFPs();

    }

  });



  $: if (visible) {

    loadCurrentRFPs();

  }



  async function loadCurrentRFPs() {

    try {

      loading = true;

      currentRFPs = await backendService.getCurrentRFPs();

    } catch (error) {

      console.error('Failed to load current RFPs:', error);

    } finally {

      loading = false;

    }

  }



  async function handleFileUpload(event: Event) {

    const target = event.target as HTMLInputElement;

    const file = target.files?.[0];

    

    if (!file) return;



    try {

      uploading = true;

      const result = await backendService.uploadCurrentRFP(file);

      

      // Add to current RFPs list

      currentRFPs = [...currentRFPs, result.document];

      

      // Auto-select the uploaded document

      selectedRFP = result.document;

      await loadRFPContent(result.document.id);

      

      // Reset file input

      target.value = '';

    } catch (error) {

      console.error('Upload failed:', error);

      alert('Failed to upload file: ' + (error as Error).message);

    } finally {

      uploading = false;

    }

  }



  async function selectRFP(rfp: CurrentRFPDocument) {

    selectedRFP = rfp;

    await loadRFPContent(rfp.id);

  }



  async function loadRFPContent(id: string) {

    try {

      loading = true;

      const result = await backendService.getCurrentRFPContent(id);

      rfpContent = result.content;

      

      // Analyze the RFP document for insights

      insights = suggestionEngine.analyzeRFPDocument(rfpContent);

    } catch (error) {

      console.error('Failed to load RFP content:', error);

    } finally {

      loading = false;

    }

  }



  function formatDate(dateString: string) {

    return new Date(dateString).toLocaleDateString();

  }



  function getFileIcon(fileType: string) {

    switch (fileType.toLowerCase()) {

      case 'pdf': return '📄';

      case 'docx': case 'doc': return '📝';

      case 'txt': return '📋';

      default: return '📁';

    }

  }

</script>

<div class="rfp-manager" class:visible>
  <div class="header">
    <h3>Current RFP Documents</h3>
    <button class="close-btn" on:click={() => visible = false}>×</button>
  </div>

  <div class="content">
    <!-- Upload Section -->
    <div class="upload-section">
      <h4>Upload Current RFP</h4>
      <div class="upload-area">
        <input 

          bind:this={fileInput}

          type="file" 

          accept=".pdf,.doc,.docx,.txt" 

          on:change={handleFileUpload}

          style="display: none;"

        />
        <button 

          class="upload-btn" 

          on:click={() => fileInput.click()}
          disabled={uploading}
        >
          {uploading ? 'Uploading...' : 'Choose RFP Document'}
        </button>
        <p class="upload-help">Upload the current RFP document to analyze and get suggestions</p>
      </div>
    </div>

    <!-- Documents List -->
    <div class="documents-section">
      <h4>Uploaded RFPs ({currentRFPs.length})</h4>
      
      {#if loading && currentRFPs.length === 0}
        <div class="loading">Loading documents...</div>
      {:else if currentRFPs.length === 0}
        <div class="empty-state">
          No RFP documents uploaded yet. Upload one to get started!
        </div>
      {:else}
        <div class="documents-list">
          {#each currentRFPs as rfp (rfp.id)}
            <div 

              class="document-item" 

              class:selected={selectedRFP?.id === rfp.id}

              on:click={() => selectRFP(rfp)}
            >
              <div class="doc-icon">{getFileIcon(rfp.fileType)}</div>
              <div class="doc-info">
                <div class="doc-name">{rfp.name}</div>
                <div class="doc-meta">
                  {rfp.fileType.toUpperCase()} • {formatDate(rfp.uploadDate)}
                  {#if rfp.contentLength}
                    • {Math.round(rfp.contentLength / 1000)}k chars
                  {/if}
                </div>
              </div>
              <div class="doc-status">
                {#if rfp.processed}
                  <span class="status-processed">✓ Processed</span>
                {:else}
                  <span class="status-pending">⏳ Processing</span>
                {/if}
              </div>
            </div>
          {/each}
        </div>
      {/if}
    </div>

    <!-- RFP Analysis -->
    {#if selectedRFP && insights}
      <div class="analysis-section">
        <h4>RFP Analysis: {selectedRFP.name}</h4>
        
        <div class="insights-grid">
          <!-- Key Requirements -->
          <div class="insight-card">
            <h5>Key Requirements</h5>
            <div class="tag-list">
              {#each insights.keyRequirements.slice(0, 8) as requirement}
                <span class="tag">{requirement}</span>
              {/each}
            </div>
          </div>

          <!-- Technology Mentions -->
          {#if insights.technologyMentions.length > 0}
            <div class="insight-card">
              <h5>Technology Stack</h5>
              <div class="tag-list">
                {#each insights.technologyMentions as tech}
                  <span class="tag tech-tag">{tech}</span>
                {/each}
              </div>
            </div>
          {/if}

          <!-- Compliance Requirements -->
          {#if insights.complianceRequirements.length > 0}
            <div class="insight-card">
              <h5>Compliance & Security</h5>
              <div class="tag-list">
                {#each insights.complianceRequirements as compliance}
                  <span class="tag compliance-tag">{compliance}</span>
                {/each}
              </div>
            </div>
          {/if}

          <!-- Timeline Indicators -->
          {#if insights.timelineIndicators.length > 0}
            <div class="insight-card">
              <h5>Timeline Indicators</h5>
              <div class="tag-list">
                {#each insights.timelineIndicators as timeline}
                  <span class="tag timeline-tag">{timeline}</span>
                {/each}
              </div>
            </div>
          {/if}

          <!-- Budget Indicators -->
          {#if insights.budgetIndicators.length > 0}
            <div class="insight-card">
              <h5>Budget Indicators</h5>
              <div class="tag-list">
                {#each insights.budgetIndicators as budget}
                  <span class="tag budget-tag">{budget}</span>
                {/each}
              </div>
            </div>
          {/if}
        </div>

        <!-- Strategy Recommendations -->
        <div class="strategy-section">
          <h5>Strategic Recommendations</h5>
          <div class="recommendations">
            <div class="recommendation">
              <strong>Emphasize SEDNA's Experience:</strong> 
              Highlight 15+ years and 200+ successful projects
            </div>
            <div class="recommendation">
              <strong>Security Focus:</strong> 
              Lead with SOC 2, ISO 27001 certifications
            </div>
            <div class="recommendation">
              <strong>Methodology:</strong> 
              Detail 5-phase approach: Discovery → Design → Implementation → Testing → Deployment
            </div>
            <div class="recommendation">
              <strong>Transparency:</strong> 
              Emphasize fixed-price model with milestone billing
            </div>
          </div>
        </div>
      </div>
    {/if}
  </div>
</div>

<style>

  .rfp-manager {

    position: fixed;

    top: 0;

    right: -600px;

    width: 600px;

    height: 100vh;

    background: #1a1a1a;

    border-left: 1px solid #333;

    transition: right 0.3s ease;

    z-index: 1000;

    overflow-y: auto;

  }



  .rfp-manager.visible {

    right: 0;

  }



  .header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 1rem;

    border-bottom: 1px solid #333;

    background: #2a2a2a;

  }



  .header h3 {

    margin: 0;

    color: #e0e0e0;

    font-size: 1.2rem;

  }



  .close-btn {

    background: none;

    border: none;

    color: #888;

    font-size: 1.5rem;

    cursor: pointer;

    padding: 0.25rem;

  }



  .close-btn:hover {

    color: #e0e0e0;

  }



  .content {

    padding: 1rem;

  }



  .upload-section {

    margin-bottom: 2rem;

  }



  .upload-section h4, .documents-section h4, .analysis-section h4 {

    color: #4a9eff;

    margin: 0 0 1rem 0;

    font-size: 1rem;

  }



  .upload-area {

    text-align: center;

    padding: 1rem;

    border: 2px dashed #333;

    border-radius: 8px;

  }



  .upload-btn {

    background: #4a9eff;

    color: white;

    border: none;

    padding: 0.75rem 1.5rem;

    border-radius: 6px;

    cursor: pointer;

    font-size: 0.9rem;

    margin-bottom: 0.5rem;

  }



  .upload-btn:hover:not(:disabled) {

    background: #357abd;

  }



  .upload-btn:disabled {

    background: #666;

    cursor: not-allowed;

  }



  .upload-help {

    color: #888;

    font-size: 0.8rem;

    margin: 0;

  }



  .documents-list {

    max-height: 300px;

    overflow-y: auto;

  }



  .document-item {

    display: flex;

    align-items: center;

    padding: 0.75rem;

    border-radius: 6px;

    cursor: pointer;

    transition: background-color 0.2s;

    margin-bottom: 0.5rem;

  }



  .document-item:hover {

    background: #2a2a2a;

  }



  .document-item.selected {

    background: #1e3a5f;

    border: 1px solid #4a9eff;

  }



  .doc-icon {

    font-size: 1.5rem;

    margin-right: 0.75rem;

  }



  .doc-info {

    flex: 1;

  }



  .doc-name {

    color: #e0e0e0;

    font-weight: 500;

    margin-bottom: 0.25rem;

  }



  .doc-meta {

    color: #888;

    font-size: 0.8rem;

  }



  .doc-status {

    margin-left: 1rem;

  }



  .status-processed {

    color: #4caf50;

    font-size: 0.8rem;

  }



  .status-pending {

    color: #ff9800;

    font-size: 0.8rem;

  }



  .empty-state, .loading {

    text-align: center;

    color: #888;

    padding: 2rem;

    font-style: italic;

  }



  .analysis-section {

    margin-top: 2rem;

    padding-top: 2rem;

    border-top: 1px solid #333;

  }



  .insights-grid {

    display: grid;

    gap: 1rem;

    margin-bottom: 2rem;

  }



  .insight-card {

    background: #2a2a2a;

    padding: 1rem;

    border-radius: 6px;

    border: 1px solid #333;

  }



  .insight-card h5 {

    margin: 0 0 0.75rem 0;

    color: #4a9eff;

    font-size: 0.9rem;

  }



  .tag-list {

    display: flex;

    flex-wrap: wrap;

    gap: 0.5rem;

  }



  .tag {

    background: #333;

    color: #e0e0e0;

    padding: 0.25rem 0.5rem;

    border-radius: 4px;

    font-size: 0.8rem;

  }



  .tech-tag {

    background: #1e3a5f;

    color: #4a9eff;

  }



  .compliance-tag {

    background: #1e4a1e;

    color: #4caf50;

  }



  .timeline-tag {

    background: #4a1e4a;

    color: #e91e63;

  }



  .budget-tag {

    background: #4a4a1e;

    color: #ffeb3b;

  }



  .strategy-section {

    background: #2a2a2a;

    padding: 1rem;

    border-radius: 6px;

    border: 1px solid #333;

  }



  .strategy-section h5 {

    margin: 0 0 1rem 0;

    color: #4a9eff;

  }



  .recommendations {

    display: flex;

    flex-direction: column;

    gap: 0.75rem;

  }



  .recommendation {

    color: #e0e0e0;

    font-size: 0.9rem;

    line-height: 1.4;

  }



  .recommendation strong {

    color: #4a9eff;

  }

</style>