diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..f9ba7f8 --- /dev/null +++ b/.gitignore @@ -0,0 +1,6 @@ +node_modules +dist +.DS_Store +server/public +vite.config.ts.* +*.tar.gz \ No newline at end of file diff --git a/.replit b/.replit index e69de29..51f344f 100644 --- a/.replit +++ b/.replit @@ -0,0 +1,36 @@ +modules = ["nodejs-20", "web", "postgresql-16"] +run = "npm run dev" +hidden = [".config", ".git", "generated-icon.png", "node_modules", "dist"] + +[nix] +channel = "stable-24_05" + +[deployment] +deploymentTarget = "autoscale" +build = ["npm", "run", "build"] +run = ["npm", "run", "start"] + +[[ports]] +localPort = 5000 +externalPort = 80 + +[workflows] +runButton = "Project" + +[[workflows.workflow]] +name = "Project" +mode = "parallel" +author = "agent" + +[[workflows.workflow.tasks]] +task = "workflow.run" +args = "Start application" + +[[workflows.workflow]] +name = "Start application" +author = "agent" + +[[workflows.workflow.tasks]] +task = "shell.exec" +args = "npm run dev" +waitForPort = 5000 diff --git a/client/index.html b/client/index.html new file mode 100644 index 0000000..c347196 --- /dev/null +++ b/client/index.html @@ -0,0 +1,15 @@ + + + + + + Registre des Ventes de Pétards + + + +
+ + + + + diff --git a/client/src/App.tsx b/client/src/App.tsx new file mode 100644 index 0000000..e2a6fc6 --- /dev/null +++ b/client/src/App.tsx @@ -0,0 +1,18 @@ +import { QueryClientProvider } from "@tanstack/react-query"; +import { queryClient } from "./lib/queryClient"; +import { Toaster } from "@/components/ui/toaster"; +import { TooltipProvider } from "@/components/ui/tooltip"; +import FireworksApp from "./components/FireworksApp"; + +function App() { + return ( + + + + + + + ); +} + +export default App; diff --git a/client/src/components/CameraModal.tsx b/client/src/components/CameraModal.tsx new file mode 100644 index 0000000..9c5f29a --- /dev/null +++ b/client/src/components/CameraModal.tsx @@ -0,0 +1,72 @@ +import { useEffect } from 'react'; +import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog'; +import { Button } from '@/components/ui/button'; +import { Camera, X } from 'lucide-react'; +import { PhotoType } from '@/types/sale'; + +interface CameraModalProps { + isOpen: boolean; + photoType: PhotoType | null; + videoRef: React.RefObject; + canvasRef: React.RefObject; + isCapturing: boolean; + onClose: () => void; + onCapture: () => void; +} + +export default function CameraModal({ + isOpen, + photoType, + videoRef, + canvasRef, + isCapturing, + onClose, + onCapture +}: CameraModalProps) { + useEffect(() => { + if (isOpen && videoRef.current) { + // Ensure video starts playing when modal opens + videoRef.current.play().catch(console.error); + } + }, [isOpen, videoRef]); + + return ( + + + + + Photo {photoType ? photoType.charAt(0).toUpperCase() + photoType.slice(1) : ''} + + + +
+
+
+ +
+ + +
+
+ + + ); +} diff --git a/client/src/components/FireworksApp.tsx b/client/src/components/FireworksApp.tsx new file mode 100644 index 0000000..f6fd2f9 --- /dev/null +++ b/client/src/components/FireworksApp.tsx @@ -0,0 +1,66 @@ +import { useState } from 'react'; +import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'; +import { Shield, Flame } from 'lucide-react'; +import NewSaleForm from './NewSaleForm'; +import SalesHistory from './SalesHistory'; +import { useIndexedDB } from '@/hooks/useIndexedDB'; + +export default function FireworksApp() { + const [activeTab, setActiveTab] = useState('nouvelle-vente'); + const { sales, isLoading, error, saveSale, deleteSale } = useIndexedDB(); + + return ( +
+ {/* Header */} +
+
+
+
+ +

+ Registre des Ventes de Pétards +

