Simple CRM Application - v0 by Vercel

Build a simple CRM web application with the following features: • User authentication (sign up and login) using Supabase Auth. • Database connected to Supabase to store leads. • Lead fields: Name, Company, Email, Phone, Deal Value, Stage (Lead, Contacted, Demo Scheduled, Proposal Sent, Closed Won, Closed Lost), Notes, Created At. • Ability to add new leads through a form. • Display a table of leads showing all fields. • Stage filtering: Dropdown to filter leads by selected stage. • Import leads from a CSV file (columns: Name, Company, Email, Phone, Deal Value, Stage, Notes). • Export leads to CSV. • Edit and Delete leads. • Email reminder functionality: When a lead is added or a stage is updated to "Demo Scheduled" or "Proposal Sent", automatically send an email to hemanth@siss.co.in (use EmailJS or Supabase Edge Functions). • UI should be clean and modern with a card-style form and a responsive table. • Show a simple dashboard at the top: Total Leads Count, Total Pipeline Value (sum of all deal values). • Branding: Light theme (white background, blue primary color #3498db, subtle box shadows). • Must be responsive for desktop and mobile.

Use: • React + TailwindCSS (preferred) • Supabase for authentication and database. • EmailJS or Edge Functions for email notifications.

Keep the code clean and modular.

Show full message

CRM Application with Supabase Integration

Let's build a comprehensive CRM application with Supabase for authentication and database storage. First, we need to set up Supabase integration.

You must be logged in to connect an integration.

Great! Now that we have Supabase integrated, let's start building our CRM application. First, we need to set up the database schema for our leads.

Let's create the necessary tables in Supabase:

create-leads-table.sql

-- Create leads table
CREATE TABLE leads (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  name TEXT NOT NULL,
  company TEXT,
  email TEXT,
  phone TEXT,
  deal_value DECIMAL(10, 2),
  stage TEXT NOT NULL DEFAULT 'Lead',
  notes TEXT,
  created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
  updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
  user_id UUID REFERENCES auth.users(id) ON DELETE CASCADE
);

-- Enable Row Level Security
ALTER TABLE leads ENABLE ROW LEVEL SECURITY;

-- Create policy to allow users to see only their own leads
CREATE POLICY "Users can view their own leads" ON leads
  FOR SELECT USING (auth.uid() = user_id);

-- Create policy to allow users to insert their own leads
CREATE POLICY "Users can insert their own leads" ON leads
  FOR INSERT WITH CHECK (auth.uid() = user_id);

-- Create policy to allow users to update their own leads
CREATE POLICY "Users can update their own leads" ON leads
  FOR UPDATE USING (auth.uid() = user_id);

-- Create policy to allow users to delete their own leads
CREATE POLICY "Users can delete their own leads" ON leads
  FOR DELETE USING (auth.uid() = user_id);

-- Create function to update the updated_at timestamp
CREATE OR REPLACE FUNCTION update_updated_at_column()
RETURNS TRIGGER AS $$
BEGIN
  NEW.updated_at = NOW();
  RETURN NEW;
END;
$$ LANGUAGE plpgsql;

-- Create trigger to update the updated_at timestamp
CREATE TRIGGER update_leads_updated_at
BEFORE UPDATE ON leads
FOR EACH ROW
EXECUTE FUNCTION update_updated_at_column();

tailwind.config.ts