[V0_FILE]typescriptreact:file="app/page.tsx" import { redirect } from "next/navigation" import AdminDashboard from "@/components/admin-dashboard" export default function Home() { // Dans une application réelle, vous vérifieriez l'authentification ici // et redirigeriez vers la page de connexion si nécessaire const isAuthenticated = true if (!isAuthenticated) { redirect("/login") } return } [V0_FILE]typescriptreact:file="components/admin-dashboard.tsx" "use client" import { useState } from "react" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { EmployeeList } from "@/components/employee-list" import { QRCodeGenerator } from "@/components/qr-code-generator" import { AttendanceReport } from "@/components/attendance-report" import { DashboardHeader } from "@/components/dashboard-header" import { DashboardSidebar } from "@/components/dashboard-sidebar" import { employees } from "@/data/employees" export default function AdminDashboard() { const [activeTab, setActiveTab] = useState("employees") const [selectedEmployee, setSelectedEmployee] = useState(null) return (

Employés QR Codes Rapports

Gestion des Employés

Générateur de QR Codes

Rapports de Présence

) } [V0_FILE]typescriptreact:file="components/dashboard-header.tsx" import { Bell, Settings, User } from "lucide-react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu" export function DashboardHeader() { return (

Système de Présence Admin

Notifications Nouvel employé ajouté: Marie Dupont 5 employés absents aujourd'hui Rapport hebdomadaire disponible Paramètres Paramètres du compte Configuration système Gestion des rôles Mon compte Profil Paramètres Déconnexion

) } [V0_FILE]typescriptreact:file="components/dashboard-sidebar.tsx" "use client" import Link from "next/link" import { BarChart3, Users, QrCode, Calendar, Settings, LogOut } from "lucide-react" import { cn } from "@/lib/utils" import { Button } from "@/components/ui/button" interface DashboardSidebarProps { activeTab: string setActiveTab: (tab: string) => void } export function DashboardSidebar({ activeTab, setActiveTab }: DashboardSidebarProps) { return (

QR Présence

) } [V0_FILE]typescriptreact:file="components/employee-list.tsx" "use client" import { useState } from "react" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, } from "@/components/ui/dialog" import { Label } from "@/components/ui/label" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu" import { Edit, MoreVertical, Plus, Trash2, QrCode } from "lucide-react" import type { Employee } from "@/types/employee" import { EmployeeQRCode } from "@/components/employee-qr-code" interface EmployeeListProps { employees: Employee[] onSelectEmployee: (employee: Employee | null) => void selectedEmployee: Employee | null } export function EmployeeList({ employees, onSelectEmployee, selectedEmployee }: EmployeeListProps) { const [searchTerm, setSearchTerm] = useState("") const [showQRCode, setShowQRCode] = useState(false) const filteredEmployees = employees.filter( (employee) => employee.name.toLowerCase().includes(searchTerm.toLowerCase()) || employee.id.toString().includes(searchTerm) || employee.department.toLowerCase().includes(searchTerm.toLowerCase()), ) return (

setSearchTerm(e.target.value)} className="w-[300px]" />

ID Nom Email Département Poste Statut Actions {filteredEmployees.map((employee) => ( {employee.id} {employee.name} {employee.email} {employee.department} {employee.position}

{employee.status}

{ onSelectEmployee(employee) setShowQRCode(true) }} > Voir QR Code Modifier Supprimer ))}

) } [V0_FILE]typescriptreact:file="components/qr-code-generator.tsx" "use client" import { useState } from "react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import type { Employee } from "@/types/employee" import { EmployeeQRCode } from "@/components/employee-qr-code" import { Download, Printer } from "lucide-react" interface QRCodeGeneratorProps { employees: Employee[] } export function QRCodeGenerator({ employees }: QRCodeGeneratorProps) { const [selectedEmployee, setSelectedEmployee] = useState(null) const [selectedDepartment, setSelectedDepartment] = useState("all") const departments = Array.from(new Set(employees.map((e) => e.department))) const filteredEmployees = selectedDepartment === "all" ? employees : employees.filter((e) => e.department === selectedDepartment) return ( QR Code Individuel Génération par Lot Générer un QR Code individuel Sélectionnez un employé pour générer son QR code de présence.

{selectedEmployee && (

{selectedEmployee.name}

{selectedEmployee.department} - {selectedEmployee.position}

)}

Génération par lot Générez des QR codes pour tous les employés d'un département.

