Orange Charger's interactive partner and incentive data visualization tool.

• Interactive Spreadsheet: Full Excel-like editing with AG Grid

  • Upload and download .xlsx files
  • Edit cells inline
  • Add rows and columns
  • Two sheets: EC Partners and Incentives
  • Automatic validation on upload

• Interactive US Map: State-level choropleth visualization

  • Incentive density color coding
  • Partner coverage overlay
  • Click states for detailed breakdowns
  • Filter by partner type and incentive level
  • Hover tooltips with quick stats

• Password Protected: Simple access code gate

• Node.js 18+ and npm
• The Excel file: Copy of Approved Install Partner Nework .xlsx

1. Clone or extract this project

2. Install dependencies:

   npm install

3. Set up environment variables:

   • Copy .env.example to .env.local
   • Set ACCESS_CODE to your desired password

4. Run the development server:

   npm run dev

5. Open http://localhost:3000

1. You'll be prompted to enter the access code
2. Upload your Excel file from the spreadsheet page
3. Data will be validated and loaded
4. Navigate to the map to see visualizations

partner-coverage-app/
├── app/
│   ├── api/          # API routes (data, upload, download, auth)
│   ├── login/        # Login page
│   ├── spreadsheet/  # Spreadsheet view with AG Grid
│   ├── map/          # Interactive map view
│   └── layout.tsx    # Root layout with design system
├── components/
│   ├── spreadsheet/  # Upload and validation modals
│   └── map/          # Map components (legend, filters, detail panel)
├── lib/
│   ├── excel-parser.ts    # Excel parsing and validation
│   ├── schema.ts          # Column schema definitions
│   └── state-mapping.ts   # State normalization logic
└── data/             # Runtime data storage (created automatically)

Colors:

• #F4F1EA Warm ivory (page background)
• #FF571D Flame orange (primary CTA)
• #FF8961 Coral orange (hover states)
• #FFBCA5 Peach (light accents)
• #AEB595 Olive sage (partner coverage)
• #D6DACA Pale sage (alternating rows)
• #F9F7F3 Off-white (card surfaces)
• #D2D2D0 Soft gray (borders)
• #606639 Dark olive (text)

Typography:

• Font: Plus Jakarta Sans
• Headers: 22px / 700
• Body: 14px / 400
• Captions: 12px / 400

1. Push your code to GitHub
2. Import project in Vercel
3. Set environment variable: ACCESS_CODE
4. Deploy

The file-based data storage works on Vercel's filesystem (ephemeral), so for production use, consider:

• Upgrading to Vercel Postgres or Supabase for persistent storage
• Using Vercel Blob for the Excel file storage

Ensure the platform supports:

• Node.js 18+
• Next.js 15
• File system write access (for data/ directory)

• Row 1: Title
• Row 2: Headers (Partner Type, Contractor, Contact, Phone Number, Email, Areas Services, Union, Orange Projects, Price Point, Project Referrals, Notes)
• Row 3+: Data

• Row 1: Group headers (Level 1 Outlet, Level 2 Outlet, EVSE, Readiness/Panel Upgrade)
• Row 2: Column headers
• Row 3+: Data

Partner coverage areas are freeform text that get normalized to US state abbreviations:

• "CA (will travel)" → CA
• "So Cal, No Cal" → CA
• "NY, NJ, MA, CT, MD" → NY, NJ, MA, CT, MD
• "Nationwide" → All 50 states
• "Texas (will travel)" → TX

Internal tool for Orange Charger. Not for public distribution.

For issues or questions, contact the development team.