feat(wip member dashboard)
All checks were successful
Deploy Roxane to Preprod / deploy (push) Successful in 26h10m31s
All checks were successful
Deploy Roxane to Preprod / deploy (push) Successful in 26h10m31s
This commit is contained in:
@@ -1,35 +1,220 @@
|
||||
import { PlaceholderPattern } from '@/components/ui/placeholder-pattern';
|
||||
import AppLayout from '@/layouts/app-layout';
|
||||
import { dashboard } from '@/routes';
|
||||
import { type BreadcrumbItem } from '@/types';
|
||||
import { Head } from '@inertiajs/react';
|
||||
import { type BreadcrumbItem, type DashboardMember, type DashboardService, type PageProps } from '@/types';
|
||||
import { Head, router, usePage } from '@inertiajs/react';
|
||||
import DashboardController from '@/actions/App/Http/Controllers/DashboardController';
|
||||
import { ExternalLink, KeyRound, Loader2 } from 'lucide-react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { FlashMessage } from '@/components/flash-message';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
const breadcrumbs: BreadcrumbItem[] = [
|
||||
{
|
||||
title: 'Tableau de Bord',
|
||||
href: dashboard().url,
|
||||
title: 'Tableau de bord',
|
||||
href: DashboardController.index().url,
|
||||
},
|
||||
];
|
||||
|
||||
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]));
|
||||
}
|
||||
}
|
||||
|
||||
function WelcomeCard({ member }: { member: DashboardMember }) {
|
||||
const membership = member.membership;
|
||||
|
||||
return (
|
||||
<div className="nb-shadow-static bg-primary rounded-2xl p-6 flex flex-col gap-2">
|
||||
<p className="text-sm text-muted-foreground font-medium uppercase tracking-wide">Bienvenue</p>
|
||||
<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>
|
||||
);
|
||||
}
|
||||
|
||||
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>
|
||||
);
|
||||
}
|
||||
|
||||
function ServiceCard({ service, onRequest }: { service: DashboardService; onRequest: (identifier: string) => void }) {
|
||||
const [alreadyRequested, setAlreadyRequested] = useState(() =>
|
||||
getRequestedServices().includes(service.identifier),
|
||||
);
|
||||
|
||||
function handleRequest() {
|
||||
markServiceRequested(service.identifier);
|
||||
setAlreadyRequested(true);
|
||||
onRequest(service.identifier);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={cn(
|
||||
'nb-shadow-static bg-white dark:bg-[#171717] rounded-2xl p-5 flex flex-col gap-3',
|
||||
!service.is_active && 'opacity-80',
|
||||
)}>
|
||||
<div className="flex items-start justify-between gap-2">
|
||||
<div>
|
||||
<h3 className="font-semibold text-base">{service.name}</h3>
|
||||
{service.description && (
|
||||
<p className="text-xs text-muted-foreground mt-0.5">{service.description}</p>
|
||||
)}
|
||||
</div>
|
||||
<span className={cn(
|
||||
'shrink-0 text-xs rounded-full px-2 py-0.5 font-medium border',
|
||||
service.is_active
|
||||
? 'bg-green-100 text-green-800 border-green-300 dark:bg-green-900/20 dark:text-green-400 dark:border-green-700'
|
||||
: 'bg-gray-100 text-gray-600 border-gray-300 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600',
|
||||
)}>
|
||||
{service.is_active ? 'Actif' : 'Inactif'}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{service.is_active ? (
|
||||
<a
|
||||
href={service.url}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="inline-flex items-center gap-1.5 text-sm font-medium text-primary hover:underline"
|
||||
>
|
||||
Accéder au service <ExternalLink className="size-3.5" />
|
||||
</a>
|
||||
) : (
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
disabled={alreadyRequested}
|
||||
onClick={handleRequest}
|
||||
className="self-start text-xs"
|
||||
>
|
||||
{alreadyRequested ? 'Demande envoyée' : 'Demander l\'activation'}
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function Dashboard() {
|
||||
const { flash, member } = usePage<PageProps>().props;
|
||||
const [showFlash, setShowFlash] = useState(!!flash);
|
||||
const [submitting, setSubmitting] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (flash) {
|
||||
setShowFlash(true);
|
||||
const timer = setTimeout(() => setShowFlash(false), 5000);
|
||||
return () => clearTimeout(timer);
|
||||
}
|
||||
}, [flash]);
|
||||
|
||||
function handleActivationRequest(identifier: string) {
|
||||
setSubmitting(true);
|
||||
router.post(
|
||||
DashboardController.requestServiceActivation().url,
|
||||
{ service_identifier: identifier },
|
||||
{
|
||||
preserveScroll: true,
|
||||
onFinish: () => setSubmitting(false),
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
const membership = member?.membership ?? null;
|
||||
const services = membership?.services ?? [];
|
||||
|
||||
return (
|
||||
<AppLayout breadcrumbs={breadcrumbs}>
|
||||
<Head title="Tableau de bord" />
|
||||
<div className="flex h-full flex-1 flex-col gap-4 overflow-x-auto rounded-xl p-4">
|
||||
<div className="grid auto-rows-min gap-4 md:grid-cols-3">
|
||||
<div className="relative aspect-video overflow-hidden rounded-xl border border-sidebar-border/70 dark:border-sidebar-border">
|
||||
<PlaceholderPattern className="absolute inset-0 size-full stroke-neutral-900/20 dark:stroke-neutral-100/20" />
|
||||
</div>
|
||||
<div className="relative aspect-video overflow-hidden rounded-xl border border-sidebar-border/70 dark:border-sidebar-border">
|
||||
<PlaceholderPattern className="absolute inset-0 size-full stroke-neutral-900/20 dark:stroke-neutral-100/20" />
|
||||
</div>
|
||||
<div className="relative aspect-video overflow-hidden rounded-xl border border-sidebar-border/70 dark:border-sidebar-border">
|
||||
<PlaceholderPattern className="absolute inset-0 size-full stroke-neutral-900/20 dark:stroke-neutral-100/20" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="relative min-h-[100vh] flex-1 overflow-hidden rounded-xl border border-sidebar-border/70 md:min-h-min dark:border-sidebar-border">
|
||||
<PlaceholderPattern className="absolute inset-0 size-full stroke-neutral-900/20 dark:stroke-neutral-100/20" />
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-6 p-4 md:p-6">
|
||||
{showFlash && flash && <FlashMessage messages={flash} />}
|
||||
|
||||
{member ? (
|
||||
<>
|
||||
<WelcomeCard member={member} />
|
||||
|
||||
{services.length > 0 && (
|
||||
<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 sm:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
{services.map((service) => (
|
||||
<ServiceCard
|
||||
key={service.identifier}
|
||||
service={service}
|
||||
onRequest={handleActivationRequest}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{services.length === 0 && membership && (
|
||||
<div className="nb-shadow-static bg-white dark:bg-[#171717] rounded-2xl p-6 text-center text-muted-foreground text-sm">
|
||||
Aucun service associé à votre adhésion pour le moment.
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!membership && (
|
||||
<div className="nb-shadow-static bg-white dark:bg-[#171717] rounded-2xl p-6 text-center text-muted-foreground text-sm">
|
||||
Votre demande d'adhésion est en cours de traitement.
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
) : (
|
||||
<NoMemberCard />
|
||||
)}
|
||||
</div>
|
||||
</AppLayout>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user