diff --git a/app/client/page.tsx b/app/client/page.tsx index 20bf70a..b045fd8 100644 --- a/app/client/page.tsx +++ b/app/client/page.tsx @@ -2,13 +2,11 @@ import { useEffect, useState } from "react"; import { useAuth } from "@/contexts/AuthContext"; import { useRouter } from "next/navigation"; -import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/Card"; -import { StatusBadge } from "@/components/ui/StatusBadge"; -import Button from "@/components/Button"; import { Loading } from "@/components/ui/Loading"; +import { TicketTableRow } from "@/components/ui/TicketTableRow"; import { Ticket } from "@/types"; import { gameService } from "@/services/game.service"; -import { ROUTES, PRIZE_CONFIG } from "@/utils/constants"; +import { ROUTES } from "@/utils/constants"; import Link from "next/link"; export default function ClientPage() { @@ -201,67 +199,9 @@ export default function ClientPage() { - {tickets.slice(0, 5).map((ticket) => { - const prizeConfig = ticket.prize - ? PRIZE_CONFIG[ticket.prize.type as keyof typeof PRIZE_CONFIG] - : null; - - return ( - - - - {ticket.code} - - - -
- {prizeConfig && ( - <> -
- {ticket.prize?.type === 'INFUSEUR' && ( - - - - )} - {ticket.prize?.type === 'THE_SIGNATURE' && ( - - - - )} - {ticket.prize?.type === 'COFFRET_DECOUVERTE' && ( - - - - )} - {ticket.prize?.type === 'COFFRET_PRESTIGE' && ( - - - - )} - {ticket.prize?.type === 'THE_GRATUIT' && ( - - - - )} -
-
-

- {prizeConfig.name} -

-
- - )} -
- - - - - - {ticket.playedAt ? new Date(ticket.playedAt).toLocaleDateString("fr-FR") : "-"} - - - ); - })} + {tickets.slice(0, 5).map((ticket) => ( + + ))} diff --git a/app/historique/page.tsx b/app/historique/page.tsx index 9e7da89..c918364 100644 --- a/app/historique/page.tsx +++ b/app/historique/page.tsx @@ -2,13 +2,11 @@ import { useEffect, useState, useCallback } from "react"; import { useAuth } from "@/contexts/AuthContext"; import { useRouter } from "next/navigation"; -import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/Card"; -import { StatusBadge } from "@/components/ui/StatusBadge"; -import Button from "@/components/Button"; import { Loading } from "@/components/ui/Loading"; +import { TicketTableRow } from "@/components/ui/TicketTableRow"; import { Ticket } from "@/types"; import { gameService } from "@/services/game.service"; -import { ROUTES, PRIZE_CONFIG } from "@/utils/constants"; +import { ROUTES } from "@/utils/constants"; import { Calendar, Search } from "lucide-react"; export default function HistoriquePage() { @@ -266,86 +264,9 @@ export default function HistoriquePage() { - {filteredTickets.map((ticket) => { - const prizeConfig = ticket.prize - ? PRIZE_CONFIG[ticket.prize.type as keyof typeof PRIZE_CONFIG] - : null; - - return ( - - - - {ticket.code} - - - -
- {prizeConfig && ( - <> -
- {ticket.prize?.type === 'INFUSEUR' && ( - - - - )} - {ticket.prize?.type === 'THE_SIGNATURE' && ( - - - - )} - {ticket.prize?.type === 'COFFRET_DECOUVERTE' && ( - - - - )} - {ticket.prize?.type === 'COFFRET_PRESTIGE' && ( - - - - )} - {ticket.prize?.type === 'THE_GRATUIT' && ( - - - - )} -
-
-

- {prizeConfig.name} -

-
- - )} -
- - - - - - {ticket.playedAt - ? new Date(ticket.playedAt).toLocaleDateString("fr-FR", { - day: 'numeric', - month: 'long', - year: 'numeric', - hour: '2-digit', - minute: '2-digit', - }) - : "-"} - - - {ticket.claimedAt - ? new Date(ticket.claimedAt).toLocaleDateString("fr-FR", { - day: 'numeric', - month: 'long', - year: 'numeric', - hour: '2-digit', - minute: '2-digit', - }) - : "-"} - - - ); - })} + {filteredTickets.map((ticket) => ( + + ))} diff --git a/components/ui/TicketPrizeDisplay.tsx b/components/ui/TicketPrizeDisplay.tsx new file mode 100644 index 0000000..07b974d --- /dev/null +++ b/components/ui/TicketPrizeDisplay.tsx @@ -0,0 +1,63 @@ +'use client'; + +import React from 'react'; +import { PRIZE_CONFIG } from '@/utils/constants'; + +interface TicketPrizeDisplayProps { + prizeType: string; + className?: string; +} + +const PRIZE_ICONS: Record = { + INFUSEUR: ( + + + + ), + THE_SIGNATURE: ( + + + + ), + COFFRET_DECOUVERTE: ( + + + + ), + COFFRET_PRESTIGE: ( + + + + ), + THE_GRATUIT: ( + + + + ), +}; + +export const TicketPrizeDisplay: React.FC = ({ + prizeType, + className = '', +}) => { + const prizeConfig = PRIZE_CONFIG[prizeType as keyof typeof PRIZE_CONFIG]; + + if (!prizeConfig) { + return null; + } + + return ( +
+
+ {PRIZE_ICONS[prizeType]} +
+
+

+ {prizeConfig.name} +

+
+
+ ); +}; + +export default TicketPrizeDisplay; diff --git a/components/ui/TicketTableRow.tsx b/components/ui/TicketTableRow.tsx new file mode 100644 index 0000000..588ea1b --- /dev/null +++ b/components/ui/TicketTableRow.tsx @@ -0,0 +1,60 @@ +'use client'; + +import React from 'react'; +import { StatusBadge } from '@/components/ui/StatusBadge'; +import { TicketPrizeDisplay } from '@/components/ui/TicketPrizeDisplay'; +import { Ticket } from '@/types'; + +interface TicketTableRowProps { + ticket: Ticket; + showClaimedDate?: boolean; +} + +export const TicketTableRow: React.FC = ({ + ticket, + showClaimedDate = false, +}) => { + return ( + + + + {ticket.code} + + + + {ticket.prize && ( + + )} + + + + + + {ticket.playedAt + ? new Date(ticket.playedAt).toLocaleDateString("fr-FR", showClaimedDate ? { + day: 'numeric', + month: 'long', + year: 'numeric', + hour: '2-digit', + minute: '2-digit', + } : undefined) + : "-"} + + {showClaimedDate && ( + + {ticket.claimedAt + ? new Date(ticket.claimedAt).toLocaleDateString("fr-FR", { + day: 'numeric', + month: 'long', + year: 'numeric', + hour: '2-digit', + minute: '2-digit', + }) + : "-"} + + )} + + ); +}; + +export default TicketTableRow;