feat( member dashboard recap & services list)

resources/js/components/features/dashboard/WelcomeCard.tsx

@@ -0,0 +1,51 @@
+import { type DashboardMember } from '@/types';
+import { cn } from '@/lib/utils';
+
+interface Props {
+    member: DashboardMember;
+}
+
+export function WelcomeCard({ member }: Props) {
+    const membership = member.membership;
+
+    return (
+        <>
+            <div>
+                <p className="text-2xl text-black font-medium tracking-wide">
+                    Bienvenue sur votre espace Retzien, {member.firstname}
+                </p>
+            </div>
+            <div className="nb-shadow-static bg-white rounded-2xl p-6 flex flex-col gap-2">
+                <h1 className="text-2xl font-bold">
+                    {member.firstname} {member.lastname}
+                </h1>
+                <p className="text-sm text-muted-foreground">{member.retzien_email || member.email}</p>
+
+                {membership ? (
+                    <div className="mt-3 flex flex-wrap gap-4 text-sm">
+                        <span className="inline-flex items-center gap-1.5 rounded-full bg-secondary/20 text-secondary-foreground px-3 py-1 font-medium border border-secondary/40">
+                            {membership.package?.name ?? 'Adhésion'}
+                        </span>
+                        <span
+                            className={cn(
+                                'inline-flex items-center gap-1.5 rounded-full px-3 py-1 font-medium border',
+                                membership.status === 'active'
+                                    ? 'bg-green-100 text-green-800 border-green-300 dark:bg-green-900/20 dark:text-green-400 dark:border-green-700'
+                                    : 'bg-orange-100 text-orange-800 border-orange-300 dark:bg-orange-900/20 dark:text-orange-400 dark:border-orange-700',
+                            )}
+                        >
+                            {membership.status === 'active' ? 'Actif' : 'En attente'}
+                        </span>
+                        {membership.end_date && (
+                            <span className="text-muted-foreground">
+                                Valide jusqu'au {new Date(membership.end_date).toLocaleDateString('fr-FR')}
+                            </span>
+                        )}
+                    </div>
+                ) : (
+                    <p className="mt-2 text-sm text-muted-foreground">Aucune adhésion active.</p>
+                )}
+            </div>
+        </>
+    );
+}