+
+
+ + Conforme à la réglementation française +
+
+
+
+ + {/* Main Content */} +
+ + + + + + + Nouvelle Vente + + + + + + Historique ({sales.length} vente{sales.length !== 1 ? 's' : ''}) + + + + + + + + + + + +
+
+ ); +} diff --git a/client/src/components/NewSaleForm.tsx b/client/src/components/NewSaleForm.tsx new file mode 100644 index 0000000..0995957 --- /dev/null +++ b/client/src/components/NewSaleForm.tsx @@ -0,0 +1,555 @@ +import { useState } from 'react'; +import { useForm } from 'react-hook-form'; +import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card'; +import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '@/components/ui/form'; +import { Input } from '@/components/ui/input'; +import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'; +import { Button } from '@/components/ui/button'; +import { Alert, AlertDescription } from '@/components/ui/alert'; +import { useToast } from '@/hooks/use-toast'; +import { Camera, User, Package, Users, IdCard, Save, X, Trash2 } from 'lucide-react'; +import { Sale, FormData, PhotoType } from '@/types/sale'; +import { validateRequiredFields, validateEAN13, ARTICLE_CATEGORY_MAPPING, IDENTITY_TYPES } from '@/lib/validation'; +import { useCamera } from '@/hooks/useCamera'; +import CameraModal from './CameraModal'; + +interface NewSaleFormProps { + onSaveSale: (sale: Omit) => Promise; +} + +export default function NewSaleForm({ onSaveSale }: NewSaleFormProps) { + const { toast } = useToast(); + const [photos, setPhotos] = useState<{ recto?: string; verso?: string }>({}); + const [isSubmitting, setIsSubmitting] = useState(false); + + const camera = useCamera(); + + const form = useForm({ + defaultValues: { + vendeur: '', + dateVente: new Date().toISOString().split('T')[0], + typeArticle: '', + categorie: '', + quantite: '', + gencode: '', + nom: '', + prenom: '', + dateNaissance: '', + lieuNaissance: '', + typeIdentite: '', + autoriteDelivrance: '', + dateDelivrance: '', + } + }); + + const typeArticle = form.watch('typeArticle'); + const availableCategories = typeArticle ? ARTICLE_CATEGORY_MAPPING[typeArticle as keyof typeof ARTICLE_CATEGORY_MAPPING] || [] : []; + + const handlePhotoCapture = async (photoType: PhotoType) => { + try { + await camera.startCamera(photoType); + toast({ + title: "Caméra activée", + description: "Positionnez la carte d'identité", + }); + } catch (error) { + toast({ + title: "Erreur caméra", + description: error instanceof Error ? error.message : "Impossible d'accéder à la caméra", + variant: "destructive", + }); + } + }; + + const handlePhotoTaken = (photoType: PhotoType, photoData: string) => { + setPhotos(prev => ({ ...prev, [photoType]: photoData })); + toast({ + title: "Photo capturée", + description: `Photo ${photoType} sauvegardée avec succès`, + }); + }; + + const deletePhoto = (photoType: PhotoType) => { + setPhotos(prev => { + const newPhotos = { ...prev }; + delete newPhotos[photoType]; + return newPhotos; + }); + toast({ + title: "Photo supprimée", + description: `Photo ${photoType} supprimée`, + }); + }; + + const onSubmit = async (data: FormData) => { + try { + setIsSubmitting(true); + + // Validate required fields + const missingFields = validateRequiredFields(data); + if (missingFields.length > 0) { + toast({ + title: "Champs manquants", + description: `Veuillez remplir: ${missingFields.join(', ')}`, + variant: "destructive", + }); + return; + } + + // Validate EAN13 if provided + if (data.gencode && !validateEAN13(data.gencode)) { + toast({ + title: "Code EAN13 invalide", + description: "Le code produit doit être un code EAN13 valide à 13 chiffres", + variant: "destructive", + }); + return; + } + + const saleData: Omit = { + vendeur: data.vendeur, + dateVente: data.dateVente, + typeArticle: data.typeArticle, + categorie: data.categorie as 'F2' | 'F3', + quantite: parseInt(data.quantite), + gencode: data.gencode || undefined, + nom: data.nom, + prenom: data.prenom, + dateNaissance: data.dateNaissance || undefined, + lieuNaissance: data.lieuNaissance || undefined, + typeIdentite: data.typeIdentite || undefined, + autoriteDelivrance: data.autoriteDelivrance || undefined, + dateDelivrance: data.dateDelivrance || undefined, + photoRecto: photos.recto, + photoVerso: photos.verso, + }; + + await onSaveSale(saleData); + + // Reset form + form.reset({ + vendeur: '', + dateVente: new Date().toISOString().split('T')[0], + typeArticle: '', + categorie: '', + quantite: '', + gencode: '', + nom: '', + prenom: '', + dateNaissance: '', + lieuNaissance: '', + typeIdentite: '', + autoriteDelivrance: '', + dateDelivrance: '', + }); + setPhotos({}); + + toast({ + title: "Vente enregistrée", + description: "La vente a été enregistrée avec succès", + }); + } catch (error) { + toast({ + title: "Erreur", + description: "Erreur lors de l'enregistrement de la vente", + variant: "destructive", + }); + } finally { + setIsSubmitting(false); + } + }; + + return ( + <> + + + + + Nouvelle Vente + +

+ Enregistrement d'une vente de feux d'artifice +

+ + +
+ + {/* Seller Information */} +
+

+ + Informations Vendeur +

+
+ ( + + Nom du vendeur * + + + + + + )} + /> + ( + + Date de vente + + + + + + )} + /> +
+
+ + {/* Product Information */} +
+

+ + Informations Produit +

+
+ ( + + Type d'article * + + + + )} + /> + ( + + Catégorie réglementaire * + + + + )} + /> + ( + + Quantité * + + + + + + )} + /> + ( + + Code produit (EAN13) + + + + + + )} + /> +
+ + + + + + + Information réglementaire : +
    +
  • • F2 : Feux d'artifice de catégorie F2 - Vente libre aux majeurs
    • +
  • • F3 : Feux d'artifice de catégorie F3 - Vente soumise à autorisation préfectorale
    • +
+ + +
+ + {/* Customer Information */} +
+

+ + Informations Client +

+
+ ( + + Nom de famille * + + + + + + )} + /> + ( + + Prénom * + + + + + + )} + /> + ( + + Date de naissance + + + + + + )} + /> + ( + + Lieu de naissance + + + + + + )} + /> +
+
+ + {/* Identity Document */} +
+

