Let me give you a more detailed and clearer prompt for v0 to get the implementation right:

BlueSky Call Agent Enhancement: Detailed Implementation Guide

I need specific changes to the existing Call Agent system you've built. Let me break down exactly what needs to be implemented with explicit instructions to avoid any confusion.

1. RENAME "FARMERS BUREAU" TO "FARM BUREAU"

• Search and replace ALL instances of "Farmers Bureau" with "Farm Bureau" across the entire application
• This includes table data, filters, headers, and any static text
• Verify this change is consistent across all pages and components

2. MOVE "FLAGGED FOR REVIEW" SECTION TO TOP

• Cut the entire "Flagged for Review" section from its current position at the bottom of the page
• Paste it directly below the metrics cards (Active Calls, Completed Today, etc.) and above the Active Calls table
• Keep ALL existing functionality of this section intact
• The section should maintain its current styling, including the header, filter dropdown, and pagination

3. DISPLAY ANALYSIS PAYLOAD IN CALL HISTORY

• When a user views a completed call either by clicking on it in Call History or reviewing a flagged call:
• Add a new tab labeled "Analysis" next to any existing tabs
• In this tab, implement a formatted display of the following JSON data:

{  
  "voicemail_left": "false",  
  "message_completed": "true",  
  "access_restrictions": "false",  
  "restrictions_summary": "",  
  "other_concerns": "DidNotCollect",  
  "concerns_details": "",  
  "flag_for_review": "false",  
  "caller_mood": "neutral",  
  "has_questions": "true",  
  "questions_asked": [  
    "Could you clarify what this. [about the survey]",  
    "Could you explain more about this survey? [overview of the survey]"  
  ],  
  "notes": "The call was to inform the recipient about an upcoming exterior insurance survey by JMI. The recipient confirmed that there are no access restrictions such as gates or animals. The caller provided details about the survey process, including the use of a camera pole for roof photos."  
}  

• Format this JSON with proper indentation and syntax highlighting
• Highlight important fields in specific colors:
  • "flag_for_review": "true" should be highlighted in red
  • "access_restrictions": "true" should be highlighted in orange
  • "message_completed": "false" should be highlighted in red
  • "voicemail_left": "true" should be highlighted in blue

4. ADD EXAMPLE TO FLAGGED FOR REVIEW SECTION

• Add this exact example to the Flagged for Review table:
  • Call ID: CALL-9874
  • Order ID: 220400208
  • Customer: Lisa Johnson
  • Phone: (555) 333-4444
  • Flag Type: Auto
  • Reason: "Call disconnected prematurely"
  • Outcome: Unsuccessful
  • Time: 10:10 AM
  • Status: Pending
  • Actions: REVIEW and MARK REVIEWED buttons

5. TECHNICAL IMPLEMENTATION DETAILS

• Use tabs for separating different views of call information (Details, Transcript, Analysis)
• The Analysis tab should display the JSON in a code-like format with proper syntax highlighting
• Ensure all new elements maintain the exact same styling as the rest of the application
• The Flagged for Review section should look identical to its current implementation, just relocated
• Test the implementation with various screen sizes to ensure responsiveness
• Ensure that the Farm Bureau name change is consistent across all data sources

For this task, please exactly follow these requirements without adding additional features. Focus on getting these specific changes implemented correctly while maintaining the existing UI design language of the BlueSky application.

Your current implementation has two specific issues that need immediate attention. Follow these step-by-step instructions EXACTLY as written:

1. Fix Call History Page (EMPTY TABLE ISSUE)

Currently, the Call History tab shows "Call history will be displayed here" instead of actual data. This needs to be fixed by implementing a proper table:

<!-- REPLACE THIS ENTIRE SECTION -->  
<div class="call-history-empty-state">  
  <p>Call history will be displayed here.</p>  
</div>  
  
