implemented event package addons with filament resource, event-admin purchase path and notifications, showing up in purchase history

resources/js/admin/components/Addons/AddonSummaryList.tsx

@@ -0,0 +1,66 @@
+import React from 'react';
+import { Badge } from '@/components/ui/badge';
+import type { EventAddonSummary } from '../../api';
+
+type Props = {
+  addons: EventAddonSummary[];
+  t: (key: string, fallback: string) => string;
+};
+
+export function AddonSummaryList({ addons, t }: Props) {
+  if (!addons.length) {
+    return null;
+  }
+
+  return (
+    <div className="space-y-3">
+      {addons.map((addon) => (
+        <div key={addon.id} className="flex flex-col gap-1 rounded-2xl border border-slate-200/70 bg-white/70 p-4 text-sm dark:border-white/10 dark:bg-white/5 sm:flex-row sm:items-center sm:justify-between">
+          <div>
+            <p className="font-semibold text-slate-900 dark:text-white">{addon.label ?? addon.key}</p>
+            <p className="text-xs text-slate-500">
+              {buildSummary(addon, t)}
+            </p>
+            {addon.purchased_at ? (
+              <p className="text-xs text-slate-400">
+                {t('events.sections.addons.purchasedAt', `Purchased ${new Date(addon.purchased_at).toLocaleString()}`, {
+                  date: new Date(addon.purchased_at).toLocaleString(),
+                })}
+              </p>
+            ) : null}
+          </div>
+          <Badge variant={addon.status === 'completed' ? 'outline' : addon.status === 'pending' ? 'secondary' : 'destructive'}>
+            {t(`events.sections.addons.status.${addon.status}`, addon.status)}
+          </Badge>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+function buildSummary(addon: EventAddonSummary, t: (key: string, fallback: string, options?: Record<string, unknown>) => string): string {
+  const parts: string[] = [];
+  if (addon.extra_photos > 0) {
+    parts.push(
+      t('events.sections.addons.summary.photos', `+${addon.extra_photos} photos`, {
+        count: addon.extra_photos.toLocaleString(),
+      }),
+    );
+  }
+  if (addon.extra_guests > 0) {
+    parts.push(
+      t('events.sections.addons.summary.guests', `+${addon.extra_guests} guests`, {
+        count: addon.extra_guests.toLocaleString(),
+      }),
+    );
+  }
+  if (addon.extra_gallery_days > 0) {
+    parts.push(
+      t('events.sections.addons.summary.gallery', `+${addon.extra_gallery_days} days gallery`, {
+        count: addon.extra_gallery_days,
+      }),
+    );
+  }
+
+  return parts.join(' · ');
+}