+ + Pièce d'Identité +

+
+ ( + + Type de pièce d'identité + + + + )} + /> + ( + + Autorité de délivrance + + + + + + )} + /> + ( + + Date de délivrance + + + + + + )} + /> +
+
+ + {/* Identity Photos */} +
+

+ + Photos de la Pièce d'Identité +

+
+ {/* Photo Recto */} +
+ +
+ {photos.recto ? ( +
+ Photo recto + +
+ ) : ( +
+ +

Aucune photo

+ +
+ )} +
+
+ + {/* Photo Verso */} +
+ +
+ {photos.verso ? ( +
+ Photo verso + +
+ ) : ( +
+ +

Aucune photo

+ +
+ )} +
+
+
+
+ + {/* Form Actions */} +
+ + +
+
+ + + + + { + try { + const photoData = await camera.capturePhoto(); + if (camera.currentPhotoType) { + handlePhotoTaken(camera.currentPhotoType, photoData); + } + camera.stopCamera(); + } catch (error) { + toast({ + title: "Erreur", + description: "Erreur lors de la capture de la photo", + variant: "destructive", + }); + } + }} + /> + + ); +} diff --git a/client/src/components/SaleDetailsModal.tsx b/client/src/components/SaleDetailsModal.tsx new file mode 100644 index 0000000..af5b5cb --- /dev/null +++ b/client/src/components/SaleDetailsModal.tsx @@ -0,0 +1,119 @@ +import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog'; +import { Button } from '@/components/ui/button'; +import { Badge } from '@/components/ui/badge'; +import { X } from 'lucide-react'; +import { Sale } from '@/types/sale'; +import { formatDate, formatDateTime } from '@/lib/export'; + +interface SaleDetailsModalProps { + isOpen: boolean; + sale: Sale | null; + onClose: () => void; +} + +export default function SaleDetailsModal({ isOpen, sale, onClose }: SaleDetailsModalProps) { + if (!sale) return null; + + return ( + + + + Détails de la Vente + + +
+ {/* Seller Information */} +
+

Informations Vendeur

+
+
Vendeur: {sale.vendeur}
+
Date de vente: {formatDate(sale.dateVente)}
+
+
+ + {/* Product Information */} +
+

Informations Produit