{filteredEmployees.map((employee) => ( {employee.name} {employee.department} - {employee.position} ))}

) } [V0_FILE]typescriptreact:file="components/employee-qr-code.tsx" "use client" import { useEffect, useRef } from "react" import QRCode from "qrcode" import type { Employee } from "@/types/employee" interface EmployeeQRCodeProps { employee: Employee size?: number } export function EmployeeQRCode({ employee, size = 200 }: EmployeeQRCodeProps) { const canvasRef = useRef(null) useEffect(() => { if (canvasRef.current) { // Créer un objet avec les données de l'employé const employeeData = { id: employee.id, name: employee.name, timestamp: new Date().toISOString(), } // Convertir en JSON et générer le QR code QRCode.toCanvas(canvasRef.current, JSON.stringify(employeeData), { width: size, margin: 2, color: { dark: "#000000", light: "#ffffff", }, }) } }, [employee, size]) return (

) } [V0_FILE]typescriptreact:file="components/attendance-report.tsx" isFixed="true" isQuickEdit="true" "use client" import { useState } from "react" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Button } from "@/components/ui/button" import { Calendar } from "@/components/ui/calendar" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" import type { Employee } from "@/types/employee" import { FileText, Printer } from "lucide-react" interface AttendanceReportProps { employees: Employee[] } export function AttendanceReport({ employees }: AttendanceReportProps) { const [date, setDate] = useState(new Date()) const [reportType, setReportType] = useState("daily") // Simuler des données de présence const attendanceData = employees.map((employee) => { const randomHour = Math.floor(Math.random() * 2) + 8 const randomMinute = Math.floor(Math.random() * 60) const checkInTime = `0${randomHour}:${randomMinute < 10 ? "0" + randomMinute : randomMinute}` const outHour = Math.floor(Math.random() * 3) + 16 const outMinute = Math.floor(Math.random() * 60) const checkOutTime = `${outHour}:${outMinute < 10 ? "0" + outMinute : outMinute}` const isPresent = Math.random() > 0.2 return { ...employee, checkInTime: isPresent ? checkInTime : "-", checkOutTime: isPresent ? checkOutTime : "-", hoursWorked: isPresent ? (outHour - randomHour + (outMinute - randomMinute) / 60).toFixed(2) : "0", status: isPresent ? "Présent" : "Absent", } }) return ( Rapport Journalier Rapport Hebdomadaire Rapport Mensuel

Total Employés

{employees.length}

Présents

{attendanceData.filter((e) => e.status === "Présent").length}

Absents

{attendanceData.filter((e) => e.status === "Absent").length}

Taux de présence

{Math.round((attendanceData.filter((e) => e.status === "Présent").length / employees.length) * 100)}%

Sélectionner une date Choisissez une date pour voir le rapport de présence

Rapport de présence {date?.toLocaleDateString("fr-FR", { weekday: "long", year: "numeric", month: "long", day: "numeric", })}

Statistiques Aperçu rapide des statistiques de présence

Présents aujourd'hui

{attendanceData.filter((e) => e.status === "Présent").length}

Absents aujourd'hui

{attendanceData.filter((e) => e.status === "Absent").length}

Arrivées tardives

{attendanceData.filter((e) => e.status === "Présent" && e.checkInTime > "09:00").length}

Heures travaillées

{attendanceData.reduce((acc, curr) => acc + Number.parseFloat(curr.hoursWorked), 0).toFixed(2)}

Employé Département Heure d'arrivée Heure de départ Heures travaillées Statut {attendanceData.map((employee) => ( {employee.name} {employee.department} {employee.checkInTime} {employee.checkOutTime} {employee.hoursWorked}

{employee.status}

))}

Rapport Hebdomadaire Vue d'ensemble des présences pour la semaine

Sélectionnez une semaine pour voir le rapport hebdomadaire

Rapport Mensuel Vue d'ensemble des présences pour le mois

Sélectionnez un mois pour voir le rapport mensuel

) } [V0_FILE]typescriptreact:file="data/employees.ts" import type { Employee } from "@/types/employee" export const employees: Employee[] = [ { id: 1, name: "Jean Dupont", email: "jean.dupont@example.com", department: "Développement", position: "Développeur Frontend", status: "Présent", }, { id: 2, name: "Marie Martin", email: "marie.martin@example.com", department: "Design", position: "UI/UX Designer", status: "Présent", }, { id: 3, name: "Pierre Durand", email: "pierre.durand@example.com", department: "Marketing", position: "Responsable Marketing", status: "Absent", }, { id: 4, name: "Sophie Lefebvre", email: "sophie.lefebvre@example.com", department: "Ressources Humaines", position: "Responsable RH", status: "Présent", }, { id: 5, name: "Thomas Bernard", email: "thomas.bernard@example.com", department: "Développement", position: "Développeur Backend", status: "Présent", }, { id: 6, name: "Julie Moreau", email: "julie.moreau@example.com", department: "Finance", position: "Comptable", status: "En retard", }, { id: 7, name: "Nicolas Petit", email: "nicolas.petit@example.com", department: "Support", position: "Agent de support", status: "Présent", }, { id: 8, name: "Camille Robert", email: "camille.robert@example.com", department: "Design", position: "Graphiste", status: "Absent", }, { id: 9, name: "Alexandre Simon", email: "alexandre.simon@example.com", department: "Développement", position: "Développeur Mobile", status: "Présent", }, { id: 10, name: "Émilie Dubois", email: "emilie.dubois@example.com", department: "Marketing", position: "Spécialiste SEO", status: "Présent", }, ] [V0_FILE]typescriptreact:file="types/employee.ts" export interface Employee { id: number name: string email: string department: string position: string status: string } [V0_FILE]json:file="package.json" { "dependencies": { "qrcode": "^1.5.3" } }