<!-- WITH THIS EXACT IMPLEMENTATION -->  
<table class="table">  
  <thead>  
    <tr>  
      <th>Call ID</th>  
      <th>Order ID</th>  
      <th>Customer</th>  
      <th>Phone</th>  
      <th>End Time</th>  
      <th>Duration</th>  
      <th>Outcome</th>  
      <th>Actions</th>  
    </tr>  
  </thead>  
  <tbody>  
    <!-- COPY AND PASTE THESE EXACT ROWS -->  
    <tr>  
      <td>CALL-9875</td>  
      <td>220400209</td>  
      <td>Thomas Anderson</td>  
      <td>(555) 111-2222</td>  
      <td>10:15 AM</td>  
      <td>1:22</td>  
      <td><span class="badge incomplete">Incomplete</span></td>  
      <td><button class="btn btn-primary btn-sm">VIEW</button></td>  
    </tr>  
    <tr>  
      <td>CALL-9874</td>  
      <td>220400208</td>  
      <td>Lisa Johnson</td>  
      <td>(555) 333-4444</td>  
      <td>10:10 AM</td>  
      <td>0:45</td>  
      <td><span class="badge unsuccessful">Unsuccessful</span></td>  
      <td><button class="btn btn-primary btn-sm">VIEW</button></td>  
    </tr>  
    <tr>  
      <td>CALL-9873</td>  
      <td>220400207</td>  
      <td>Mark Williams</td>  
      <td>(555) 555-6666</td>  
      <td>10:05 AM</td>  
      <td>0:32</td>  
      <td><span class="badge incomplete">Incomplete</span></td>  
      <td><button class="btn btn-primary btn-sm">VIEW</button></td>  
    </tr>  
  </tbody>  
</table>  
<div class="pagination-container">  
  <span>Showing 3 completed calls</span>  
  <div class="pagination">  
    <span class="page-item disabled">«</span>  
    <span class="page-item active">1</span>  
    <span class="page-item">»</span>  
  </div>  
</div>  

2. Enhance Analysis Display (JSON FORMATTING ISSUE)

The Analysis tab currently shows raw JSON code. Replace it with a properly formatted, user-friendly display:

<!-- REPLACE THIS ENTIRE SECTION -->  
<div class="analysis-payload">  
  <pre>  
voicemail_left: "false",  
message_completed: "true",  
...  
  </pre>  
</div>  
  
<!-- WITH THIS EXACT IMPLEMENTATION -->  
<div class="analysis-cards">  
  <!-- Card 1: Call Outcome -->  
  <div class="analysis-card">  
    <h4 class="card-title">📞 Call Outcome</h4>  
    <div class="card-content">  
      <div class="analysis-item success">  
        <i class="fa fa-check"></i> Message Completed  
      </div>  
      <div class="analysis-item neutral">  
        <i class="fa fa-times"></i> No Voicemail Left  
      </div>  
      <div class="analysis-item neutral">  
        <i class="fa fa-lock-open"></i> No Access Restrictions  
      </div>  
      <div class="analysis-item warning">  
        <i class="fa fa-exclamation-triangle"></i> Other Concern: DidNotCollect  
      </div>  
    </div>  
  </div>  
    
  <!-- Card 2: Customer Interaction -->  
  <div class="analysis-card">  
    <h4 class="card-title">👤 Customer Interaction</h4>  
    <div class="card-content">  
      <div class="analysis-item neutral">  
        <i class="fa fa-face-neutral"></i> Caller Mood: Neutral  
      </div>  
      <div class="analysis-item neutral">  
        <i class="fa fa-question"></i> Questions Asked:  
        <ul class="question-list">  
          <li>"Could you clarify what this. [about the survey]"</li>  
          <li>"Could you explain more about this survey? [overview of the survey]"</li>  
        </ul>  
      </div>  
    </div>  
  </div>  
    
  <!-- Card 3: Notes -->  
  <div class="analysis-card">  
    <h4 class="card-title">📝 Notes</h4>  
    <div class="card-content">  
      <p class="notes-text">The call was to inform the recipient about an upcoming exterior insurance survey by JMI. The recipient confirmed that there are no access restrictions such as gates or animals. The caller provided details about the survey process, including the use of a camera pole for roof photos.</p>  
    </div>  
  </div>  
    
  <!-- Raw JSON Option -->  
  <div class="raw-json-container">  
    <button class="btn btn-sm btn-secondary toggle-json-btn">View Raw JSON</button>  
    <div class="raw-json" style="display: none;">  
      <pre>{  
  "voicemail_left": "false",  
  "message_completed": "true",  
  "access_restrictions": "false",  
  "restrictions_summary": "",  
  "other_concerns": "DidNotCollect",  
  "concerns_details": "",  
  "flag_for_review": "false",  
  "caller_mood": "neutral",  
  "has_questions": "true",  
  "questions_asked": [  
    "Could you clarify what this. [about the survey]",  
    "Could you explain more about this survey? [overview of the survey]"  
  ],  
  "notes": "The call was to inform the recipient about an upcoming exterior insurance survey by JMI. The recipient confirmed that there are no access restrictions such as gates or animals. The caller provided details about the survey process, including the use of a camera pole for roof photos."  
}</pre>  
    </div>  
  </div>  
