feat( member dashboard recap & services list)
This commit is contained in:
18
resources/js/components/features/dashboard/NoMemberCard.tsx
Normal file
18
resources/js/components/features/dashboard/NoMemberCard.tsx
Normal file
@@ -0,0 +1,18 @@
|
||||
import { KeyRound } from 'lucide-react';
|
||||
import { router } from '@inertiajs/react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
|
||||
export function NoMemberCard() {
|
||||
return (
|
||||
<div className="nb-shadow-static bg-white dark:bg-[#171717] rounded-2xl p-8 flex flex-col items-center gap-4 text-center max-w-lg mx-auto">
|
||||
<KeyRound className="size-10 text-primary" />
|
||||
<h2 className="text-xl font-bold">Pas encore membre ?</h2>
|
||||
<p className="text-muted-foreground text-sm">
|
||||
Votre compte n'est pas encore associé à une adhésion. Rejoignez l'association pour accéder aux services.
|
||||
</p>
|
||||
<Button variant="secondary" className="nb-shadow" onClick={() => router.visit('/formulaires/adhesion')}>
|
||||
Adhérer au Retzien Libre
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
115
resources/js/components/features/dashboard/ServiceCard.tsx
Normal file
115
resources/js/components/features/dashboard/ServiceCard.tsx
Normal file
@@ -0,0 +1,115 @@
|
||||
import { useState } from 'react';
|
||||
import { Cloud, ExternalLink, Globe, Layers, Mail, Megaphone, Share2 } from 'lucide-react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { cn } from '@/lib/utils';
|
||||
import { type DashboardService } from '@/types';
|
||||
|
||||
const ACTIVATION_REQUESTED_KEY = 'service_activation_requested';
|
||||
|
||||
function getRequestedServices(): string[] {
|
||||
try {
|
||||
return JSON.parse(localStorage.getItem(ACTIVATION_REQUESTED_KEY) ?? '[]');
|
||||
} catch {
|
||||
return [];
|
||||
}
|
||||
}
|
||||
|
||||
function markServiceRequested(identifier: string): void {
|
||||
const current = getRequestedServices();
|
||||
if (!current.includes(identifier)) {
|
||||
localStorage.setItem(ACTIVATION_REQUESTED_KEY, JSON.stringify([...current, identifier]));
|
||||
}
|
||||
}
|
||||
|
||||
const iconMap: Record<string, typeof Mail> = {
|
||||
envelope: Mail,
|
||||
share: Share2,
|
||||
cloud: Cloud,
|
||||
megaphone: Megaphone,
|
||||
'globe-alt': Globe,
|
||||
};
|
||||
|
||||
const colorSchemes = [
|
||||
{
|
||||
card: 'bg-secondary',
|
||||
titleBg: 'bg-accent',
|
||||
titleText: 'text-accent-foreground',
|
||||
linkText: 'text-foreground',
|
||||
iconText: 'text-foreground/10',
|
||||
},
|
||||
{
|
||||
card: 'bg-primary',
|
||||
titleBg: 'bg-white',
|
||||
titleText: 'text-black',
|
||||
linkText: 'text-foreground',
|
||||
iconText: 'text-foreground/10',
|
||||
},
|
||||
{
|
||||
card: 'bg-accent',
|
||||
titleBg: 'bg-primary',
|
||||
titleText: 'text-primary-foreground',
|
||||
linkText: 'text-accent-foreground',
|
||||
iconText: 'text-white/10',
|
||||
},
|
||||
];
|
||||
|
||||
interface Props {
|
||||
service: DashboardService;
|
||||
index: number;
|
||||
onRequest: (identifier: string) => void;
|
||||
}
|
||||
|
||||
export function ServiceCard({ service, index, onRequest }: Props) {
|
||||
const [alreadyRequested, setAlreadyRequested] = useState(() =>
|
||||
getRequestedServices().includes(service.identifier),
|
||||
);
|
||||
|
||||
const scheme = colorSchemes[index % colorSchemes.length];
|
||||
const Icon = iconMap[service.icon ?? ''] ?? Layers;
|
||||
|
||||
function handleRequest() {
|
||||
markServiceRequested(service.identifier);
|
||||
setAlreadyRequested(true);
|
||||
onRequest(service.identifier);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={cn('nb-shadow flex items-center gap-4 rounded-4xl p-10', scheme.card)}>
|
||||
<div className="flex flex-col gap-3 flex-1 min-w-0">
|
||||
<div className="max-w-[200px]">
|
||||
<h3 className={cn('inline text-2xl font-semibold rounded p-1 line-clamp-2', scheme.titleBg, scheme.titleText)}>
|
||||
{service.name}
|
||||
</h3>
|
||||
</div>
|
||||
{service.description && (
|
||||
<p className="text-sm text-muted-foreground mt-2">{service.description}</p>
|
||||
)}
|
||||
<div className="mt-2">
|
||||
{service.is_active ? (
|
||||
<a
|
||||
href={service.url}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className={cn('inline-flex items-center gap-1.5 text-sm font-medium underline hover:no-underline', scheme.linkText)}
|
||||
>
|
||||
Accéder au service <ExternalLink className="size-3.5" />
|
||||
</a>
|
||||
) : (
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
disabled={alreadyRequested}
|
||||
onClick={handleRequest}
|
||||
className="text-xs"
|
||||
>
|
||||
{alreadyRequested ? 'Demande envoyée' : "Demander l'activation"}
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className={cn('shrink-0', scheme.iconText)}>
|
||||
<Icon className="size-32" />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,32 @@
|
||||
import { Loader2 } from 'lucide-react';
|
||||
import { type DashboardService } from '@/types';
|
||||
import { ServiceCard } from './ServiceCard';
|
||||
|
||||
interface Props {
|
||||
services: DashboardService[];
|
||||
submitting: boolean;
|
||||
onRequest: (identifier: string) => void;
|
||||
}
|
||||
|
||||
export function ServicesSection({ services, submitting, onRequest }: Props) {
|
||||
return (
|
||||
<div className="flex flex-col gap-4">
|
||||
<h2 className="text-lg font-semibold">Vos services</h2>
|
||||
{submitting && (
|
||||
<div className="flex items-center gap-2 text-sm text-muted-foreground">
|
||||
<Loader2 className="size-4 animate-spin" /> Envoi en cours…
|
||||
</div>
|
||||
)}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
{services.map((service, index) => (
|
||||
<ServiceCard
|
||||
key={service.identifier}
|
||||
service={service}
|
||||
index={index}
|
||||
onRequest={onRequest}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
51
resources/js/components/features/dashboard/WelcomeCard.tsx
Normal file
51
resources/js/components/features/dashboard/WelcomeCard.tsx
Normal file
@@ -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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user