+
+
Type d'article: {sale.typeArticle}
+
+ Catégorie:{' '} + + {sale.categorie} + +
+
Quantité: {sale.quantite}
+
Code produit: {sale.gencode || 'Non spécifié'}
+
+
+ + {/* Customer Information */} +
+

Informations Client

+
+
Nom: {sale.nom}
+
Prénom: {sale.prenom}
+
+ Date de naissance:{' '} + {sale.dateNaissance ? formatDate(sale.dateNaissance) : 'Non spécifiée'} +
+
Lieu de naissance: {sale.lieuNaissance || 'Non spécifié'}
+
+
+ + {/* Identity Document */} +
+

Pièce d'Identité

+
+
Type: {sale.typeIdentite || 'Non spécifié'}
+
Autorité de délivrance: {sale.autoriteDelivrance || 'Non spécifiée'}
+
+ Date de délivrance:{' '} + {sale.dateDelivrance ? formatDate(sale.dateDelivrance) : 'Non spécifiée'} +
+
+
+ + {/* Photos */} +
+

Photos de la Pièce d'Identité

+
+
+ Photo Recto: + {sale.photoRecto ? ( + Photo recto + ) : ( +

Aucune photo

+ )} +
+
+ Photo Verso: + {sale.photoVerso ? ( + Photo verso + ) : ( +

Aucune photo

+ )} +
+
+
+ + {/* System Information */} +
+

Informations Système

