Role: Senior Frontend Engineer & UI/UX Designer

Project: "Billopsy" – An AI-Powered Medical Bill Auditor Application

Tech Stack: React 19, Tailwind CSS, Lucide React (icons), Recharts (charts), Google Gemini API (@google/genai).

Project Overview

Build a single-page React application that helps users identify errors, duplicates, and overcharges in medical bills. The app allows users to upload an image of a bill, uses AI to analyze line items against fair market rates, calculates a "health score," and generates dispute letters to help users negotiate.

1. Data Models & State

Define the following TypeScript interfaces:

• LineItem: id, code (CPT), description, chargedAmount, medicareRate (fair price), averageRate, status ('fair' | 'warning' | 'critical'), and an array of issues (strings).
• BillAnalysis: id, patientName, providerName, totalCharged, fairTotal, billDate, score (0-100), summary (string), and items (array of LineItem).
• DisputeTemplate: title, content, recipient, and type.

2. AI Integration (geminiService.ts)

Initialize the @google/genai client using process.env.API_KEY. Implement two main functions:

1. analyzeBillImage(base64):
   • Model: gemini-2.5-flash.
   • Input: Base64 image + prompt asking to extract line items, identify errors (upcoding, unbundling), and estimate Medicare rates.
   • Output: JSON matching the BillAnalysis schema.
2. generateDisputeLetter(item, context):
   • Model: gemini-2.5-flash.
   • Input: Context about the specific overcharge/error.
   • Output: JSON containing a professional dispute letter text.
3. generateNegotiationScript(analysis):
   • Input: Full analysis context.
   • Output: A phone script text for negotiating the total bill.

3. UI Components & Views

A. Global Layout

• Navbar: Sticky top, white/blur background. Logo (Stethoscope icon) + "Billopsy".
• Footer: Simple copyright text.
• Theme: Extend Tailwind with a medical color palette (primary blues: #0ea5e9, #0284c7) and alert colors (red, yellow, green). Font: Inter.