[V0_FILE]sql:file="scripts/001_create_email_system_tables.sql" isMerged="true" -- Email System Database Schema -- Profiles table (extends auth.users) CREATE TABLE IF NOT EXISTS profiles ( id UUID PRIMARY KEY REFERENCES auth.users(id) ON DELETE CASCADE, full_name TEXT, company_name TEXT, avatar_url TEXT, timezone TEXT DEFAULT 'UTC', created_at TIMESTAMPTZ DEFAULT NOW(), updated_at TIMESTAMPTZ DEFAULT NOW() ); -- Contact lists for organizing recipients CREATE TABLE IF NOT EXISTS contact_lists ( id UUID PRIMARY KEY DEFAULT gen_random_uuid(), user_id UUID NOT NULL REFERENCES auth.users(id) ON DELETE CASCADE, name TEXT NOT NULL, description TEXT, color TEXT DEFAULT '#3b82f6', contact_count INTEGER DEFAULT 0, created_at TIMESTAMPTZ DEFAULT NOW(), updated_at TIMESTAMPTZ DEFAULT NOW() ); -- Contacts (email recipients) CREATE TABLE IF NOT EXISTS contacts ( id UUID PRIMARY KEY DEFAULT gen_random_uuid(), user_id UUID NOT NULL REFERENCES auth.users(id) ON DELETE CASCADE, email TEXT NOT NULL, first_name TEXT, last_name TEXT, company TEXT, status TEXT DEFAULT 'active' CHECK (status IN ('active', 'unsubscribed', 'bounced', 'complained')), tags TEXT[] DEFAULT '{}', custom_fields JSONB DEFAULT '{}', created_at TIMESTAMPTZ DEFAULT NOW(), updated_at TIMESTAMPTZ DEFAULT NOW(), UNIQUE(user_id, email) ); -- Junction table for contacts and lists CREATE TABLE IF NOT EXISTS contact_list_members ( id UUID PRIMARY KEY DEFAULT gen_random_uuid(), contact_id UUID NOT NULL REFERENCES contacts(id) ON DELETE CASCADE, list_id UUID NOT NULL REFERENCES contact_lists(id) ON DELETE CASCADE, added_at TIMESTAMPTZ DEFAULT NOW(), UNIQUE(contact_id, list_id) ); -- Email templates CREATE TABLE IF NOT EXISTS email_templates ( id UUID PRIMARY KEY DEFAULT gen_random_uuid(), user_id UUID NOT NULL REFERENCES auth.users(id) ON DELETE CASCADE, name TEXT NOT NULL, subject TEXT NOT NULL, html_content TEXT NOT NULL, text_content TEXT, category TEXT DEFAULT 'general', is_default BOOLEAN DEFAULT FALSE, created_at TIMESTAMPTZ DEFAULT NOW(), updated_at TIMESTAMPTZ DEFAULT NOW() ); -- Email campaigns CREATE TABLE IF NOT EXISTS campaigns ( id UUID PRIMARY KEY DEFAULT gen_random_uuid(), user_id UUID NOT NULL REFERENCES auth.users(id) ON DELETE CASCADE, name TEXT NOT NULL, subject TEXT NOT NULL, from_name TEXT NOT NULL, from_email TEXT NOT NULL, reply_to TEXT, html_content TEXT NOT NULL, text_content TEXT, template_id UUID REFERENCES email_templates(id) ON DELETE SET NULL, status TEXT DEFAULT 'draft' CHECK (status IN ('draft', 'scheduled', 'sending', 'sent', 'paused', 'cancelled')), scheduled_at TIMESTAMPTZ, sent_at TIMESTAMPTZ, total_recipients INTEGER DEFAULT 0, sent_count INTEGER DEFAULT 0, created_at TIMESTAMPTZ DEFAULT NOW(), updated_at TIMESTAMPTZ DEFAULT NOW() ); -- Junction table for campaigns and lists CREATE TABLE IF NOT EXISTS campaign_lists ( id UUID PRIMARY KEY DEFAULT gen_random_uuid(), campaign_id UUID NOT NULL REFERENCES campaigns(id) ON DELETE CASCADE, list_id UUID NOT NULL REFERENCES contact_lists(id) ON DELETE CASCADE, UNIQUE(campaign_id, list_id) ); -- Individual email sends (tracking each email) CREATE TABLE IF NOT EXISTS email_sends ( id UUID PRIMARY KEY DEFAULT gen_random_uuid(), campaign_id UUID NOT NULL REFERENCES campaigns(id) ON DELETE CASCADE, contact_id UUID NOT NULL REFERENCES contacts(id) ON DELETE CASCADE, status TEXT DEFAULT 'pending' CHECK (status IN ('pending', 'sent', 'delivered', 'bounced', 'failed', 'complained')), sent_at TIMESTAMPTZ, delivered_at TIMESTAMPTZ, bounce_type TEXT, bounce_reason TEXT, error_message TEXT, created_at TIMESTAMPTZ DEFAULT NOW() ); -- Email events (opens, clicks, etc.) CREATE TABLE IF NOT EXISTS email_events ( id UUID PRIMARY KEY DEFAULT gen_random_uuid(), email_send_id UUID NOT NULL REFERENCES email_sends(id) ON DELETE CASCADE, campaign_id UUID NOT NULL REFERENCES campaigns(id) ON DELETE CASCADE, contact_id UUID NOT NULL REFERENCES contacts(id) ON DELETE CASCADE, event_type TEXT NOT NULL CHECK (event_type IN ('open', 'click', 'unsubscribe', 'complaint', 'bounce')), link_url TEXT, ip_address TEXT, user_agent TEXT, location JSONB, created_at TIMESTAMPTZ DEFAULT NOW() ); -- Alerts and notifications CREATE TABLE IF NOT EXISTS alerts ( id UUID PRIMARY KEY DEFAULT gen_random_uuid(), user_id UUID NOT NULL REFERENCES auth.users(id) ON DELETE CASCADE, type TEXT NOT NULL CHECK (type IN ('bounce', 'complaint', 'unsubscribe', 'campaign_complete', 'system')), title TEXT NOT NULL, message TEXT NOT NULL, severity TEXT DEFAULT 'info' CHECK (severity IN ('info', 'warning', 'error', 'success')), related_campaign_id UUID REFERENCES campaigns(id) ON DELETE SET NULL, related_contact_id UUID REFERENCES contacts(id) ON DELETE SET NULL, is_read BOOLEAN DEFAULT FALSE, created_at TIMESTAMPTZ DEFAULT NOW() ); -- Gmail connection settings CREATE TABLE IF NOT EXISTS gmail_settings ( id UUID PRIMARY KEY DEFAULT gen_random_uuid(), user_id UUID NOT NULL REFERENCES auth.users(id) ON DELETE CASCADE UNIQUE, gmail_email TEXT NOT NULL, app_password TEXT NOT NULL, -- Store encrypted in production daily_limit INTEGER DEFAULT 500, sent_today INTEGER DEFAULT 0, last_reset_date DATE DEFAULT CURRENT_DATE, is_active BOOLEAN DEFAULT TRUE, created_at TIMESTAMPTZ DEFAULT NOW(), updated_at TIMESTAMPTZ DEFAULT NOW() ); -- Create indexes for better query performance CREATE INDEX IF NOT EXISTS idx_contacts_user_id ON contacts(user_id); CREATE INDEX IF NOT EXISTS idx_contacts_email ON contacts(email); CREATE INDEX IF NOT EXISTS idx_contacts_status ON contacts(status); CREATE INDEX IF NOT EXISTS idx_campaigns_user_id ON campaigns(user_id); CREATE INDEX IF NOT EXISTS idx_campaigns_status ON campaigns(status); CREATE INDEX IF NOT EXISTS idx_email_sends_campaign_id ON email_sends(campaign_id); CREATE INDEX IF NOT EXISTS idx_email_sends_contact_id ON email_sends(contact_id); CREATE INDEX IF NOT EXISTS idx_email_events_campaign_id ON email_events(campaign_id); CREATE INDEX IF NOT EXISTS idx_email_events_event_type ON email_events(event_type); CREATE INDEX IF NOT EXISTS idx_alerts_user_id ON alerts(user_id); CREATE INDEX IF NOT EXISTS idx_alerts_is_read ON alerts(is_read); [V0_FILE]sql:file="scripts/002_enable_rls_policies.sql" isMerged="true" -- Enable Row Level Security on all tables ALTER TABLE profiles ENABLE ROW LEVEL SECURITY; ALTER TABLE contact_lists ENABLE ROW LEVEL SECURITY; ALTER TABLE contacts ENABLE ROW LEVEL SECURITY; ALTER TABLE contact_list_members ENABLE ROW LEVEL SECURITY; ALTER TABLE email_templates ENABLE ROW LEVEL SECURITY; ALTER TABLE campaigns ENABLE ROW LEVEL SECURITY; ALTER TABLE campaign_lists ENABLE ROW LEVEL SECURITY; ALTER TABLE email_sends ENABLE ROW LEVEL SECURITY; ALTER TABLE email_events ENABLE ROW LEVEL SECURITY; ALTER TABLE alerts ENABLE ROW LEVEL SECURITY; ALTER TABLE gmail_settings ENABLE ROW LEVEL SECURITY; -- Profiles policies CREATE POLICY "Users can view own profile" ON profiles FOR SELECT USING (auth.uid() = id); CREATE POLICY "Users can update own profile" ON profiles FOR UPDATE USING (auth.uid() = id); CREATE POLICY "Users can insert own profile" ON profiles FOR INSERT WITH CHECK (auth.uid() = id); -- Contact lists policies CREATE POLICY "Users can view own contact lists" ON contact_lists FOR SELECT USING (auth.uid() = user_id); CREATE POLICY "Users can insert own contact lists" ON contact_lists FOR INSERT WITH CHECK (auth.uid() = user_id); CREATE POLICY "Users can update own contact lists" ON contact_lists FOR UPDATE USING (auth.uid() = user_id); CREATE POLICY "Users can delete own contact lists" ON contact_lists FOR DELETE USING (auth.uid() = user_id); -- Contacts policies CREATE POLICY "Users can view own contacts" ON contacts FOR SELECT USING (auth.uid() = user_id); CREATE POLICY "Users can insert own contacts" ON contacts FOR INSERT WITH CHECK (auth.uid() = user_id); CREATE POLICY "Users can update own contacts" ON contacts FOR UPDATE USING (auth.uid() = user_id); CREATE POLICY "Users can delete own contacts" ON contacts FOR DELETE USING (auth.uid() = user_id); -- Contact list members policies (through contacts ownership) CREATE POLICY "Users can view own contact list members" ON contact_list_members FOR SELECT USING (EXISTS (SELECT 1 FROM contacts WHERE contacts.id = contact_list_members.contact_id AND contacts.user_id = auth.uid())); CREATE POLICY "Users can insert own contact list members" ON contact_list_members FOR INSERT WITH CHECK (EXISTS (SELECT 1 FROM contacts WHERE contacts.id = contact_list_members.contact_id AND contacts.user_id = auth.uid())); CREATE POLICY "Users can delete own contact list members" ON contact_list_members FOR DELETE USING (EXISTS (SELECT 1 FROM contacts WHERE contacts.id = contact_list_members.contact_id AND contacts.user_id = auth.uid())); -- Email templates policies CREATE POLICY "Users can view own templates" ON email_templates FOR SELECT USING (auth.uid() = user_id); CREATE POLICY "Users can insert own templates" ON email_templates FOR INSERT WITH CHECK (auth.uid() = user_id); CREATE POLICY "Users can update own templates" ON email_templates FOR UPDATE USING (auth.uid() = user_id); CREATE POLICY "Users can delete own templates" ON email_templates FOR DELETE USING (auth.uid() = user_id); -- Campaigns policies CREATE POLICY "Users can view own campaigns" ON campaigns FOR SELECT USING (auth.uid() = user_id); CREATE POLICY "Users can insert own campaigns" ON campaigns FOR INSERT WITH CHECK (auth.uid() = user_id); CREATE POLICY "Users can update own campaigns" ON campaigns FOR UPDATE USING (auth.uid() = user_id); CREATE POLICY "Users can delete own campaigns" ON campaigns FOR DELETE USING (auth.uid() = user_id); -- Campaign lists policies CREATE POLICY "Users can view own campaign lists" ON campaign_lists FOR SELECT USING (EXISTS (SELECT 1 FROM campaigns WHERE campaigns.id = campaign_lists.campaign_id AND campaigns.user_id = auth.uid())); CREATE POLICY "Users can insert own campaign lists" ON campaign_lists FOR INSERT WITH CHECK (EXISTS (SELECT 1 FROM campaigns WHERE campaigns.id = campaign_lists.campaign_id AND campaigns.user_id = auth.uid())); CREATE POLICY "Users can delete own campaign lists" ON campaign_lists FOR DELETE USING (EXISTS (SELECT 1 FROM campaigns WHERE campaigns.id = campaign_lists.campaign_id AND campaigns.user_id = auth.uid())); -- Email sends policies CREATE POLICY "Users can view own email sends" ON email_sends FOR SELECT USING (EXISTS (SELECT 1 FROM campaigns WHERE campaigns.id = email_sends.campaign_id AND campaigns.user_id = auth.uid())); CREATE POLICY "Users can insert own email sends" ON email_sends FOR INSERT WITH CHECK (EXISTS (SELECT 1 FROM campaigns WHERE campaigns.id = email_sends.campaign_id AND campaigns.user_id = auth.uid())); CREATE POLICY "Users can update own email sends" ON email_sends FOR UPDATE USING (EXISTS (SELECT 1 FROM campaigns WHERE campaigns.id = email_sends.campaign_id AND campaigns.user_id = auth.uid())); -- Email events policies CREATE POLICY "Users can view own email events" ON email_events FOR SELECT USING (EXISTS (SELECT 1 FROM campaigns WHERE campaigns.id = email_events.campaign_id AND campaigns.user_id = auth.uid())); CREATE POLICY "Users can insert own email events" ON email_events FOR INSERT WITH CHECK (EXISTS (SELECT 1 FROM campaigns WHERE campaigns.id = email_events.campaign_id AND campaigns.user_id = auth.uid())); -- Alerts policies CREATE POLICY "Users can view own alerts" ON alerts FOR SELECT USING (auth.uid() = user_id); CREATE POLICY "Users can insert own alerts" ON alerts FOR INSERT WITH CHECK (auth.uid() = user_id); CREATE POLICY "Users can update own alerts" ON alerts FOR UPDATE USING (auth.uid() = user_id); CREATE POLICY "Users can delete own alerts" ON alerts FOR DELETE USING (auth.uid() = user_id); -- Gmail settings policies CREATE POLICY "Users can view own gmail settings" ON gmail_settings FOR SELECT USING (auth.uid() = user_id); CREATE POLICY "Users can insert own gmail settings" ON gmail_settings FOR INSERT WITH CHECK (auth.uid() = user_id); CREATE POLICY "Users can update own gmail settings" ON gmail_settings FOR UPDATE USING (auth.uid() = user_id); CREATE POLICY "Users can delete own gmail settings" ON gmail_settings FOR DELETE USING (auth.uid() = user_id); [V0_FILE]sql:file="scripts/003_create_profile_trigger.sql" isMerged="true" -- Auto-create profile on user signup CREATE OR REPLACE FUNCTION public.handle_new_user() RETURNS TRIGGER LANGUAGE plpgsql SECURITY DEFINER SET search_path = public AS $$ BEGIN INSERT INTO public.profiles (id, full_name) VALUES ( NEW.id, COALESCE(NEW.raw_user_meta_data ->> 'full_name', NEW.email) ) ON CONFLICT (id) DO NOTHING; RETURN NEW; END; $$; DROP TRIGGER IF EXISTS on_auth_user_created ON auth.users; CREATE TRIGGER on_auth_user_created AFTER INSERT ON auth.users FOR EACH ROW EXECUTE FUNCTION public.handle_new_user(); [V0_FILE]typescript:file="lib/supabase/client.ts" isMerged="true" import { createBrowserClient } from "@supabase/ssr" export function createClient() { return createBrowserClient(process.env.NEXT_PUBLIC_SUPABASE_URL!, process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!) } [V0_FILE]typescript:file="lib/supabase/server.ts" isMerged="true" import { createServerClient } from "@supabase/ssr" import { cookies } from "next/headers" export async function createClient() { const cookieStore = await cookies() return createServerClient(process.env.NEXT_PUBLIC_SUPABASE_URL!, process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!, { cookies: { getAll() { return cookieStore.getAll() }, setAll(cookiesToSet) { try { cookiesToSet.forEach(({ name, value, options }) => cookieStore.set(name, value, options)) } catch { // The "setAll" method was called from a Server Component. } }, }, }) } [V0_FILE]typescript:file="lib/supabase/proxy.ts" isMerged="true" import { createServerClient } from "@supabase/ssr" import { NextResponse, type NextRequest } from "next/server" export async function updateSession(request: NextRequest) { let supabaseResponse = NextResponse.next({ request, }) const supabase = createServerClient( process.env.NEXT_PUBLIC_SUPABASE_URL!, process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!, { cookies: { getAll() { return request.cookies.getAll() }, setAll(cookiesToSet) { cookiesToSet.forEach(({ name, value }) => request.cookies.set(name, value)) supabaseResponse = NextResponse.next({ request, }) cookiesToSet.forEach(({ name, value, options }) => supabaseResponse.cookies.set(name, value, options)) }, }, }, ) const { data: { user }, } = await supabase.auth.getUser() // Protect dashboard routes if (request.nextUrl.pathname.startsWith("/dashboard") && !user) { const url = request.nextUrl.clone() url.pathname = "/auth/login" return NextResponse.redirect(url) } // Redirect logged-in users away from auth pages if (request.nextUrl.pathname.startsWith("/auth") && user) { const url = request.nextUrl.clone() url.pathname = "/dashboard" return NextResponse.redirect(url) } return supabaseResponse } [V0_FILE]typescript:file="proxy.ts" isMerged="true" import { updateSession } from "@/lib/supabase/proxy" import type { NextRequest } from "next/server" export async function proxy(request: NextRequest) { return await updateSession(request) } export const config = { matcher: ["/((?!_next/static|_next/image|favicon.ico|.*\\.(?:svg|png|jpg|jpeg|gif|webp)$).*)"], } [V0_FILE]typescript:file="lib/types.ts" isMerged="true" export interface Profile { id: string full_name: string | null company_name: string | null avatar_url: string | null timezone: string created_at: string updated_at: string } export interface ContactList { id: string user_id: string name: string description: string | null color: string contact_count: number created_at: string updated_at: string } export interface Contact { id: string user_id: string email: string first_name: string | null last_name: string | null company: string | null status: "active" | "unsubscribed" | "bounced" | "complained" tags: string[] custom_fields: Record created_at: string updated_at: string } export interface EmailTemplate { id: string user_id: string name: string subject: string html_content: string text_content: string | null category: string is_default: boolean created_at: string updated_at: string } export interface Campaign { id: string user_id: string name: string subject: string from_name: string from_email: string reply_to: string | null html_content: string text_content: string | null template_id: string | null status: "draft" | "scheduled" | "sending" | "sent" | "paused" | "cancelled" scheduled_at: string | null sent_at: string | null total_recipients: number sent_count: number created_at: string updated_at: string } export interface EmailSend { id: string campaign_id: string contact_id: string status: "pending" | "sent" | "delivered" | "bounced" | "failed" | "complained" sent_at: string | null delivered_at: string | null bounce_type: string | null bounce_reason: string | null error_message: string | null created_at: string } export interface EmailEvent { id: string email_send_id: string campaign_id: string contact_id: string event_type: "open" | "click" | "unsubscribe" | "complaint" | "bounce" link_url: string | null ip_address: string | null user_agent: string | null location: Record | null created_at: string } export interface Alert { id: string user_id: string type: "bounce" | "complaint" | "unsubscribe" | "campaign_complete" | "system" title: string message: string severity: "info" | "warning" | "error" | "success" related_campaign_id: string | null related_contact_id: string | null is_read: boolean created_at: string } export interface GmailSettings { id: string user_id: string gmail_email: string app_password: string daily_limit: number sent_today: number last_reset_date: string is_active: boolean created_at: string updated_at: string } export interface CampaignStats { total_sent: number delivered: number opened: number clicked: number bounced: number unsubscribed: number complained: number open_rate: number click_rate: number bounce_rate: number } [V0_FILE]typescriptreact:file="app/auth/login/page.tsx" isEdit="true" isMerged="true" "use client" import type React from "react" import { createClient } from "@/lib/supabase/client" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import Link from "next/link" import { useRouter } from "next/navigation" import { useState } from "react" import { Send, Lock, ArrowRight, Mail } from "lucide-react" export default function LoginPage() { const [email, setEmail] = useState("") const [password, setPassword] = useState("") const [error, setError] = useState(null) const [isLoading, setIsLoading] = useState(false) const router = useRouter() const handleLogin = async (e: React.FormEvent) => { e.preventDefault() const supabase = createClient() setIsLoading(true) setError(null) try { const { error } = await supabase.auth.signInWithPassword({ email, password, }) if (error) throw error router.push("/dashboard") } catch (error: unknown) { setError(error instanceof Error ? error.message : "An error occurred") } finally { setIsLoading(false) } } return (

Sendly

Advanced Email Marketing Platform

Welcome back Sign in to your account to continue

) } [V0_FILE]typescriptreact:file="app/auth/sign-up/page.tsx" isEdit="true" isMerged="true" "use client" import type React from "react" import { createClient } from "@/lib/supabase/client" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import Link from "next/link" import { useRouter } from "next/navigation" import { useState } from "react" import { Send, Lock, User, ArrowRight, Mail } from "lucide-react" export default function SignUpPage() { const [fullName, setFullName] = useState("") const [email, setEmail] = useState("") const [password, setPassword] = useState("") const [confirmPassword, setConfirmPassword] = useState("") const [error, setError] = useState(null) const [isLoading, setIsLoading] = useState(false) const router = useRouter() const handleSignUp = async (e: React.FormEvent) => { e.preventDefault() const supabase = createClient() setIsLoading(true) setError(null) if (password !== confirmPassword) { setError("Passwords do not match") setIsLoading(false) return } if (password.length < 6) { setError("Password must be at least 6 characters") setIsLoading(false) return } try { const { error } = await supabase.auth.signUp({ email, password, options: { emailRedirectTo: process.env.NEXT_PUBLIC_DEV_SUPABASE_REDIRECT_URL || `${window.location.origin}/dashboard`, data: { full_name: fullName, }, }, }) if (error) throw error router.push("/auth/sign-up-success") } catch (error: unknown) { setError(error instanceof Error ? error.message : "An error occurred") } finally { setIsLoading(false) } } return (

Sendly

Advanced Email Marketing Platform

Create an account Start sending professional email campaigns today

Full Name

setFullName(e.target.value)} className="pl-10" />

setEmail(e.target.value)} className="pl-10" />

Password

setPassword(e.target.value)} className="pl-10" />

Confirm Password

setConfirmPassword(e.target.value)} className="pl-10" />

{error &&

{error}

}

Already have an account?{" "} Sign in

) } [V0_FILE]typescriptreact:file="app/auth/sign-up-success/page.tsx" isMerged="true" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Mail, CheckCircle } from "lucide-react" import Link from "next/link" import { Button } from "@/components/ui/button" export default function SignUpSuccessPage() { return (

MailFlow

Check your email We've sent you a confirmation link

Please check your email inbox and click the confirmation link to activate your account. The link will expire in 24 hours.

) } [V0_FILE]typescriptreact:file="app/auth/error/page.tsx" isMerged="true" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { AlertTriangle, Mail } from "lucide-react" import Link from "next/link" import { Button } from "@/components/ui/button" export default async function AuthErrorPage({ searchParams, }: { searchParams: Promise<{ error?: string }> }) { const params = await searchParams return (

MailFlow

Authentication Error

{params?.error || "An unexpected error occurred during authentication."}

) } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isMerged="true" import type React from "react" import Link from "next/link" import { Button } from "@/components/ui/button" import { BarChart3, Users, Bell, ArrowRight, CheckCircle, Send, Eye, MousePointer, AlertTriangle, Inbox, TrendingUp, } from "lucide-react" export default function HomePage() { return (

{/* Header */}

Sendly

{/* Hero Section */}

100% Inbox Delivery with Gmail Integration

The Most Advanced Email Marketing Platform

Send campaigns through Gmail, track every open and click, get instant bounce alerts, spam warnings, and powerful analytics. Everything you need to master email marketing.

{/* Stats */}

{/* Features Grid */}

Everything You Need to Succeed

Sendly gives you all the advanced features to run successful email campaigns with Gmail integration

} title="Gmail Integration" description="Send emails directly through your Gmail account. Easy setup with app passwords for maximum deliverability." color="emerald" /> } title="Open Tracking" description="Know exactly who opened your emails, when they opened them, and how many times. Real-time notifications." color="blue" /> } title="Click Tracking" description="Track every link click with detailed analytics. See which content resonates with your audience." color="violet" /> } title="Bounce Alerts" description="Instant notifications for hard and soft bounces. Automatically manage your contact list health." color="amber" /> } title="Spam Detection" description="Get warnings before you send. Our spam checker analyzes your content for deliverability issues." color="rose" /> } title="Contact Management" description="Organize contacts into lists, add tags, import/export, and segment your audience for targeted campaigns." color="cyan" /> } title="Advanced Analytics" description="Comprehensive dashboards with open rates, click rates, bounce rates, and engagement trends over time." color="indigo" /> } title="Real-time Notifications" description="Get instant alerts for opens, clicks, bounces, and complaints. Never miss an important event." color="orange" /> } title="Deliverability Score" description="Monitor your sender reputation with our deliverability score. Tips to improve inbox placement." color="teal" />

