Ems 74 implement reporting analytics

.gitignore

@@ -10,6 +10,9 @@
 !.yarn/releases
 !.yarn/versions
 
+# python dependencies
+**/.venv
+**/*.pyc
 # testing
 /coverage
 

ems-client/app/dashboard/admin/events/page.tsx

@@ -409,8 +409,28 @@ function EventManagementPage() {
         </Card>
 
         {/* Events Grid */}
-        <div className="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-6">
-          {filteredEvents.map((event) => (
+        <div className="space-y-8">
+          {/* Available Events */}
+          {filteredEvents.filter(event => {
+            const now = new Date();
+            const eventEndDate = new Date(event.bookingEndDate);
+            return eventEndDate >= now && event.status !== EventStatus.CANCELLED && event.status !== EventStatus.COMPLETED;
+          }).length > 0 && (
+            <div>
+              <h2 className="text-xl font-semibold text-gray-800 dark:text-white mb-4 flex items-center gap-2">
+                <Calendar className="h-5 w-5 text-blue-600" />
+                Available Events ({filteredEvents.filter(event => {
+                  const now = new Date();
+                  const eventEndDate = new Date(event.bookingEndDate);
+                  return eventEndDate >= now && event.status !== EventStatus.CANCELLED && event.status !== EventStatus.COMPLETED;
+                }).length})
+              </h2>
+              <div className="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-6">
+                {filteredEvents.filter(event => {
+                  const now = new Date();
+                  const eventEndDate = new Date(event.bookingEndDate);
+                  return eventEndDate >= now && event.status !== EventStatus.CANCELLED && event.status !== EventStatus.COMPLETED;
+                }).map((event) => (
             <Card key={event.id} className="border-slate-200 dark:border-slate-700 hover:shadow-lg transition-shadow">
               <CardHeader>
                 <div className="flex items-start justify-between">
@@ -549,6 +569,119 @@ function EventManagementPage() {
               </CardContent>
             </Card>
           ))}
+              </div>
+            </div>
+          )}
+
+          {/* Past Events */}
+          {filteredEvents.filter(event => {
+            const now = new Date();
+            const eventEndDate = new Date(event.bookingEndDate);
+            return eventEndDate < now || event.status === EventStatus.CANCELLED || event.status === EventStatus.COMPLETED;
+          }).length > 0 && (
+            <div>
+              <h2 className="text-xl font-semibold text-gray-800 dark:text-white mb-4 flex items-center gap-2">
+                <AlertCircle className="h-5 w-5 text-gray-500" />
+                Past Events ({filteredEvents.filter(event => {
+                  const now = new Date();
+                  const eventEndDate = new Date(event.bookingEndDate);
+                  return eventEndDate < now || event.status === EventStatus.CANCELLED || event.status === EventStatus.COMPLETED;
+                }).length})
+              </h2>
+              <div className="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-6">
+                {filteredEvents.filter(event => {
+                  const now = new Date();
+                  const eventEndDate = new Date(event.bookingEndDate);
+                  return eventEndDate < now || event.status === EventStatus.CANCELLED || event.status === EventStatus.COMPLETED;
+                }).map((event) => (
+                  <Card key={event.id} className="border-slate-200 dark:border-slate-700 hover:shadow-lg transition-shadow opacity-75">
+                    <CardHeader>
+                      <div className="flex items-start justify-between">
+                        <div className="flex-1">
+                          <CardTitle className="text-lg font-semibold text-slate-900 dark:text-white mb-2">
+                            {event.name}
+                          </CardTitle>
+                          <Button
+                            variant="ghost"
+                            size="sm"
+                            className="mb-2 p-0 h-auto text-blue-600 hover:text-blue-800"
+                            onClick={() => router.push(`/dashboard/admin/events/${event.id}`)}
+                          >
+                            View Details →
+                          </Button>
+                          <Badge className={statusColors[event.status]}>
+                            {event.status.replace('_', ' ')}
+                          </Badge>
+                        </div>
+                        <Button size="sm" variant="ghost">
+                          <MoreHorizontal className="h-4 w-4" />
+                        </Button>
+                      </div>
+                    </CardHeader>
+
+                    <CardContent>
+                      <p className="text-slate-600 dark:text-slate-400 text-sm mb-4 line-clamp-2">
+                        {event.description}
+                      </p>
+
+                      {/* Event Details */}
+                      <div className="space-y-3 mb-4">
+                        <div className="flex items-center text-sm text-slate-600 dark:text-slate-400">
+                          <MapPin className="h-4 w-4 mr-2" />
+                          <span>{event.venue.name}</span>
+                        </div>
+
+                        <div className="flex items-center text-sm text-slate-600 dark:text-slate-400">
+                          <Clock className="h-4 w-4 mr-2" />
+                          <span>
+                            {new Date(event.bookingStartDate).toLocaleDateString()} - {new Date(event.bookingEndDate).toLocaleDateString()}
+                          </span>
+                        </div>
+
+                        <div className="flex items-center text-sm text-slate-600 dark:text-slate-400">
+                          <Users className="h-4 w-4 mr-2" />
+                          <span>
+                            Capacity: {event.venue.capacity}
+                          </span>
+                        </div>
+                      </div>
+
+                      {/* Actions */}
+                      <div className="flex flex-wrap gap-2">
+                        <Button 
+                          size="sm" 
+                          variant="outline"
+                          onClick={() => router.push(`/dashboard/admin/events/${event.id}`)}
+                        >
+                          <Eye className="h-4 w-4 mr-1" />
+                          View
+                        </Button>
+
+                        <Button
+                          size="sm"
+                          variant="outline"
+                          onClick={() => router.push(`/dashboard/admin/events/modify/${event.id}`)}
+                        >
+                          <Edit className="h-4 w-4 mr-1" />
+                          Edit
+                        </Button>
+
+                        <Button
+                          size="sm"
+                          variant="destructive"
+                          onClick={() => handleEventAction(event.id, 'delete')}
+                          disabled={actionLoading === event.id}
+                        >
+                          <Trash2 className="h-4 w-4 mr-1" />
+                          Delete
+                        </Button>
+                      </div>
+                    </CardContent>
+                  </Card>
+                ))}
+              </div>
+            </div>
+          )}
 
           {filteredEvents.length === 0 && !loading && (
             <div className="col-span-full">