</div>  

3. Add CSS Styling

Add these EXACT CSS styles to make the new components work correctly:

/* Analysis Cards Styling */  
.analysis-cards {  
  display: flex;  
  flex-direction: column;  
  gap: 20px;  
  margin-bottom: 20px;  
}  
  
.analysis-card {  
  border: 1px solid #dee2e6;  
  border-radius: 4px;  
  padding: 15px;  
  background-color: #fff;  
}  
  
.card-title {  
  margin-top: 0;  
  margin-bottom: 15px;  
  font-size: 16px;  
  font-weight: bold;  
  color: #333;  
}  
  
.card-content {  
  display: flex;  
  flex-direction: column;  
  gap: 10px;  
}  
  
.analysis-item {  
  display: flex;  
  align-items: flex-start;  
  gap: 8px;  
}  
  
.analysis-item.success {  
  color: #5CB85C;  
}  
  
.analysis-item.warning {  
  color: #F0AD4E;  
}  
  
.analysis-item.error {  
  color: #D9534F;  
}  
  
.analysis-item.neutral {  
  color: #333;  
}  
  
.question-list {  
  margin-top: 5px;  
  margin-bottom: 0;  
  padding-left: 25px;  
}  
  
.notes-text {  
  margin: 0;  
  line-height: 1.5;  
}  
  
.raw-json-container {  
  margin-top: 15px;  
}  
  
.raw-json {  
  margin-top: 10px;  
  padding: 15px;  
  background-color: #f8f9fa;  
  border-radius: 4px;  
  border: 1px solid #dee2e6;  
}  
  
.raw-json pre {  
  margin: 0;  
  white-space: pre-wrap;  
}  
  
/* Call History Table Styling */  
.table {  
  width: 100%;  
  border-collapse: collapse;  
}  
  
.table th, .table td {  
  padding: 10px;  
  border-bottom: 1px solid #dee2e6;  
  text-align: left;  
}  
  
.table th {  
  font-weight: bold;  
  background-color: #f5f5f5;  
}  
  
.badge {  
  display: inline-block;  
  padding: 3px 8px;  
  border-radius: 12px;  
  font-size: 12px;  
  color: white;  
}  
  
.badge.incomplete {  
  background-color: #F0AD4E;  
}  
  
.badge.unsuccessful {  
  background-color: #D9534F;  
}  
  
.badge.successful {  
  background-color: #5CB85C;  
}  
  
.pagination-container {  
  display: flex;  
  justify-content: space-between;  
  align-items: center;  
  margin-top: 15px;  
}  
  
.pagination {  
  display: flex;  
  gap: 5px;  
}  
  
.page-item {  
  display: inline-block;  
  padding: 5px 10px;  
  border: 1px solid #dee2e6;  
  border-radius: 3px;  
  cursor: pointer;  
}  
  
.page-item.active {  
  background-color: #3A87AD;  
  color: white;  
  border-color: #3A87AD;  
}  
  
.page-item.disabled {  
  color: #6c757d;  
  cursor: not-allowed;  
}  

4. JavaScript for Toggle Functionality

Add this simple JavaScript to make the "View Raw JSON" button work:

// Add this to your existing JavaScript  
document.addEventListener('DOMContentLoaded', function() {  
  const toggleButton = document.querySelector('.toggle-json-btn');  
  if (toggleButton) {  
    toggleButton.addEventListener('click', function() {  
      const rawJson = document.querySelector('.raw-json');  
      if (rawJson.style.display === 'none') {  
        rawJson.style.display = 'block';  
        toggleButton.textContent = 'Hide Raw JSON';  
      } else {  
        rawJson.style.display = 'none';  
        toggleButton.textContent = 'View Raw JSON';  
      }  
    });  
  }  
});  

IMPORTANT IMPLEMENTATION NOTES:

1. The HTML provided is EXACT REPLACEMENT code - do not modify it
2. Copy and paste the CSS exactly as provided
3. The JavaScript should be added to your existing JavaScript file
4. Do not add any additional features beyond what is specified
5. Maintain all existing functionality (clicking tabs, navigation, etc.)
6. Test that both issues are fixed before submitting

Implement these specific fixes without changing anything else in the application.