🧠 Joey Developer Dashboard (Vercel + API Integration)

# 🧠 Joey Developer Dashboard (Vercel + API Integration)

## 📍 Purpose

This dashboard is a web-based interface built using **Next.js (or Astro)** and hosted on **Vercel**. It acts as the control center for Joey’s stock intelligence, allowing you to:

* View, verify, and debug live stock data from Yahoo Finance and SEC EDGAR
* Manage API endpoints your Flutter app will connect to
* Experiment with Joey’s GPT stock summaries before they’re sent to users
* Train and test Joey’s tone and logic using real OpenAI GPT API
* See what Joey sees — in a clean, visual way
* Monitor online users and their portfolio trends (aggregated, anonymized)
* Track system usage, token consumption, and user interactions with GPT

---

## ✅ Why This Is a Great Idea

| Benefit                   | Explanation                                                 |
| ------------------------- | ----------------------------------------------------------- |
| 🧪 Test before going live | View raw data and debug in-browser before sending to app    |
| 🎯 Centralize logic       | API routes + frontend live in one Vercel project            |
| 🛠 Easier dev workflow    | Visual dashboard is faster than app-only testing            |
| 🧠 Joey's brain HQ        | GPT summaries, insights, and picks — all editable here      |
| 🗣️ Train Joey’s AI voice | Craft, preview, and fine-tune how Joey responds to users    |
| 📈 See user trends        | Gain insight into what stocks users are buying and watching |
| 📊 Analyze usage          | Track Joey's prompt-response logs and OpenAI token usage    |

---

## 📐 Product Requirements Document (PRD)

### ✅ Objective

To build a developer/admin dashboard that enables real-time viewing, testing, monitoring, and configuration of the Joey AI stock assistant ecosystem.

### 🧩 Features to Build

| Feature                 | Type     | Description                                              |
| ----------------------- | -------- | -------------------------------------------------------- |
| Quote Viewer            | Page     | Query live stock data by ticker using `yfinance`         |
| Pro Picks Viewer        | Page     | Load and visualize SEC 13F filings by CIK number         |
| Discover Preview        | Page     | Show AI-generated weekly stock recommendations           |
| Joey Agent Playground   | Page     | Test and fine-tune GPT prompts for Joey                  |
| Prompt Template Manager | Page     | Create/edit/save GPT system prompt templates             |
| Prompt Logs Viewer      | Page     | Log history of GPT prompts/responses with rating buttons |
| Market Scanner          | Page     | Live feed of top movers, high-volume stocks, and trends  |
| User Monitor            | Page     | Show anonymous user activity and trending holdings       |
| Analytics Dashboard     | Page     | Show API call count, token usage, top stocks/questions   |
| Admin Tools             | Page     | Manual cache clear, data push, and error viewer          |
| Admin Users             | Page     | View and manage user accounts, assign Pro roles          |
| API Endpoints           | Backend  | RESTful routes for data and AI integration               |
| Supabase Integration    | DB Layer | Store and retrieve all user, log, and trend data         |

### 🛠 Tech Stack

| Layer        | Tech                                                         |
| ------------ | ------------------------------------------------------------ |
| Frontend     | Next.js (preferred), TailwindCSS, TypeScript                 |
| Backend APIs | Node.js API routes in Next.js (or separate Python if needed) |
| Hosting      | Vercel (frontend + API routes)                               |
| GPT Service  | OpenAI API (GPT-3.5 or GPT-4)                                |
| Database     | Supabase (PostgreSQL) + Edge Functions if needed             |

### 🧑‍💻 Dev Notes

* Secure pages with basic admin auth or Supabase auth
* Store OpenAI keys securely in `.env.local` and Vercel
* Use serverless functions for all API routes to simplify maintenance
* Token tracking and logs should include timestamps, user context, and feedback
* Flutter app must be able to consume all API endpoints via HTTPS

---

## 🧱 Recommended Structure

```
joey-dashboard/
├── pages/
│   ├── index.tsx             → Dashboard UI homepage
│   ├── discover.tsx          → Preview Joey's AI picks
│   ├── pro-picks.tsx         → View SEC 13F holdings
│   ├── joey-agent.tsx        → 🧠 Test and train Joey’s AI responses
│   ├── users.tsx             → 📊 View online users & portfolio insights
│   ├── scanner.tsx           → 🔍 Real-time stock feed & trending stocks
│   ├── prompt-logs.tsx       → 🗃 View prompt-response history with feedback
│   ├── templates.tsx         → 🧩 Prompt template manager
│   ├── analytics.tsx         → 📈 Dashboard usage and token tracking
│   ├── admin/users.tsx       → 🔐 Manage user accounts and Pro access
│   ├── api/
│   │   ├── quote.ts          → Pull data from yfinance
│   │   ├── batch-quote.ts    → Multiple stock fetch
│   │   ├── pro-picks.ts      → SEC filings parser
│   │   ├── summary.ts        → GPT stock explainer
│   │   ├── users.ts          → Return active users + stocks (from Supabase)
│   │   ├── logs.ts           → Joey prompt history storage
│   │   ├── templates.ts      → Load/save Joey prompts
│   │   ├── stats.ts          → Token + app usage stats
├── components/               → Cards, charts, tables, AI prompt input
├── styles/                   → Dashboard styling
├── lib/                      → Supabase and fetch helpers
├── .env.local                → API keys, tokens
└── vercel.json               → Vercel config
```

Let me know if you want the dev to also get a UI/UX checklist, milestone tracker, or starter template.