BrokerFlow CRM

A complete React SaaS CRM application for insurance brokers built with modern technologies.

Features

• Dashboard: Real-time metrics, pipeline overview, follow-up reminders, and agent leaderboard
• Leads Management: Full CRUD operations with filtering, search, and detailed lead profiles
• Kanban Pipeline: Drag-and-drop interface to manage leads through sales stages
• Reports & Analytics: Conversion rates, revenue tracking, and performance metrics
• User Management: Role-based access control (Admin, Manager, Agent)
• Authentication: Email/password and Google OAuth with Supabase

Tech Stack

• Frontend: React 18 + TypeScript + Vite
• Styling: Tailwind CSS + shadcn/ui
• State Management: TanStack Query (React Query)
• Backend: Supabase (PostgreSQL + Auth + Realtime)
• Drag & Drop: @dnd-kit
• Charts: Recharts
• Forms: React Hook Form + Zod

Getting Started

Prerequisites

• Node.js 18+
• npm or yarn
• Supabase account

Installation

1. Clone the repository:

cd brokerflow-crm

2. Install dependencies:

npm install

3. Create a .env file with your Supabase credentials:

VITE_SUPABASE_URL=your_supabase_project_url
VITE_SUPABASE_ANON_KEY=your_supabase_anon_key

4. Set up the database by running the SQL schema in your Supabase project:

   • Copy the contents of supabase/schema.sql
   • Run it in Supabase SQL Editor

5. Enable Google OAuth in Supabase:

   • Go to Authentication > Providers
   • Enable Google and configure your OAuth credentials

6. Start the development server:

npm run dev

Project Structure

brokerflow-crm/
├── src/
│   ├── components/
│   │   ├── ui/           # shadcn/ui base components
│   │   ├── layout/       # Sidebar, Header, AppShell
│   │   └── dashboard/    # Dashboard widgets
│   ├── hooks/            # Custom React hooks
│   ├── lib/              # Utilities and Supabase client
│   ├── pages/            # Route pages
│   └── types/            # TypeScript definitions
├── supabase/
│   └── schema.sql        # Database schema
└── deployment/           # Deployment configurations

Database Schema

The application uses the following main tables:

• profiles: User profiles extending auth.users
• leads: Lead records with pipeline status
• activity_logs: Audit trail for lead interactions
• settings: Organization settings

Row Level Security (RLS)

The schema includes RLS policies for data isolation:

• Admins can view all data
• Managers can view all data
• Agents can only view their own leads

User Roles

Role	Capabilities
Admin	Full access to all features, user management, analytics
Manager	View all leads, analytics, override capabilities
Agent	View and manage own leads only

Pipeline Stages

1. Prospect - Initial contact made
2. Meeting - Scheduled meeting/completed
3. Quote - Proposal sent
4. Signed - Deal closed
5. Delivered - Policy issued

Development

Available Scripts

npm run dev      # Start development server
npm run build    # Build for production
npm run preview  # Preview production build
npm run lint     # Run ESLint

Building Components

The UI components are built using shadcn/ui pattern. To add new components:

# Copy a component from the UI library
npx shadcn-ui@latest add button

Deployment

Vercel (Recommended)

1. Push your code to GitHub
2. Connect your repository to Vercel
3. Add environment variables:
   • VITE_SUPABASE_URL
   • VITE_SUPABASE_ANON_KEY
4. Deploy

Netlify

1. Connect your repository
2. Set build command: npm run build
3. Set output directory: dist
4. Add environment variables
5. Deploy

Supabase (Database)

1. Create a new Supabase project
2. Run supabase/schema.sql in the SQL Editor
3. Configure authentication providers
4. Get your project URL and anon key

Environment Variables

Variable	Description
VITE_SUPABASE_URL	Supabase project URL
VITE_SUPABASE_ANON_KEY	Supabase anonymous key

Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Submit a pull request

License

MIT License - feel free to use this project for your own purposes.

Support

For issues and feature requests, please create a GitHub issue.