feat(packages): implement package-based business model

resources/js/admin/pages/EventsPage.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Link, useNavigate } from 'react-router-dom';
-import { ArrowRight, CalendarDays, Plus, Settings, Sparkles } from 'lucide-react';
+import { ArrowRight, CalendarDays, Plus, Settings, Sparkles, Package as PackageIcon } from 'lucide-react';
+import { useQuery } from '@tanstack/react-query';
 
 import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
 import { Badge } from '@/components/ui/badge';
@@ -8,7 +9,7 @@ import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
 
 import { AdminLayout } from '../components/AdminLayout';
-import { getEvents, TenantEvent } from '../api';
+import { getEvents, TenantEvent, getPackages } from '../api';
 import { isAuthError } from '../auth/tokens';
 
 export default function EventsPage() {
@@ -17,6 +18,11 @@ export default function EventsPage() {
   const [error, setError] = React.useState<string | null>(null);
   const navigate = useNavigate();
 
+  const { data: tenantPackages } = useQuery({
+    queryKey: ['tenant-packages'],
+    queryFn: () => getPackages('reseller'), // or separate endpoint
+  });
+
   React.useEffect(() => {
     (async () => {
       try {
@@ -53,6 +59,33 @@ export default function EventsPage() {
       subtitle="Plane Momente, die in Erinnerung bleiben. Hier verwaltest du alles rund um deine Veranstaltungen."
       actions={actions}
     >
+      {tenantPackages && tenantPackages.length > 0 && (
+        <Card className="mb-6 border-0 bg-white/80 shadow-xl shadow-pink-100/60">
+          <CardHeader>
+            <CardTitle className="flex items-center gap-2">
+              <PackageIcon className="h-5 w-5 text-pink-500" />
+              Aktuelles Package
+            </CardTitle>
+            <CardDescription>
+              Ihr aktuelles Reseller-Package und verbleibende Limits.
+            </CardDescription>
+          </CardHeader>
+          <CardContent className="grid md:grid-cols-3 gap-4">
+            <div className="text-center">
+              <h3 className="font-semibold">Aktives Package</h3>
+              <p className="text-lg font-bold">{tenantPackages.find(p => p.active)?.package?.name || 'Kein aktives Package'}</p>
+            </div>
+            <div className="text-center">
+              <h3 className="font-semibold">Verbleibende Events</h3>
+              <p className="text-lg font-bold">{tenantPackages.find(p => p.active)?.remaining_events || 0}</p>
+            </div>
+            <div className="text-center">
+              <h3 className="font-semibold">Ablauf</h3>
+              <p className="text-lg font-bold">{tenantPackages.find(p => p.active)?.expires_at || 'Kein Package'}</p>
+            </div>
+          </CardContent>
+        </Card>
+      )}
       {error && (
         <Alert variant="destructive">
           <AlertTitle>Fehler beim Laden</AlertTitle>