{/* Dashboard Preview */}

Powerful Dashboard

Everything you need at your fingertips

Total Sent

24,521

+12% from last month

Open Rate

68.4%

+5.2% from last month

Click Rate

24.8%

+3.1% from last month

{/* CTA Section */}

Ready to Transform Your Email Marketing?

Join thousands of marketers who trust Sendly for their email campaigns.

No credit card required

500 free emails/day

Gmail integration included

{/* Footer */}

) } function StatCard({ value, label }: { value: string; label: string }) { return (

{value}

{label}

) } function FeatureCard({ icon, title, description, color, }: { icon: React.ReactNode title: string description: string color: string }) { const colorClasses: Record = { emerald: "bg-emerald-100 text-emerald-600 dark:bg-emerald-950 dark:text-emerald-400", blue: "bg-blue-100 text-blue-600 dark:bg-blue-950 dark:text-blue-400", violet: "bg-violet-100 text-violet-600 dark:bg-violet-950 dark:text-violet-400", amber: "bg-amber-100 text-amber-600 dark:bg-amber-950 dark:text-amber-400", rose: "bg-rose-100 text-rose-600 dark:bg-rose-950 dark:text-rose-400", cyan: "bg-cyan-100 text-cyan-600 dark:bg-cyan-950 dark:text-cyan-400", indigo: "bg-indigo-100 text-indigo-600 dark:bg-indigo-950 dark:text-indigo-400", orange: "bg-orange-100 text-orange-600 dark:bg-orange-950 dark:text-orange-400", teal: "bg-teal-100 text-teal-600 dark:bg-teal-950 dark:text-teal-400", } return (

{icon}

{title}

{description}

) } [V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true" isMerged="true" import type React from "react" import type { Metadata, Viewport } from "next" import { Inter, JetBrains_Mono } from "next/font/google" import { Analytics } from "@vercel/analytics/next" import { Toaster } from "@/components/ui/sonner" import "./globals.css" const _inter = Inter({ subsets: ["latin"] }) const _jetbrainsMono = JetBrains_Mono({ subsets: ["latin"] }) export const metadata: Metadata = { title: "Sendly - Advanced Email Marketing Platform", description: "Send professional email campaigns with Gmail, track opens and clicks, manage bounces, and grow your audience with Sendly.", generator: "v0.app", } export const viewport: Viewport = { themeColor: [ { media: "(prefers-color-scheme: light)", color: "#ffffff" }, { media: "(prefers-color-scheme: dark)", color: "#09090b" }, ], } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]json:file="package.json" isMerged="true" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "eslint ." }, "dependencies": { "@hookform/resolvers": "^3.10.0", "@radix-ui/react-accordion": "1.2.2", "@radix-ui/react-alert-dialog": "1.1.4", "@radix-ui/react-aspect-ratio": "1.1.1", "@radix-ui/react-avatar": "1.1.2", "@radix-ui/react-checkbox": "1.1.3", "@radix-ui/react-collapsible": "1.1.2", "@radix-ui/react-context-menu": "2.2.4", "@radix-ui/react-dialog": "1.1.4", "@radix-ui/react-dropdown-menu": "2.1.4", "@radix-ui/react-hover-card": "1.1.4", "@radix-ui/react-label": "2.1.1", "@radix-ui/react-menubar": "1.1.4", "@radix-ui/react-navigation-menu": "1.2.3", "@radix-ui/react-popover": "1.1.4", "@radix-ui/react-progress": "1.1.1", "@radix-ui/react-radio-group": "1.2.2", "@radix-ui/react-scroll-area": "1.2.2", "@radix-ui/react-select": "2.1.4", "@radix-ui/react-separator": "1.1.1", "@radix-ui/react-slider": "1.2.2", "@radix-ui/react-slot": "1.1.1", "@radix-ui/react-switch": "1.1.2", "@radix-ui/react-tabs": "1.1.2", "@radix-ui/react-toast": "1.2.4", "@radix-ui/react-toggle": "1.1.1", "@radix-ui/react-toggle-group": "1.1.1", "@radix-ui/react-tooltip": "1.1.6", "@vercel/analytics": "1.3.1", "autoprefixer": "^10.4.20", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "1.0.4", "date-fns": "4.1.0", "embla-carousel-react": "8.5.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "16.0.7", "next-themes": "^0.4.6", "react": "19.2.0", "react-day-picker": "9.8.0", "react-dom": "19.2.0", "react-hook-form": "^7.60.0", "react-resizable-panels": "^2.1.7", "recharts": "2.15.4", "sonner": "^1.7.4", "tailwind-merge": "^3.3.1", "tailwindcss-animate": "^1.0.7", "vaul": "^1.1.2", "zod": "3.25.76", "@supabase/ssr": "0.8.0", "nodemailer": "7.0.11", "@supabase/supabase-js": "2.87.1" }, "devDependencies": { "@tailwindcss/postcss": "^4.1.9", "@types/node": "^22", "@types/react": "^19", "@types/react-dom": "^19", "postcss": "^8.5", "tailwindcss": "^4.1.9", "tw-animate-css": "1.3.3", "typescript": "^5" } } [V0_FILE]typescriptreact:file="components/dashboard/sidebar.tsx" isEdit="true" isMerged="true" "use client" import Link from "next/link" import { usePathname } from "next/navigation" import { cn } from "@/lib/utils" import { Send, LayoutDashboard, Users, ListChecks, BarChart3, Bell, Settings, LogOut, FileText, ChevronLeft, ChevronRight, } from "lucide-react" import { Button } from "@/components/ui/button" import { createClient } from "@/lib/supabase/client" import { useRouter } from "next/navigation" import { useState } from "react" import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip" const navigation = [ { name: "Dashboard", href: "/dashboard", icon: LayoutDashboard }, { name: "Campaigns", href: "/dashboard/campaigns", icon: Send }, { name: "Contacts", href: "/dashboard/contacts", icon: Users }, { name: "Lists", href: "/dashboard/lists", icon: ListChecks }, { name: "Templates", href: "/dashboard/templates", icon: FileText }, { name: "Analytics", href: "/dashboard/analytics", icon: BarChart3 }, { name: "Alerts", href: "/dashboard/alerts", icon: Bell }, ] const bottomNavigation = [{ name: "Settings", href: "/dashboard/settings", icon: Settings }] export function Sidebar() { const pathname = usePathname() const router = useRouter() const [collapsed, setCollapsed] = useState(false) const handleSignOut = async () => { const supabase = createClient() await supabase.auth.signOut() router.push("/auth/login") } return (

{/* Logo - Updated to Sendly branding */}

{!collapsed && (

Sendly )} {collapsed && (

)}

{/* Navigation */}

{navigation.map((item) => { const isActive = pathname === item.href || (item.href !== "/dashboard" && pathname.startsWith(item.href)) const linkContent = ( {!collapsed && {item.name}} ) if (collapsed) { return ( {linkContent} {item.name} ) } return linkContent })}

{/* Bottom Navigation */}

{bottomNavigation.map((item) => { const isActive = pathname === item.href || pathname.startsWith(item.href) const linkContent = ( {!collapsed && {item.name}} ) if (collapsed) { return ( {linkContent} {item.name} ) } return linkContent })} {collapsed ? ( Sign Out ) : ( )}

{/* Collapse Toggle */}

) } [V0_FILE]typescriptreact:file="components/dashboard/header.tsx" isMerged="true" "use client" import { Bell, Search, User } from "lucide-react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu" import { Avatar, AvatarFallback } from "@/components/ui/avatar" import { Badge } from "@/components/ui/badge" import Link from "next/link" import { createClient } from "@/lib/supabase/client" import { useRouter } from "next/navigation" import { useEffect, useState } from "react" import type { Alert, Profile } from "@/lib/types" export function Header() { const router = useRouter() const [profile, setProfile] = useState(null) const [unreadAlerts, setUnreadAlerts] = useState([]) useEffect(() => { const fetchData = async () => { const supabase = createClient() const { data: { user }, } = await supabase.auth.getUser() if (!user) return // Fetch profile const { data: profileData } = await supabase.from("profiles").select("*").eq("id", user.id).single() if (profileData) { setProfile(profileData) } // Fetch unread alerts const { data: alertsData } = await supabase .from("alerts") .select("*") .eq("user_id", user.id) .eq("is_read", false) .order("created_at", { ascending: false }) .limit(5) if (alertsData) { setUnreadAlerts(alertsData) } } fetchData() }, []) const handleSignOut = async () => { const supabase = createClient() await supabase.auth.signOut() router.push("/auth/login") } const getInitials = (name: string | null) => { if (!name) return "U" return name .split(" ") .map((n) => n[0]) .join("") .toUpperCase() .slice(0, 2) } return (

{/* Search */}

{/* Actions */}

{/* Notifications */} Notifications {unreadAlerts.length === 0 ? (

No new notifications

) : ( <> {unreadAlerts.map((alert) => ( {alert.title} {alert.message} ))} View all notifications )} {/* User Menu */}

{profile?.full_name || "User"}

{profile?.company_name || "No company"}

Settings Sign out

) } [V0_FILE]typescriptreact:file="components/dashboard/stats-card.tsx" isMerged="true" import type React from "react" import { Card, CardContent } from "@/components/ui/card" import { cn } from "@/lib/utils" interface StatsCardProps { title: string value: string | number description?: string icon: React.ReactNode trend?: { value: number isPositive: boolean } className?: string } export function StatsCard({ title, value, description, icon, trend, className }: StatsCardProps) { return (

{icon}

{trend && ( {trend.isPositive ? "+" : ""} {trend.value}% )}

{value}

{title}

{description &&

{description}

}

) } [V0_FILE]typescriptreact:file="app/dashboard/layout.tsx" isMerged="true" import type React from "react" import { redirect } from "next/navigation" import { createClient } from "@/lib/supabase/server" import { Sidebar } from "@/components/dashboard/sidebar" import { Header } from "@/components/dashboard/header" export default async function DashboardLayout({ children, }: { children: React.ReactNode }) { const supabase = await createClient() const { data: { user }, error, } = await supabase.auth.getUser() if (error || !user) { redirect("/auth/login") } return (

{children}

) } [V0_FILE]typescriptreact:file="app/dashboard/campaigns/page.tsx" isMerged="true" import { createClient } from "@/lib/supabase/server" import { redirect } from "next/navigation" import { Send, Plus, Search, Filter, MoreHorizontal, Eye, Edit, Copy } from "lucide-react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Badge } from "@/components/ui/badge" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" import Link from "next/link" import { formatDistanceToNow } from "date-fns" import { DeleteCampaignButton } from "@/components/campaigns/delete-campaign-button" export default async function CampaignsPage() { const supabase = await createClient() const { data: { user }, } = await supabase.auth.getUser() if (!user) { redirect("/auth/login") } const { data: campaigns } = await supabase .from("campaigns") .select("*") .eq("user_id", user.id) .order("created_at", { ascending: false }) const getStatusColor = (status: string) => { switch (status) { case "sent": return "default" case "draft": return "secondary" case "scheduled": return "outline" case "sending": return "default" case "paused": return "secondary" case "cancelled": return "destructive" default: return "secondary" } } return (

{/* Page Header */}

Campaigns

Create and manage your email campaigns

{/* Filters */}

{/* Campaigns Table */} All Campaigns {campaigns?.length || 0} campaign{(campaigns?.length || 0) !== 1 ? "s" : ""} total {!campaigns || campaigns.length === 0 ? (

No campaigns yet

Create your first email campaign to start reaching your audience.

) : ( Campaign Status Recipients Sent Created {campaigns.map((campaign) => (

{campaign.name}

{campaign.subject}

{campaign.status} {campaign.total_recipients || 0} {campaign.sent_count || 0} {formatDistanceToNow(new Date(campaign.created_at), { addSuffix: true })} View Edit Duplicate ))}

)}

) } [V0_FILE]typescriptreact:file="app/dashboard/campaigns/loading.tsx" isFixed="true" isMerged="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="components/campaigns/delete-campaign-button.tsx" isMerged="true" "use client" import { Trash2 } from "lucide-react" import { DropdownMenuItem } from "@/components/ui/dropdown-menu" import { createClient } from "@/lib/supabase/client" import { useRouter } from "next/navigation" import { toast } from "sonner" export function DeleteCampaignButton({ campaignId, campaignName, }: { campaignId: string campaignName: string }) { const router = useRouter() const handleDelete = async () => { if (!confirm(`Are you sure you want to delete "${campaignName}"?`)) return const supabase = createClient() const { error } = await supabase.from("campaigns").delete().eq("id", campaignId) if (error) { toast.error("Failed to delete campaign") return } toast.success("Campaign deleted") router.refresh() } return ( Delete ) } [V0_FILE]typescriptreact:file="app/dashboard/campaigns/new/page.tsx" isMerged="true" import { createClient } from "@/lib/supabase/server" import { redirect } from "next/navigation" import { CampaignForm } from "@/components/campaigns/campaign-form" export default async function NewCampaignPage() { const supabase = await createClient() const { data: { user }, } = await supabase.auth.getUser() if (!user) { redirect("/auth/login") } // Fetch contact lists and templates for the form const [listsResult, templatesResult, gmailSettingsResult] = await Promise.all([ supabase.from("contact_lists").select("*").eq("user_id", user.id).order("name"), supabase.from("email_templates").select("*").eq("user_id", user.id).order("name"), supabase.from("gmail_settings").select("*").eq("user_id", user.id).single(), ]) return (

Create New Campaign

Set up your email campaign details and content

) } [V0_FILE]typescriptreact:file="components/campaigns/email-preview.tsx" isMerged="true" "use client" import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Monitor, Smartphone } from "lucide-react" interface EmailPreviewProps { open: boolean onClose: () => void subject: string htmlContent: string fromName: string fromEmail: string } export function EmailPreview({ open, onClose, subject, htmlContent, fromName, fromEmail }: EmailPreviewProps) { return (

About

Tags

Share

About

Tags

Share

More Templates Like This

About

Tags

Share

About

Tags

Share

More Templates Like This