From 37b3cab6ad9ee9dafce80b368c84a9cc732df2c5 Mon Sep 17 00:00:00 2001
From: Akshay <akshay.allen26200@gmail.com>
Date: Wed, 19 Nov 2025 10:17:30 +0530
Subject: [PATCH 1/2] feat: Add total views and registrations statistics to the
 company event dashboard and refine the stats card layout.

---
 app/dashboard/company/[slug]/events/page.tsx | 52 ++++++++++++++------
 1 file changed, 36 insertions(+), 16 deletions(-)

diff --git a/app/dashboard/company/[slug]/events/page.tsx b/app/dashboard/company/[slug]/events/page.tsx
index 949d75e7..35b27c0f 100644
--- a/app/dashboard/company/[slug]/events/page.tsx
+++ b/app/dashboard/company/[slug]/events/page.tsx
@@ -41,7 +41,7 @@ export default function CompanyEventsPage() {
       setLoading(true)
       // Fetch all events (not just approved) for company members
       const response = await fetch(`/api/companies/${currentCompany.slug}/events?status=all&limit=100`)
-      
+
       if (!response.ok) {
         throw new Error('Failed to fetch events')
       }
@@ -78,7 +78,7 @@ export default function CompanyEventsPage() {
   const handleDeleteEvent = async (eventSlug: string) => {
     try {
       setDeletingEventSlug(eventSlug)
-      
+
       const response = await fetch(`/api/events/${eventSlug}`, {
         method: 'DELETE',
       })
@@ -88,7 +88,7 @@ export default function CompanyEventsPage() {
       }
 
       toast.success('Event deleted successfully')
-      
+
       // Refresh the events list
       await fetchEvents()
     } catch (error) {
@@ -104,40 +104,42 @@ export default function CompanyEventsPage() {
     approved: events.filter(e => e.approval_status === 'approved').length,
     pending: events.filter(e => e.approval_status === 'pending').length,
     draft: events.filter(e => e.status === 'draft').length,
+    totalViews: events.reduce((sum, e) => sum + (e.views || 0), 0),
+    totalRegistrations: events.reduce((sum, e) => sum + (e.registered || 0), 0),
   }
 
   const getApprovalBadge = (status: string) => {
     switch (status) {
       case 'approved':
         return (
-          <Badge className="bg-green-500/10 text-green-600 border-green-500/20">
+          <Badge className="bg-green-500/10 text-green-600 border-green-500/20 pointer-events-none">
             <CheckCircle className="h-3 w-3 mr-1" />
             Approved
           </Badge>
         )
       case 'pending':
         return (
-          <Badge className="bg-yellow-500/10 text-yellow-600 border-yellow-500/20">
+          <Badge className="bg-yellow-500/10 text-yellow-600 border-yellow-500/20 pointer-events-none">
             <Clock className="h-3 w-3 mr-1" />
             Pending
           </Badge>
         )
       case 'rejected':
         return (
-          <Badge className="bg-red-500/10 text-red-600 border-red-500/20">
+          <Badge className="bg-red-500/10 text-red-600 border-red-500/20 pointer-events-none">
             <XCircle className="h-3 w-3 mr-1" />
             Rejected
           </Badge>
         )
       case 'changes_requested':
         return (
-          <Badge className="bg-orange-500/10 text-orange-600 border-orange-500/20">
+          <Badge className="bg-orange-500/10 text-orange-600 border-orange-500/20 pointer-events-none">
             <AlertCircle className="h-3 w-3 mr-1" />
             Changes Requested
           </Badge>
         )
       default:
-        return <Badge variant="outline">{status}</Badge>
+        return <Badge variant="outline" className="pointer-events-none">{status}</Badge>
     }
   }
 
@@ -145,15 +147,15 @@ export default function CompanyEventsPage() {
     switch (status) {
       case 'live':
       case 'published':
-        return <Badge className="bg-blue-500/10 text-blue-600 border-blue-500/20">Live</Badge>
+        return <Badge className="bg-blue-500/10 text-blue-600 border-blue-500/20 pointer-events-none">Live</Badge>
       case 'draft':
-        return <Badge variant="outline">Draft</Badge>
+        return <Badge variant="outline" className="pointer-events-none">Draft</Badge>
       case 'cancelled':
-        return <Badge variant="outline" className="text-gray-500">Cancelled</Badge>
+        return <Badge variant="outline" className="text-gray-500 pointer-events-none">Cancelled</Badge>
       case 'completed':
-        return <Badge variant="outline" className="text-gray-500">Completed</Badge>
+        return <Badge variant="outline" className="text-gray-500 pointer-events-none">Completed</Badge>
       default:
-        return <Badge variant="outline">{status}</Badge>
+        return <Badge variant="outline" className="pointer-events-none">{status}</Badge>
     }
   }
 
@@ -186,7 +188,7 @@ export default function CompanyEventsPage() {
       </div>
 
       {/* Stats Cards */}
-      <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
+      <div className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-6 gap-4">
         <Card>
           <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
             <CardTitle className="text-sm font-medium">Total Events</CardTitle>
@@ -223,6 +225,24 @@ export default function CompanyEventsPage() {
             <div className="text-2xl font-bold">{stats.draft}</div>
           </CardContent>
         </Card>
+        <Card>
+          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+            <CardTitle className="text-sm font-medium">Total Views</CardTitle>
+            <Eye className="h-4 w-4 text-blue-600" />
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold text-blue-600">{stats.totalViews}</div>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+            <CardTitle className="text-sm font-medium">Total Registrations</CardTitle>
+            <CheckCircle className="h-4 w-4 text-purple-600" />
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold text-purple-600">{stats.totalRegistrations}</div>
+          </CardContent>
+        </Card>
       </div>
 
       {/* Search */}
@@ -329,8 +349,8 @@ export default function CompanyEventsPage() {
                           )}
                           <AlertDialog>
                             <AlertDialogTrigger asChild>
-                              <Button 
-                                variant="outline" 
+                              <Button
+                                variant="outline"
                                 size="sm"
                                 disabled={deletingEventSlug === event.slug}
                               >

From 4e738c8d6f18112a382045fcce867f91a36ee921 Mon Sep 17 00:00:00 2001
From: Akshay <akshay.allen26200@gmail.com>
Date: Wed, 19 Nov 2025 11:06:28 +0530
Subject: [PATCH 2/2] feat: Implement event registration management with API
 endpoints for fetching, filtering, searching, updating, and exporting
 registrations, alongside a new dashboard page.

---
 .../[slug]/registrations/export/route.ts      | 125 ++++++
 app/api/events/[slug]/registrations/route.ts  | 274 ++++++++++++
 .../events/[eventSlug]/registrations/page.tsx | 400 ++++++++++++++++++
 app/dashboard/company/[slug]/events/page.tsx  |  13 +-
 4 files changed, 811 insertions(+), 1 deletion(-)
 create mode 100644 app/api/events/[slug]/registrations/export/route.ts
 create mode 100644 app/api/events/[slug]/registrations/route.ts
 create mode 100644 app/dashboard/company/[slug]/events/[eventSlug]/registrations/page.tsx

diff --git a/app/api/events/[slug]/registrations/export/route.ts b/app/api/events/[slug]/registrations/export/route.ts
new file mode 100644
index 00000000..314f88bd
--- /dev/null
+++ b/app/api/events/[slug]/registrations/export/route.ts
@@ -0,0 +1,125 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { createClient } from '@/lib/supabase/server';
+
+export const runtime = 'nodejs';
+
+// GET: Export registrations as CSV
+export async function GET(
+    request: NextRequest,
+    { params }: { params: Promise<{ slug: string }> }
+) {
+    try {
+        const { slug } = await params;
+        const supabase = await createClient();
+
+        // Get the current user
+        const { data: { user }, error: authError } = await supabase.auth.getUser();
+
+        if (authError || !user) {
+            return NextResponse.json(
+                { error: 'Authentication required' },
+                { status: 401 }
+            );
+        }
+
+        // Get the event by slug
+        const { data: event, error: eventError } = await supabase
+            .from('events')
+            .select('id, title, company_id, slug')
+            .eq('slug', slug)
+            .single();
+
+        if (eventError || !event) {
+            return NextResponse.json(
+                { error: 'Event not found' },
+                { status: 404 }
+            );
+        }
+
+        // Check if user has access to this event's company
+        const { data: membership } = await supabase
+            .from('company_members')
+            .select('role')
+            .eq('company_id', event.company_id)
+            .eq('user_id', user.id)
+            .single();
+
+        if (!membership) {
+            return NextResponse.json(
+                { error: 'Unauthorized access' },
+                { status: 403 }
+            );
+        }
+
+        // Get all registrations for this event
+        const { data: registrations, error: regError } = await supabase
+            .from('master_registrations')
+            .select('*')
+            .eq('activity_type', 'event')
+            .eq('activity_id', event.id.toString())
+            .order('created_at', { ascending: false });
+
+        if (regError) {
+            console.error('Error fetching registrations:', regError);
+            return NextResponse.json(
+                { error: 'Failed to fetch registrations' },
+                { status: 500 }
+            );
+        }
+
+        // Convert to CSV
+        const headers = [
+            'ID',
+            'Full Name',
+            'Email',
+            'Phone',
+            'Institution',
+            'Department',
+            'Year of Study',
+            'Experience Level',
+            'Status',
+            'Payment Status',
+            'Payment Amount',
+            'Registration Date',
+            'Created At'
+        ];
+
+        const csvRows = [headers.join(',')];
+
+        registrations?.forEach(reg => {
+            const row = [
+                reg.id,
+                `"${reg.full_name || ''}"`,
+                `"${reg.email || ''}"`,
+                `"${reg.phone || ''}"`,
+                `"${reg.institution || ''}"`,
+                `"${reg.department || ''}"`,
+                `"${reg.year_of_study || ''}"`,
+                `"${reg.experience_level || ''}"`,
+                reg.status,
+                reg.payment_status,
+                reg.payment_amount || '',
+                reg.registration_date,
+                reg.created_at
+            ];
+            csvRows.push(row.join(','));
+        });
+
+        const csv = csvRows.join('\n');
+        const filename = `${event.slug}-registrations-${new Date().toISOString().split('T')[0]}.csv`;
+
+        return new NextResponse(csv, {
+            headers: {
+                'Content-Type': 'text/csv',
+                'Content-Disposition': `attachment; filename="${filename}"`
+            }
+        });
+
+    } catch (error) {
+        console.error('Error exporting registrations:', error);
+        return NextResponse.json(
+            { error: 'Internal server error' },
+            { status: 500 }
+        );
+    }
+}
diff --git a/app/api/events/[slug]/registrations/route.ts b/app/api/events/[slug]/registrations/route.ts
new file mode 100644
index 00000000..28adb264
--- /dev/null
+++ b/app/api/events/[slug]/registrations/route.ts
@@ -0,0 +1,274 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { createClient as createServerClient } from '@/lib/supabase/server';
+import { createClient } from '@supabase/supabase-js';
+
+export const runtime = 'nodejs';
+
+// Create Supabase client with service role key to bypass RLS for master_registrations
+const getServiceRoleClient = () => {
+    return createClient(
+        process.env.NEXT_PUBLIC_SUPABASE_URL!,
+        process.env.SUPABASE_SERVICE_ROLE_KEY!,
+        {
+            auth: {
+                autoRefreshToken: false,
+                persistSession: false
+            }
+        }
+    );
+};
+
+// GET: Fetch all registrations for an event
+export async function GET(
+    request: NextRequest,
+    { params }: { params: Promise<{ slug: string }> }
+) {
+    try {
+        const { slug } = await params;
+
+        // Use server client for authentication
+        const serverClient = await createServerClient();
+        const { data: { user }, error: authError } = await serverClient.auth.getUser();
+
+        if (authError || !user) {
+            return NextResponse.json(
+                { error: 'Authentication required' },
+                { status: 401 }
+            );
+        }
+
+        // Use service role client for querying (bypasses RLS)
+        const supabase = getServiceRoleClient();
+
+        // Get the event by slug
+        const { data: event, error: eventError } = await supabase
+            .from('events')
+            .select('id, title, company_id, slug')
+            .eq('slug', slug)
+            .single();
+
+        if (eventError || !event) {
+            return NextResponse.json(
+                { error: 'Event not found' },
+                { status: 404 }
+            );
+        }
+
+        // Check if user has access to this event's company
+        const { data: membership } = await supabase
+            .from('company_members')
+            .select('role')
+            .eq('company_id', event.company_id)
+            .eq('user_id', user.id)
+            .single();
+
+        if (!membership) {
+            return NextResponse.json(
+                { error: 'Unauthorized access' },
+                { status: 403 }
+            );
+        }
+
+        // Get search and filter parameters
+        const searchParams = request.nextUrl.searchParams;
+        const search = searchParams.get('search') || '';
+        const status = searchParams.get('status') || '';
+        const paymentStatus = searchParams.get('payment_status') || '';
+        const limit = parseInt(searchParams.get('limit') || '100');
+        const offset = parseInt(searchParams.get('offset') || '0');
+
+        // Build query for registrations
+        let query = supabase
+            .from('master_registrations')
+            .select('*', { count: 'exact' })
+            .eq('activity_type', 'event')
+            .eq('activity_id', event.id.toString())
+            .order('created_at', { ascending: false });
+
+        // Apply filters
+        if (status) {
+            query = query.eq('status', status);
+        }
+
+        if (paymentStatus) {
+            query = query.eq('payment_status', paymentStatus);
+        }
+
+        // Apply search (search in full_name, email, phone)
+        if (search) {
+            query = query.or(`full_name.ilike.%${search}%,email.ilike.%${search}%,phone.ilike.%${search}%`);
+        }
+
+        // Apply pagination
+        query = query.range(offset, offset + limit - 1);
+
+        const { data: registrations, error: regError, count } = await query;
+
+        // Debug logging
+        console.log('=== REGISTRATIONS DEBUG ===');
+        console.log('Event ID:', event.id);
+        console.log('Event ID type:', typeof event.id);
+        console.log('Activity ID being queried:', event.id.toString());
+        console.log('Registrations found:', registrations?.length);
+        console.log('Total count:', count);
+        console.log('Error:', regError);
+        if (registrations && registrations.length > 0) {
+            console.log('Sample registration:', registrations[0]);
+        }
+        console.log('=========================');
+
+        if (regError) {
+            console.error('Error fetching registrations:', regError);
+            return NextResponse.json(
+                { error: 'Failed to fetch registrations' },
+                { status: 500 }
+            );
+        }
+
+        // Get user profiles for registrations that have user_id
+        const userIds = registrations
+            ?.filter(r => r.user_id)
+            .map(r => r.user_id) || [];
+
+        let profiles: { id: string; first_name: string | null; last_name: string | null; email: string | null; avatar_url: string | null }[] = [];
+        if (userIds.length > 0) {
+            const { data: profilesData } = await supabase
+                .from('profiles')
+                .select('id, first_name, last_name, email, avatar_url')
+                .in('id', userIds);
+
+            profiles = profilesData || [];
+        }
+
+        // Merge profile data with registrations
+        const enrichedRegistrations = registrations?.map(reg => {
+            const profile = profiles.find(p => p.id === reg.user_id);
+            const profileName = profile
+                ? `${profile.first_name || ''} ${profile.last_name || ''}`.trim()
+                : null;
+
+            return {
+                ...reg,
+                profile_name: profileName || reg.full_name,
+                profile_avatar: profile?.avatar_url,
+                email: profile?.email || reg.email, // Use profile email if available
+            };
+        });
+
+        return NextResponse.json({
+            registrations: enrichedRegistrations || [],
+            total: count || 0,
+            event: {
+                id: event.id,
+                title: event.title,
+                slug: event.slug
+            }
+        });
+
+    } catch (error) {
+        console.error('Error in registrations API:', error);
+        return NextResponse.json(
+            { error: 'Internal server error' },
+            { status: 500 }
+        );
+    }
+}
+
+// PATCH: Update registration status
+export async function PATCH(
+    request: NextRequest,
+    { params }: { params: Promise<{ slug: string }> }
+) {
+    try {
+        const { slug } = await params;
+        const body = await request.json();
+        const { registration_id, status, payment_status } = body;
+
+        if (!registration_id) {
+            return NextResponse.json(
+                { error: 'Registration ID is required' },
+                { status: 400 }
+            );
+        }
+
+        // Use server client for authentication
+        const serverClient = await createServerClient();
+        const { data: { user }, error: authError } = await serverClient.auth.getUser();
+
+        if (authError || !user) {
+            return NextResponse.json(
+                { error: 'Authentication required' },
+                { status: 401 }
+            );
+        }
+
+        // Use service role client for querying
+        const supabase = getServiceRoleClient();
+
+        // Get the event by slug
+        const { data: event, error: eventError } = await supabase
+            .from('events')
+            .select('id, company_id')
+            .eq('slug', slug)
+            .single();
+
+        if (eventError || !event) {
+            return NextResponse.json(
+                { error: 'Event not found' },
+                { status: 404 }
+            );
+        }
+
+        // Check if user has access to this event's company
+        const { data: membership } = await supabase
+            .from('company_members')
+            .select('role')
+            .eq('company_id', event.company_id)
+            .eq('user_id', user.id)
+            .single();
+
+        if (!membership || !['owner', 'admin', 'editor'].includes(membership.role)) {
+            return NextResponse.json(
+                { error: 'Unauthorized access' },
+                { status: 403 }
+            );
+        }
+
+        // Update registration
+        const updates: Record<string, unknown> = {
+            updated_at: new Date().toISOString()
+        };
+
+        if (status) updates.status = status;
+        if (payment_status) updates.payment_status = payment_status;
+
+        const { data: updatedRegistration, error: updateError } = await supabase
+            .from('master_registrations')
+            .update(updates)
+            .eq('id', registration_id)
+            .eq('activity_type', 'event')
+            .eq('activity_id', event.id.toString())
+            .select()
+            .single();
+
+        if (updateError) {
+            console.error('Error updating registration:', updateError);
+            return NextResponse.json(
+                { error: 'Failed to update registration' },
+                { status: 500 }
+            );
+        }
+
+        return NextResponse.json({
+            success: true,
+            registration: updatedRegistration
+        });
+
+    } catch (error) {
+        console.error('Error updating registration:', error);
+        return NextResponse.json(
+            { error: 'Internal server error' },
+            { status: 500 }
+        );
+    }
+}
diff --git a/app/dashboard/company/[slug]/events/[eventSlug]/registrations/page.tsx b/app/dashboard/company/[slug]/events/[eventSlug]/registrations/page.tsx
new file mode 100644
index 00000000..9c4ab47f
--- /dev/null
+++ b/app/dashboard/company/[slug]/events/[eventSlug]/registrations/page.tsx
@@ -0,0 +1,400 @@
+'use client'
+
+import { useState, useEffect, useCallback } from 'react'
+import { useParams } from 'next/navigation'
+import { useCompanyContext } from '@/contexts/CompanyContext'
+import { Button } from '@/components/ui/button'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
+import { Badge } from '@/components/ui/badge'
+import { Input } from '@/components/ui/input'
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'
+import {
+    Select,
+    SelectContent,
+    SelectItem,
+    SelectTrigger,
+    SelectValue,
+} from '@/components/ui/select'
+import {
+    ArrowLeft,
+    Search,
+    Download,
+    Users,
+    CheckCircle,
+    Clock,
+    XCircle,
+    DollarSign,
+    Calendar,
+} from 'lucide-react'
+import { toast } from 'sonner'
+import Link from 'next/link'
+import { MasterRegistration } from '@/lib/services/master-registrations'
+
+interface EnrichedRegistration extends MasterRegistration {
+    profile_name?: string
+    profile_avatar?: string
+}
+
+export default function EventRegistrationsPage() {
+    const params = useParams()
+    const { currentCompany } = useCompanyContext()
+    const eventSlug = params.eventSlug as string
+
+    const [registrations, setRegistrations] = useState<EnrichedRegistration[]>([])
+    const [loading, setLoading] = useState(true)
+    const [searchTerm, setSearchTerm] = useState('')
+    const [statusFilter, setStatusFilter] = useState<string>('all')
+    const [paymentFilter, setPaymentFilter] = useState<string>('all')
+    const [total, setTotal] = useState(0)
+    const [eventTitle, setEventTitle] = useState('')
+    const [exporting, setExporting] = useState(false)
+
+    const fetchRegistrations = useCallback(async () => {
+        if (!currentCompany || !eventSlug) return
+
+        try {
+            setLoading(true)
+            const params = new URLSearchParams()
+
+            if (searchTerm) params.append('search', searchTerm)
+            if (statusFilter && statusFilter !== 'all') params.append('status', statusFilter)
+            if (paymentFilter && paymentFilter !== 'all') params.append('payment_status', paymentFilter)
+            params.append('limit', '100')
+
+            const response = await fetch(`/api/events/${eventSlug}/registrations?${params.toString()}`)
+
+            if (!response.ok) {
+                throw new Error('Failed to fetch registrations')
+            }
+
+            const data = await response.json()
+            setRegistrations(data.registrations || [])
+            setTotal(data.total || 0)
+            setEventTitle(data.event?.title || '')
+        } catch (error) {
+            console.error('Error fetching registrations:', error)
+            toast.error('Failed to load registrations')
+        } finally {
+            setLoading(false)
+        }
+    }, [currentCompany, eventSlug, searchTerm, statusFilter, paymentFilter])
+
+    useEffect(() => {
+        fetchRegistrations()
+    }, [fetchRegistrations])
+
+    const handleExportCSV = async () => {
+        try {
+            setExporting(true)
+            const response = await fetch(`/api/events/${eventSlug}/registrations/export`)
+
+            if (!response.ok) {
+                throw new Error('Failed to export registrations')
+            }
+
+            const blob = await response.blob()
+            const url = window.URL.createObjectURL(blob)
+            const a = document.createElement('a')
+            a.href = url
+            a.download = `${eventSlug}-registrations-${new Date().toISOString().split('T')[0]}.csv`
+            document.body.appendChild(a)
+            a.click()
+            window.URL.revokeObjectURL(url)
+            document.body.removeChild(a)
+
+            toast.success('Registrations exported successfully')
+        } catch (error) {
+            console.error('Error exporting registrations:', error)
+            toast.error('Failed to export registrations')
+        } finally {
+            setExporting(false)
+        }
+    }
+
+    const handleUpdateStatus = async (registrationId: number, status: string) => {
+        try {
+            const response = await fetch(`/api/events/${eventSlug}/registrations`, {
+                method: 'PATCH',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ registration_id: registrationId, status })
+            })
+
+            if (!response.ok) {
+                throw new Error('Failed to update status')
+            }
+
+            toast.success('Status updated successfully')
+            fetchRegistrations()
+        } catch (error) {
+            console.error('Error updating status:', error)
+            toast.error('Failed to update status')
+        }
+    }
+
+    const getStatusBadge = (status: string) => {
+        switch (status) {
+            case 'registered':
+                return (
+                    <Badge className="bg-green-500/10 text-green-600 border-green-500/20 pointer-events-none">
+                        <CheckCircle className="h-3 w-3 mr-1" />
+                        Registered
+                    </Badge>
+                )
+            case 'pending':
+                return (
+                    <Badge className="bg-yellow-500/10 text-yellow-600 border-yellow-500/20 pointer-events-none">
+                        <Clock className="h-3 w-3 mr-1" />
+                        Pending
+                    </Badge>
+                )
+            case 'cancelled':
+                return (
+                    <Badge className="bg-red-500/10 text-red-600 border-red-500/20 pointer-events-none">
+                        <XCircle className="h-3 w-3 mr-1" />
+                        Cancelled
+                    </Badge>
+                )
+            case 'attended':
+                return (
+                    <Badge className="bg-blue-500/10 text-blue-600 border-blue-500/20 pointer-events-none">
+                        <CheckCircle className="h-3 w-3 mr-1" />
+                        Attended
+                    </Badge>
+                )
+            case 'no_show':
+                return (
+                    <Badge className="bg-gray-500/10 text-gray-600 border-gray-500/20 pointer-events-none">
+                        No Show
+                    </Badge>
+                )
+            default:
+                return <Badge variant="outline" className="pointer-events-none">{status}</Badge>
+        }
+    }
+
+    const getPaymentBadge = (paymentStatus: string) => {
+        switch (paymentStatus) {
+            case 'paid':
+                return (
+                    <Badge className="bg-green-500/10 text-green-600 border-green-500/20 pointer-events-none">
+                        <DollarSign className="h-3 w-3 mr-1" />
+                        Paid
+                    </Badge>
+                )
+            case 'pending':
+                return (
+                    <Badge className="bg-yellow-500/10 text-yellow-600 border-yellow-500/20 pointer-events-none">
+                        <Clock className="h-3 w-3 mr-1" />
+                        Pending
+                    </Badge>
+                )
+            case 'failed':
+                return (
+                    <Badge className="bg-red-500/10 text-red-600 border-red-500/20 pointer-events-none">
+                        Failed
+                    </Badge>
+                )
+            case 'not_applicable':
+                return (
+                    <Badge variant="outline" className="pointer-events-none">
+                        N/A
+                    </Badge>
+                )
+            default:
+                return <Badge variant="outline" className="pointer-events-none">{paymentStatus}</Badge>
+        }
+    }
+
+    if (!currentCompany) {
+        return (
+            <div className="flex items-center justify-center min-h-[400px]">
+                <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
+            </div>
+        )
+    }
+
+    return (
+        <div className="space-y-6">
+            {/* Header */}
+            <div className="flex items-center justify-between">
+                <div className="flex items-center gap-4">
+                    <Link href={`/dashboard/company/${currentCompany.slug}/events`}>
+                        <Button variant="outline" size="sm">
+                            <ArrowLeft className="h-4 w-4 mr-2" />
+                            Back to Events
+                        </Button>
+                    </Link>
+                    <div>
+                        <h1 className="text-3xl font-bold tracking-tight">Event Registrations</h1>
+                        <p className="text-muted-foreground mt-1">
+                            {eventTitle}
+                        </p>
+                    </div>
+                </div>
+                <Button onClick={handleExportCSV} disabled={exporting || registrations.length === 0}>
+                    <Download className="h-4 w-4 mr-2" />
+                    {exporting ? 'Exporting...' : 'Export CSV'}
+                </Button>
+            </div>
+
+            {/* Stats Card */}
+            <Card>
+                <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+                    <CardTitle className="text-sm font-medium">Total Registrations</CardTitle>
+                    <Users className="h-4 w-4 text-muted-foreground" />
+                </CardHeader>
+                <CardContent>
+                    <div className="text-2xl font-bold">{total}</div>
+                </CardContent>
+            </Card>
+
+            {/* Filters */}
+            <div className="flex items-center gap-4">
+                <div className="relative flex-1 max-w-sm">
+                    <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" />
+                    <Input
+                        placeholder="Search by name, email, or phone..."
+                        value={searchTerm}
+                        onChange={(e) => setSearchTerm(e.target.value)}
+                        className="pl-10"
+                    />
+                </div>
+                <Select value={statusFilter} onValueChange={setStatusFilter}>
+                    <SelectTrigger className="w-[180px]">
+                        <SelectValue placeholder="Filter by status" />
+                    </SelectTrigger>
+                    <SelectContent>
+                        <SelectItem value="all">All Statuses</SelectItem>
+                        <SelectItem value="registered">Registered</SelectItem>
+                        <SelectItem value="pending">Pending</SelectItem>
+                        <SelectItem value="attended">Attended</SelectItem>
+                        <SelectItem value="no_show">No Show</SelectItem>
+                        <SelectItem value="cancelled">Cancelled</SelectItem>
+                    </SelectContent>
+                </Select>
+                <Select value={paymentFilter} onValueChange={setPaymentFilter}>
+                    <SelectTrigger className="w-[180px]">
+                        <SelectValue placeholder="Filter by payment" />
+                    </SelectTrigger>
+                    <SelectContent>
+                        <SelectItem value="all">All Payments</SelectItem>
+                        <SelectItem value="paid">Paid</SelectItem>
+                        <SelectItem value="pending">Pending</SelectItem>
+                        <SelectItem value="failed">Failed</SelectItem>
+                        <SelectItem value="not_applicable">N/A</SelectItem>
+                    </SelectContent>
+                </Select>
+            </div>
+
+            {/* Registrations Table */}
+            <Card>
+                <CardHeader>
+                    <CardTitle>Registrations ({registrations.length})</CardTitle>
+                    <CardDescription>
+                        Manage and view all event registrations
+                    </CardDescription>
+                </CardHeader>
+                <CardContent>
+                    {loading ? (
+                        <div className="flex items-center justify-center py-8">
+                            <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
+                        </div>
+                    ) : registrations.length === 0 ? (
+                        <div className="text-center py-12">
+                            <Users className="h-12 w-12 text-gray-400 mx-auto mb-4" />
+                            <h3 className="text-lg font-medium text-gray-900 dark:text-gray-100 mb-2">
+                                No registrations found
+                            </h3>
+                            <p className="text-gray-500 dark:text-gray-400">
+                                {searchTerm || statusFilter !== 'all' || paymentFilter !== 'all'
+                                    ? 'Try adjusting your filters'
+                                    : 'No one has registered for this event yet'}
+                            </p>
+                        </div>
+                    ) : (
+                        <div className="overflow-x-auto">
+                            <Table>
+                                <TableHeader>
+                                    <TableRow>
+                                        <TableHead>Participant</TableHead>
+                                        <TableHead>Email</TableHead>
+                                        <TableHead>Phone</TableHead>
+                                        <TableHead>Status</TableHead>
+                                        <TableHead>Payment</TableHead>
+                                        <TableHead>Registered</TableHead>
+                                        <TableHead>Actions</TableHead>
+                                    </TableRow>
+                                </TableHeader>
+                                <TableBody>
+                                    {registrations.map((registration) => (
+                                        <TableRow key={registration.id}>
+                                            <TableCell>
+                                                <div className="flex flex-col">
+                                                    <span className="font-medium">
+                                                        {registration.profile_name || registration.full_name || registration.email || `User ${registration.user_id.substring(0, 8)}`}
+                                                    </span>
+                                                    {registration.experience_level && (
+                                                        <span className="text-sm text-gray-500">
+                                                            {registration.experience_level}
+                                                        </span>
+                                                    )}
+                                                </div>
+                                            </TableCell>
+                                            <TableCell>
+                                                {registration.email ? (
+                                                    <span className="text-sm">{registration.email}</span>
+                                                ) : (
+                                                    <span className="text-sm text-gray-400">-</span>
+                                                )}
+                                            </TableCell>
+                                            <TableCell>
+                                                {registration.phone ? (
+                                                    <span className="text-sm">{registration.phone}</span>
+                                                ) : (
+                                                    <span className="text-sm text-gray-400">-</span>
+                                                )}
+                                            </TableCell>
+                                            <TableCell>{getStatusBadge(registration.status)}</TableCell>
+                                            <TableCell>
+                                                <div className="flex flex-col gap-1">
+                                                    {getPaymentBadge(registration.payment_status)}
+                                                    {registration.payment_amount && (
+                                                        <span className="text-sm text-gray-600 dark:text-gray-400">
+                                                            ₹{registration.payment_amount / 100}
+                                                        </span>
+                                                    )}
+                                                </div>
+                                            </TableCell>
+                                            <TableCell>
+                                                <div className="flex items-center gap-1 text-sm">
+                                                    <Calendar className="h-3 w-3 text-gray-400" />
+                                                    {new Date(registration.created_at).toLocaleDateString()}
+                                                </div>
+                                            </TableCell>
+                                            <TableCell>
+                                                <Select
+                                                    value={registration.status}
+                                                    onValueChange={(value) => handleUpdateStatus(registration.id, value)}
+                                                >
+                                                    <SelectTrigger className="w-[130px]">
+                                                        <SelectValue />
+                                                    </SelectTrigger>
+                                                    <SelectContent>
+                                                        <SelectItem value="registered">Registered</SelectItem>
+                                                        <SelectItem value="attended">Attended</SelectItem>
+                                                        <SelectItem value="no_show">No Show</SelectItem>
+                                                        <SelectItem value="cancelled">Cancelled</SelectItem>
+                                                    </SelectContent>
+                                                </Select>
+                                            </TableCell>
+                                        </TableRow>
+                                    ))}
+                                </TableBody>
+                            </Table>
+                        </div>
+                    )}
+                </CardContent>
+            </Card>
+        </div>
+    )
+}
diff --git a/app/dashboard/company/[slug]/events/page.tsx b/app/dashboard/company/[slug]/events/page.tsx
index 35b27c0f..8240e031 100644
--- a/app/dashboard/company/[slug]/events/page.tsx
+++ b/app/dashboard/company/[slug]/events/page.tsx
@@ -331,7 +331,18 @@ export default function CompanyEventsPage() {
                         {event.views || 0}
                       </div>
                     </TableCell>
-                    <TableCell>{event.registered || 0}</TableCell>
+                    <TableCell>
+                      {event.registered && event.registered > 0 ? (
+                        <Link
+                          href={`/dashboard/company/${currentCompany.slug}/events/${event.slug}/registrations`}
+                          className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300 font-medium hover:underline"
+                        >
+                          {event.registered}
+                        </Link>
+                      ) : (
+                        <span className="text-gray-500">0</span>
+                      )}
+                    </TableCell>
                     {canManageEvents ? (
                       <TableCell>
                         <div className="flex items-center gap-2">