Role: Act as a Senior Frontend Engineer and UI/UX Designer.

Task: Build a high-fidelity functional prototype for a SaaS product called "Netknow".

Concept: Netknow is a "Glassdoor for Invoice Payments." It crowdsources data from accounting software to reveal how fast companies actually pay their bills compared to their contract terms (e.g., Contract says Net 30, but they actually pay in 58 days).

Tech Stack:

• Framework: React 19 (Functional Components, Hooks).
• Language: TypeScript.
• Styling: Tailwind CSS (via CDN is fine).
• Icons: lucide-react.
• Charts: recharts.
• Routing: react-router-dom.
• AI/Data: @google/genai (Gemini API) to generate realistic report data on the fly.

Core Data Logic (The "Give-to-Get" Model):

The app relies on a "Freemium/Gated" mechanic. Users can search for companies, but they cannot see detailed charts or qualitative reviews unless they "Connect" their own accounting software (simulated).

1. Global State: Manage an isConnected boolean state at the top level.
2. Simulation: Create a mock connection flow (Modal -> Select Provider -> Fake Loading -> Success) that flips this state to true.

Detailed Component Specifications

1. Service Layer (geminiService.ts)

• Initialize the Gemini API (gemini-2.5-flash).
• Create a function generateCompanyReport(companyName) that returns a JSON object.
• Prompt Logic: Ask Gemini to generate a realistic credit report. It must decide if the company is a "Good" or "Bad" payer based on the vibe of the name.