+
+
Timestamp: {formatDateTime(sale.timestamp)}
+
ID: {sale.id}
+
+
+
+ +
+ +
+ + + ); +} diff --git a/client/src/components/SalesHistory.tsx b/client/src/components/SalesHistory.tsx new file mode 100644 index 0000000..2644eb4 --- /dev/null +++ b/client/src/components/SalesHistory.tsx @@ -0,0 +1,284 @@ +import { useState } from 'react'; +import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card'; +import { Button } from '@/components/ui/button'; +import { Badge } from '@/components/ui/badge'; +import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'; +import { useToast } from '@/hooks/use-toast'; +import { Download, Save, Search, Eye, Trash2, BarChart3, AlertCircle } from 'lucide-react'; +import { Sale } from '@/types/sale'; +import { exportToCSV, formatDate } from '@/lib/export'; +import { downloadBackup, getAutoBackup } from '@/lib/storage'; +import SaleDetailsModal from './SaleDetailsModal'; + +interface SalesHistoryProps { + sales: Sale[]; + isLoading: boolean; + error: string | null; + onDeleteSale: (id: number) => Promise; +} + +export default function SalesHistory({ sales, isLoading, error, onDeleteSale }: SalesHistoryProps) { + const { toast } = useToast(); + const [selectedSale, setSelectedSale] = useState(null); + const [isDeleting, setIsDeleting] = useState(null); + + const handleExportCSV = () => { + if (sales.length === 0) { + toast({ + title: "Aucune vente à exporter", + description: "Il n'y a aucune vente enregistrée", + }); + return; + } + + try { + exportToCSV(sales); + toast({ + title: "Export réussi !", + description: `${sales.length} vente(s) exportée(s)`, + }); + } catch (error) { + toast({ + title: "Erreur d'export", + description: "Impossible d'exporter les données", + variant: "destructive", + }); + } + }; + + const handleDownloadBackup = () => { + const backup = getAutoBackup(); + if (!backup) { + toast({ + title: "Aucune sauvegarde disponible", + description: "Aucun backup automatique trouvé", + }); + return; + } + + try { + downloadBackup(); + toast({ + title: "Backup téléchargé", + description: "Sauvegarde téléchargée avec succès", + }); + } catch (error) { + toast({ + title: "Erreur", + description: "Impossible de télécharger la sauvegarde", + variant: "destructive", + }); + } + }; + + const handleDiagnostic = () => { + console.log('=== DIAGNOSTIC COMPLET ==='); + console.log('Nombre de ventes:', sales.length); + console.log('Données:', sales); + console.log('LocalStorage backup:', getAutoBackup()); + + toast({ + title: "Diagnostic affiché", + description: "Vérifiez la console pour les détails", + }); + }; + + const handleDeleteSale = async (sale: Sale) => { + const confirmed = window.confirm( + `Supprimer définitivement la vente de ${sale.nom} ${sale.prenom} ?\n\n⚠️ Cette action est irréversible !\n\nID: ${sale.id}` + ); + + if (!confirmed) return; + + try { + setIsDeleting(sale.id); + await onDeleteSale(sale.id); + toast({ + title: "Vente supprimée", + description: `Vente de ${sale.nom} ${sale.prenom} supprimée`, + }); + } catch (error) { + toast({ + title: "Erreur", + description: "Impossible de supprimer la vente", + variant: "destructive", + }); + } finally { + setIsDeleting(null); + } + }; + + const backup = getAutoBackup(); + + if (isLoading) { + return ( + + +
+
+

Chargement des ventes...

+
+ + + ); + } + + if (error) { + return ( + + +
+ +

{error}

+
+ + + ); + } + + return ( + <> + + +
+
+ + + Historique des Ventes + +

+ Gestion et export des ventes enregistrées +

+
+
+ + + +
+
+ + + {/* Status Information */} +
+
+ + + + + Données stockées localement ({sales.length} vente{sales.length !== 1 ? 's' : ''}) • Export CSV compatible Excel • Sauvegarde automatique à chaque ajout + +
+
+ {backup ? ( + + Dernier backup: {formatDate(backup.timestamp)} ({backup.recordCount} enreg.) + + ) : ( + Dernier backup: Aucun + )} +
+
+ + + {sales.length === 0 ? ( +
+ + + +

Aucune vente enregistrée

+
+ ) : ( +
+ + + + Date + Vendeur + Client + Produit + Catégorie + Quantité + Actions + + + + {sales.map((sale) => ( + + + {formatDate(sale.dateVente)} + + + {sale.vendeur || 'Non spécifié'} + + +
+
{sale.nom} {sale.prenom}
+ {sale.typeIdentite && ( +
{sale.typeIdentite}
+ )} +
+ + +
+
{sale.typeArticle}
+ {sale.gencode && ( +
{sale.gencode}
+ )} +
+ + + + {sale.categorie} + + + + {sale.quantite} + + +
+ + +
+ + + ))} + +
+
+ )} + + + + setSelectedSale(null)} + /> + + ); +} diff --git a/client/src/components/ui/accordion.tsx b/client/src/components/ui/accordion.tsx new file mode 100644 index 0000000..e6a723d --- /dev/null +++ b/client/src/components/ui/accordion.tsx @@ -0,0 +1,56 @@ +import * as React from "react" +import * as AccordionPrimitive from "@radix-ui/react-accordion" +import { ChevronDown } from "lucide-react" + +import { cn } from "@/lib/utils" + +const Accordion = AccordionPrimitive.Root + +const AccordionItem = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +AccordionItem.displayName = "AccordionItem" + +const AccordionTrigger = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, children, ...props }, ref) => ( + + svg]:rotate-180", + className + )} + {...props} + > + {children} + + + +)) +AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName + +const AccordionContent = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, children, ...props }, ref) => ( + +
{children}
+ +)) + +AccordionContent.displayName = AccordionPrimitive.Content.displayName + +export { Accordion, AccordionItem, AccordionTrigger, AccordionContent } diff --git a/client/src/components/ui/alert-dialog.tsx b/client/src/components/ui/alert-dialog.tsx new file mode 100644 index 0000000..8722561 --- /dev/null +++ b/client/src/components/ui/alert-dialog.tsx @@ -0,0 +1,139 @@ +import * as React from "react" +import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog" + +import { cn } from "@/lib/utils" +import { buttonVariants } from "@/components/ui/button" + +const AlertDialog = AlertDialogPrimitive.Root + +const AlertDialogTrigger = AlertDialogPrimitive.Trigger + +const AlertDialogPortal = AlertDialogPrimitive.Portal + +const AlertDialogOverlay = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName + +const AlertDialogContent = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + + + + +)) +AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName + +const AlertDialogHeader = ({ + className, + ...props +}: React.HTMLAttributes) => ( +
+) +AlertDialogHeader.displayName = "AlertDialogHeader" + +const AlertDialogFooter = ({ + className, + ...props +}: React.HTMLAttributes) => ( +
+) +AlertDialogFooter.displayName = "AlertDialogFooter" + +const AlertDialogTitle = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName + +const AlertDialogDescription = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +AlertDialogDescription.displayName = + AlertDialogPrimitive.Description.displayName + +const AlertDialogAction = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName + +const AlertDialogCancel = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName + +export { + AlertDialog, + AlertDialogPortal, + AlertDialogOverlay, + AlertDialogTrigger, + AlertDialogContent, + AlertDialogHeader, + AlertDialogFooter, + AlertDialogTitle, + AlertDialogDescription, + AlertDialogAction, + AlertDialogCancel, +} diff --git a/client/src/components/ui/alert.tsx b/client/src/components/ui/alert.tsx new file mode 100644 index 0000000..41fa7e0 --- /dev/null +++ b/client/src/components/ui/alert.tsx @@ -0,0 +1,59 @@ +import * as React from "react" +import { cva, type VariantProps } from "class-variance-authority" + +import { cn } from "@/lib/utils" + +const alertVariants = cva( + "relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground", + { + variants: { + variant: { + default: "bg-background text-foreground", + destructive: + "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive", + }, + }, + defaultVariants: { + variant: "default", + }, + } +) + +const Alert = React.forwardRef< + HTMLDivElement, + React.HTMLAttributes & VariantProps +>(({ className, variant, ...props }, ref) => ( +
+)) +Alert.displayName = "Alert" + +const AlertTitle = React.forwardRef< + HTMLParagraphElement, + React.HTMLAttributes +>(({ className, ...props }, ref) => ( +
+)) +AlertTitle.displayName = "AlertTitle" + +const AlertDescription = React.forwardRef< + HTMLParagraphElement, + React.HTMLAttributes +>(({ className, ...props }, ref) => ( +
+)) +AlertDescription.displayName = "AlertDescription" + +export { Alert, AlertTitle, AlertDescription } diff --git a/client/src/components/ui/aspect-ratio.tsx b/client/src/components/ui/aspect-ratio.tsx new file mode 100644 index 0000000..c4abbf3 --- /dev/null +++ b/client/src/components/ui/aspect-ratio.tsx @@ -0,0 +1,5 @@ +import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio" + +const AspectRatio = AspectRatioPrimitive.Root + +export { AspectRatio } diff --git a/client/src/components/ui/avatar.tsx b/client/src/components/ui/avatar.tsx new file mode 100644 index 0000000..51e507b --- /dev/null +++ b/client/src/components/ui/avatar.tsx @@ -0,0 +1,50 @@ +"use client" + +import * as React from "react" +import * as AvatarPrimitive from "@radix-ui/react-avatar" + +import { cn } from "@/lib/utils" + +const Avatar = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +Avatar.displayName = AvatarPrimitive.Root.displayName + +const AvatarImage = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +AvatarImage.displayName = AvatarPrimitive.Image.displayName + +const AvatarFallback = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName + +export { Avatar, AvatarImage, AvatarFallback } diff --git a/client/src/components/ui/badge.tsx b/client/src/components/ui/badge.tsx new file mode 100644 index 0000000..f000e3e --- /dev/null +++ b/client/src/components/ui/badge.tsx @@ -0,0 +1,36 @@ +import * as React from "react" +import { cva, type VariantProps } from "class-variance-authority" + +import { cn } from "@/lib/utils" + +const badgeVariants = cva( + "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2", + { + variants: { + variant: { + default: + "border-transparent bg-primary text-primary-foreground hover:bg-primary/80", + secondary: + "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80", + destructive: + "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80", + outline: "text-foreground", + }, + }, + defaultVariants: { + variant: "default", + }, + } +) + +export interface BadgeProps + extends React.HTMLAttributes, + VariantProps {} + +function Badge({ className, variant, ...props }: BadgeProps) { + return ( +
+ ) +} + +export { Badge, badgeVariants } diff --git a/client/src/components/ui/breadcrumb.tsx b/client/src/components/ui/breadcrumb.tsx new file mode 100644 index 0000000..60e6c96 --- /dev/null +++ b/client/src/components/ui/breadcrumb.tsx @@ -0,0 +1,115 @@ +import * as React from "react" +import { Slot } from "@radix-ui/react-slot" +import { ChevronRight, MoreHorizontal } from "lucide-react" + +import { cn } from "@/lib/utils" + +const Breadcrumb = React.forwardRef< + HTMLElement, + React.ComponentPropsWithoutRef<"nav"> & { + separator?: React.ReactNode + } +>(({ ...props }, ref) =>