event dashbaord

components/events/EventRsvpTracking.tsx

@@ -0,0 +1,36 @@
+'use client'
+import React from 'react'
+import { Card, CardContent } from '../ui/card'
+import { Button } from '../ui/button'
+
+export default function EventRsvpTracking({ eventGuests }: EventData) {
+    const attendingGuests = eventGuests.filter((g) => g.rsvp === 'YES');
+    const notAttendingGuests = eventGuests.filter((g) => g.rsvp === 'NO');
+    const pendingGuests = eventGuests.filter((g) => g.rsvp === 'PENDING');
+    return (
+        <Card className='py-0'>
+            <CardContent className='p-4'>
+                <h2 className="text-xl font-semibold">RSVP Tracking</h2>
+                <div className='grid grid-cols-4 gap-4 text-sm mt-4'>
+                    <div>
+                        <p className='text-muted-foreground'>Invited</p>
+                        <p className='text-2xl font-bold'>{eventGuests.length}</p>
+                    </div>
+                    <div>
+                        <p className='text-muted-foreground'>Confirmed</p>
+                        <p className='text-2xl font-bold'>{attendingGuests.length}</p>
+                    </div>
+                    <div>
+                        <p className='text-muted-foreground'>Declined</p>
+                        <p className='text-2xl font-bold'>{notAttendingGuests.length}</p>
+                    </div>
+                    <div>
+                        <p className='text-muted-foreground'>Pending</p>
+                        <p className='text-2xl font-bold'>{pendingGuests.length}</p>
+                    </div>
+                </div>
+                <Button variant="secondary" className="mt-4 hover:cursor-pointer hover:bg-brand-primary-900">Manage Guest List</Button>
+            </CardContent>
+        </Card>
+    )
+}