Agentic Collections

Automated collection management for B2B payments - a Wholesail product.

🚀 Quick Start Guide

Prerequisites

• Node.js v18+ (you have v22.17.0 ✅)
• npm v10+ (you have v10.9.2 ✅)
• Git v2+ (you have v2.50.1 ✅)
• Supabase account (already set up ✅)

Step 1: Clone/Download the Project

If you're setting this up from scratch:

# Create project directory
mkdir -p ~/Projects/agentic-collections
cd ~/Projects/agentic-collections

# Copy all files from the provided package
# (or clone from GitHub once pushed)

Step 2: Install Dependencies

npm install

Step 3: Set Up Environment Variables

Create a .env.local file in the project root:

# .env.local
NEXT_PUBLIC_SUPABASE_URL=https://uplqqwemsldnujlwjhia.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6InVwbHFxd2Vtc2xkbnVqbHdqaGlhIiwicm9sZSI6ImFub24iLCJpYXQiOjE3NjkwNjU0NzcsImV4cCI6MjA4NDY0MTQ3N30._K_DE2csRtqHTDx5vObc9UqrVQUJUPgcj1SdUzLsWBI

Step 4: Set Up Supabase Database

1. Go to Supabase Dashboard: https://supabase.com/dashboard/project/uplqqwemsldnujlwjhia

2. Open SQL Editor (left sidebar)

3. Run Schema SQL:

   • Open supabase/schema.sql
   • Copy ALL content
   • Paste into SQL Editor
   • Click "Run"

4. Run Seed Data SQL:

   • Open supabase/seed-data.sql
   • Copy ALL content
   • Paste into SQL Editor
   • Click "Run"

Step 5: Run the Development Server

npm run dev

Open http://localhost:3000 in your browser.

---

📁 Project Structure

agentic-collections-app/
├── src/
│   ├── app/                    # Next.js App Router pages
│   │   ├── (dashboard)/        # Dashboard route group
│   │   │   ├── dashboard/      # Main dashboard page
│   │   │   ├── queue/          # Action Queue page
│   │   │   ├── buyers/         # Buyers/Invoices page
│   │   │   ├── activity/       # Activity log page
│   │   │   ├── alerts/         # Alerts page
│   │   │   └── settings/       # Settings page
│   │   ├── globals.css         # Global styles
│   │   ├── layout.tsx          # Root layout
│   │   └── page.tsx            # Root page (redirects to dashboard)
│   ├── components/
│   │   ├── layout/             # Layout components (Sidebar, etc.)
│   │   └── ui/                 # UI components
│   ├── lib/
│   │   ├── supabase.ts         # Supabase client
│   │   └── utils.ts            # Utility functions
│   └── types/
│       └── database.ts         # TypeScript types for database
├── supabase/
│   ├── schema.sql              # Database schema
│   └── seed-data.sql           # Initial data
├── public/                     # Static assets
├── .env.local                  # Environment variables
├── package.json
├── tailwind.config.ts
└── tsconfig.json

---

🗄️ Database Schema

Core Tables

Table	Description
vendors	Vendor information (Harbor Seafood, Golden Grain)
buyers	Customer/buyer information
invoices	Invoice data with balances and due dates
contacts	Buyer contact information
vendor_configs	Vendor-level configuration
buyer_configs	Buyer-level configuration overrides
action_proposals	Generated collection actions
email_drafts	AI-generated email drafts
alerts	System alerts
sent_emails	Sent email history

---

🛠️ Using Claude Code for Development

Install Claude Code

npm install -g @anthropic-ai/claude-code

Start Claude Code in Project

cd ~/Projects/agentic-collections
claude

Example Claude Code Commands

> Read the dashboard page and explain what it does
> Add a new filter for high-risk buyers on the dashboard
> Create a new API endpoint for triggering collection actions
> Fix the TypeScript error in the Sidebar component

---

🚢 Deploying to Vercel

Step 1: Create Vercel Account

Go to https://vercel.com and sign up (free tier available).

Step 2: Push to GitHub

# Initialize git repo
git init
git add .
git commit -m "Initial commit - Agentic Collections"

# Create GitHub repo and push
# (Create repo on github.com first, then:)
git remote add origin https://github.com/YOUR_USERNAME/agentic-collections.git
git branch -M main
git push -u origin main

Step 3: Deploy on Vercel

1. Go to https://vercel.com/new
2. Import your GitHub repository
3. Add environment variables:
   • NEXT_PUBLIC_SUPABASE_URL
   • NEXT_PUBLIC_SUPABASE_ANON_KEY
4. Click "Deploy"

---

📋 Development Checklist

Completed ✅

• Project structure setup
• Supabase integration
• Database schema
• Seed data from Excel files
• Dashboard with Aging report
• Action Queue page
• Sidebar navigation
• Wholesail-style UI

Next Steps 🚧

• Trigger Engine implementation
• Email generation with LLM
• Settings configuration UI
• Email sending service
• Activity log with real data
• Alert management

---

🎨 UI Reference

The UI is designed to match Wholesail's existing dashboard style:

• Clean, minimal design
• Teal (#0D9488) as primary color
• White sidebar with clear navigation
• Table-based data displays
• Subtle hover states and transitions

---

📞 Support

For questions about this project, refer to the PRD documentation or contact the product team.