[V0_FILE]typescriptreact:file="app/loading.tsx" isFixed="true" isMerged="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/vehicles/add/page.tsx" isMerged="true" "use client" import { useState } from "react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { ArrowLeft, Bus, Upload, Save } from "lucide-react" import Link from "next/link" import { useRouter } from "next/navigation" export default function AddVehicle() { const router = useRouter() const [vehicleData, setVehicleData] = useState({ immatriculation: "", dossier: "", autorisation: "", autorisationExceptionnelle: "", gerant: "", destination: "", horaire: "", nombrePlaces: 0, photo: "", documents: { carteGrise: { expiration: "", file: null }, assurance: { expiration: "", file: null }, controleTechnique: { expiration: "", file: null }, visiteTechnique: { expiration: "", file: null }, permisConduire: { expiration: "", numeroPermis: "", file: null }, visiteMedicale: { expiration: "", file: null }, }, }) const [isSaving, setIsSaving] = useState(false) const handleSave = async () => { setIsSaving(true) // Simulation de sauvegarde await new Promise((resolve) => setTimeout(resolve, 2000)) // Redirection vers la liste des véhicules router.push("/") setIsSaving(false) } return (

{/* Header */}

Ajouter un Autocar

Enregistrer un nouveau véhicule

{/* Informations Générales */} Informations Générales Renseignez les informations de base du véhicule

Immatriculation * setVehicleData((prev) => ({ ...prev, immatriculation: e.target.value, })) } required />

Dossier * setVehicleData((prev) => ({ ...prev, dossier: e.target.value, })) } required />

Autorisation * setVehicleData((prev) => ({ ...prev, autorisation: e.target.value, })) } required />

Autorisation Exceptionnelle setVehicleData((prev) => ({ ...prev, autorisationExceptionnelle: e.target.value, })) } />

Gérant de société * setVehicleData((prev) => ({ ...prev, gerant: e.target.value, })) } required />

Destination * setVehicleData((prev) => ({ ...prev, destination: e.target.value, })) } required />

Horaire setVehicleData((prev) => ({ ...prev, horaire: e.target.value, })) } />

Nombre de places * setVehicleData((prev) => ({ ...prev, nombrePlaces: Number.parseInt(e.target.value) || 0, })) } required />

{/* Documents */} Documents Administratifs Renseignez les dates d'expiration des documents

Carte Grise - Date d'expiration setVehicleData((prev) => ({ ...prev, documents: { ...prev.documents, carteGrise: { ...prev.documents.carteGrise, expiration: e.target.value }, }, })) } />

Assurance - Date d'expiration setVehicleData((prev) => ({ ...prev, documents: { ...prev.documents, assurance: { ...prev.documents.assurance, expiration: e.target.value }, }, })) } />

Contrôle Technique - Date d'expiration setVehicleData((prev) => ({ ...prev, documents: { ...prev.documents, controleTechnique: { ...prev.documents.controleTechnique, expiration: e.target.value }, }, })) } />

Visite Technique - Date d'expiration setVehicleData((prev) => ({ ...prev, documents: { ...prev.documents, visiteTechnique: { ...prev.documents.visiteTechnique, expiration: e.target.value }, }, })) } />

Numéro de Permis setVehicleData((prev) => ({ ...prev, documents: { ...prev.documents, permisConduire: { ...prev.documents.permisConduire, numeroPermis: e.target.value }, }, })) } />

Permis de Conduire - Date d'expiration setVehicleData((prev) => ({ ...prev, documents: { ...prev.documents, permisConduire: { ...prev.documents.permisConduire, expiration: e.target.value }, }, })) } />

Visite Médicale - Date d'expiration setVehicleData((prev) => ({ ...prev, documents: { ...prev.documents, visiteMedicale: { ...prev.documents.visiteMedicale, expiration: e.target.value }, }, })) } />

{/* Photo du véhicule */}

Photo du Véhicule Ajoutez une photo du véhicule

Cliquez pour ajouter une photo

PNG, JPG jusqu'à 10MB

Informations

Statut: Nouveau véhicule

Créé le: {new Date().toLocaleDateString("fr-FR")}

Prochain contrôle: À programmer

) } [V0_FILE]jpg:file="public/images/control-form.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/46353068-b3c7-487e-b6cc-7fc989afb4fe.jpg-obxgD7jkNOc5Pwx3YxIeGK5Ir2gtWf.jpeg" isMerged="true" [V0_FILE]typescriptreact:file="app/dossiers/nouveau/page.tsx" isMerged="true" "use client" import { useState } from "react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Textarea } from "@/components/ui/textarea" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { ArrowLeft, FolderPlus, Save, Calendar } from "lucide-react" import Link from "next/link" import { useRouter } from "next/navigation" export default function NouveauDossier() { const router = useRouter() const [dossierData, setDossierData] = useState({ numeroDossier: "", dateCreation: new Date().toISOString().slice(0, 10), typeTransport: "", societeTransport: "", responsable: "", telephone: "", email: "", adresse: "", nombreVehicules: 0, lignesDesservies: "", observations: "", statut: "en-cours", }) const [isSaving, setIsSaving] = useState(false) const generateNumeroDossier = () => { const year = new Date().getFullYear() const month = String(new Date().getMonth() + 1).padStart(2, "0") const random = Math.floor(Math.random() * 1000) .toString() .padStart(3, "0") return `DOS-${year}-${month}-${random}` } const handleSave = async () => { setIsSaving(true) // Générer un numéro de dossier si pas encore fait if (!dossierData.numeroDossier) { setDossierData((prev) => ({ ...prev, numeroDossier: generateNumeroDossier(), })) } // Simulation de sauvegarde await new Promise((resolve) => setTimeout(resolve, 2000)) // Redirection vers la liste des dossiers router.push("/dossiers") setIsSaving(false) } return (

{/* Header */}

Nouveau Dossier

Créer un nouveau dossier de transport

{/* Informations Générales */} Informations Générales du Dossier Renseignez les informations de base du nouveau dossier

Numéro de Dossier setDossierData((prev) => ({ ...prev, numeroDossier: e.target.value, })) } />

Date de Création setDossierData((prev) => ({ ...prev, dateCreation: e.target.value, })) } />

Type de Transport

Statut

{/* Informations Société */} Informations de la Société de Transport Détails de la société ou du gérant

Nom de la Société / Gérant * setDossierData((prev) => ({ ...prev, societeTransport: e.target.value, })) } required />

Responsable / Contact setDossierData((prev) => ({ ...prev, responsable: e.target.value, })) } />

Téléphone setDossierData((prev) => ({ ...prev, telephone: e.target.value, })) } />

Email setDossierData((prev) => ({ ...prev, email: e.target.value, })) } />

Nombre de Véhicules setDossierData((prev) => ({ ...prev, nombreVehicules: Number.parseInt(e.target.value) || 0, })) } />

Adresse

setDossierData((prev) => ({
                          ...prev,
                          adresse: e.target.value,
                        }))
                      }
                      rows={2}
                    />
                  </div>
                </div>
              </CardContent>
            </Card>

{/* Lignes et Observations */}
            <Card>
              <CardHeader>
                <CardTitle>Lignes Desservies et Observations</CardTitle>
              </CardHeader>
              <CardContent className="space-y-4">
                <div>
                  <Label htmlFor="lignesDesservies">Lignes Desservies</Label>
                  <Textarea
                    id="lignesDesservies"
                    placeholder="Casablanca - Rabat, Casablanca - Marrakech, etc."
                    value={dossierData.lignesDesservies}
                    onChange={(e) =>
                      setDossierData((prev) => ({
                        ...prev,
                        lignesDesservies: e.target.value,
                      }))
                    }
                    rows={3}
                  />
                </div>
                <div>
                  <Label htmlFor="observations">Observations</Label>
                  <Textarea
                    id="observations"
                    placeholder="Remarques particulières, conditions spéciales, etc."
                    value={dossierData.observations}
                    onChange={(e) =>
                      setDossierData((prev) => ({
                        ...prev,
                        observations: e.target.value,
                      }))
                    }
                    rows={4}
                  />
                </div>
              </CardContent>
            </Card>
          </div>

{/* Sidebar */}
          <div className="space-y-6">
            <Card>
              <CardHeader>
                <CardTitle>Résumé du Dossier</CardTitle>
              </CardHeader>
              <CardContent className="space-y-3">
                <div className="flex justify-between text-sm">
                  <span className="text-gray-600">Numéro:</span>
                  <span className="font-medium">{dossierData.numeroDossier || "À générer"}</span>
                </div>
                <div className="flex justify-between text-sm">
                  <span className="text-gray-600">Date:</span>
                  <span className="font-medium">{new Date(dossierData.dateCreation).toLocaleDateString("fr-FR")}</span>
                </div>
                <div className="flex justify-between text-sm">
                  <span className="text-gray-600">Type:</span>
                  <span className="font-medium">{dossierData.typeTransport || "Non défini"}</span>
                </div>
                <div className="flex justify-between text-sm">
                  <span className="text-gray-600">Société:</span>
                  <span className="font-medium">{dossierData.societeTransport || "Non renseigné"}</span>
                </div>
                <div className="flex justify-between text-sm">
                  <span className="text-gray-600">Véhicules:</span>
                  <span className="font-medium">{dossierData.nombreVehicules}</span>
                </div>
              </CardContent>
            </Card>

<Card>
              <CardHeader>
                <CardTitle>Prochaines Étapes</CardTitle>
              </CardHeader>
              <CardContent className="space-y-3">
                <div className="flex items-center space-x-2 text-sm">
                  <Calendar className="w-4 h-4 text-blue-600" />
                  <span>Ajouter les véhicules au dossier</span>
                </div>
                <div className="flex items-center space-x-2 text-sm">
                  <Calendar className="w-4 h-4 text-blue-600" />
                  <span>Programmer les contrôles techniques</span>
                </div>
                <div className="flex items-center space-x-2 text-sm">
                  <Calendar className="w-4 h-4 text-blue-600" />
                  <span>Valider les documents administratifs</span>
                </div>
              </CardContent>
            </Card>

<Card>
              <CardHeader>
                <CardTitle>Actions Rapides</CardTitle>
              </CardHeader>
              <CardContent className="space-y-2">
                <Button variant="outline" className="w-full justify-start" disabled>
                  Ajouter un véhicule
                </Button>
                <Button variant="outline" className="w-full justify-start" disabled>
                  Programmer un contrôle
                </Button>
                <Button variant="outline" className="w-full justify-start" disabled>
                  Générer un rapport
                </Button>
                <p className="text-xs text-gray-500 mt-2">
                  Ces actions seront disponibles après la création du dossier.
                </p>
              </CardContent>
            </Card>
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/dossiers/page.tsx" isMerged="true"
"use client"

interface Dossier {
  id: string
  numeroDossier: string
  dateCreation: string
  typeTransport: string
  societeTransport: string
  responsable: string
  telephone: string
  nombreVehicules: number
  lignesDesservies: string
  statut: "en-cours" | "valide" | "suspendu" | "expire"
}

export default function ListeDossiers() {
  const [dossiers, setDossiers] = useState<Dossier[]>([])
  const [searchTerm, setSearchTerm] = useState("")
  const [filterStatut, setFilterStatut] = useState("all")

useEffect(() => {
    // Données simulées
    const mockDossiers: Dossier[] = [
      {
        id: "1",
        numeroDossier: "DOS-2024-001",
        dateCreation: "2024-01-15",
        typeTransport: "interurbain",
        societeTransport: "Transport Maghreb SARL",
        responsable: "Ahmed Benali",
        telephone: "+212 6 12 34 56 78",
        nombreVehicules: 3,
        lignesDesservies: "Casablanca - Rabat",
        statut: "valide",
      },
      {
        id: "2",
        numeroDossier: "DOS-2024-002",
        dateCreation: "2024-02-20",
        typeTransport: "urbain",
        societeTransport: "Atlas Transport",
        responsable: "Fatima Zahra",
        telephone: "+212 6 98 76 54 32",
        nombreVehicules: 5,
        lignesDesservies: "Marrakech - Agadir",
        statut: "en-cours",
      },
      {
        id: "3",
        numeroDossier: "DOS-2024-003",
        dateCreation: "2024-03-10",
        typeTransport: "touristique",
        societeTransport: "Sahara Lines",
        responsable: "Omar Alami",
        telephone: "+212 6 11 22 33 44",
        nombreVehicules: 2,
        lignesDesservies: "Fès - Meknès",
        statut: "suspendu",
      },
    ]
    setDossiers(mockDossiers)
  }, [])

const filteredDossiers = dossiers.filter((dossier) => {
    const matchesSearch =
      dossier.numeroDossier.toLowerCase().includes(searchTerm.toLowerCase()) ||
      dossier.societeTransport.toLowerCase().includes(searchTerm.toLowerCase()) ||
      dossier.responsable.toLowerCase().includes(searchTerm.toLowerCase())
    const matchesStatut = filterStatut === "all" || dossier.statut === filterStatut

return matchesSearch && matchesStatut
  })

const getStatutBadge = (statut: string) => {
    switch (statut) {
      case "valide":
        return <Badge className="bg-green-100 text-green-800">Validé</Badge>
      case "en-cours":
        return <Badge className="bg-blue-100 text-blue-800">En Cours</Badge>
      case "suspendu":
        return <Badge className="bg-orange-100 text-orange-800">Suspendu</Badge>
      case "expire":
        return <Badge className="bg-red-100 text-red-800">Expiré</Badge>
      default:
        return <Badge variant="secondary">Inconnu</Badge>
    }
  }

<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        {/* Search and Filters */}
        <Card className="mb-8">
          <CardHeader>
            <CardTitle>Recherche et Filtres</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
              <div className="relative">
                <Search className="absolute left-3 top-3 h-4 w-4 text-gray-400" />
                <Input
                  placeholder="Rechercher par numéro, société, responsable..."
                  value={searchTerm}
                  onChange={(e) => setSearchTerm(e.target.value)}
                  className="pl-10"
                />
              </div>
              <Select value={filterStatut} onValueChange={setFilterStatut}>
                <SelectTrigger>
                  <SelectValue placeholder="Filtrer par statut" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="all">Tous les statuts</SelectItem>
                  <SelectItem value="valide">Validé</SelectItem>
                  <SelectItem value="en-cours">En Cours</SelectItem>
                  <SelectItem value="suspendu">Suspendu</SelectItem>
                  <SelectItem value="expire">Expiré</SelectItem>
                </SelectContent>
              </Select>
              <Button
                variant="outline"
                onClick={() => {
                  setSearchTerm("")
                  setFilterStatut("all")
                }}
              >
                Réinitialiser
              </Button>
            </div>
          </CardContent>
        </Card>

{/* Dossiers List */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          {filteredDossiers.map((dossier) => (
            <Card key={dossier.id} className="hover:shadow-lg transition-shadow">
              <CardHeader className="pb-3">
                <div className="flex items-center justify-between">
                  <CardTitle className="text-lg">{dossier.numeroDossier}</CardTitle>
                  {getStatutBadge(dossier.statut)}
                </div>
                <CardDescription>{dossier.societeTransport}</CardDescription>
              </CardHeader>
              <CardContent className="space-y-4">
                <div className="space-y-2">
                  <div className="flex justify-between text-sm">
                    <span className="text-gray-600">Type:</span>
                    <span className="font-medium capitalize">{dossier.typeTransport}</span>
                  </div>
                  <div className="flex justify-between text-sm">
                    <span className="text-gray-600">Responsable:</span>
                    <span className="font-medium">{dossier.responsable}</span>
                  </div>
                  <div className="flex justify-between text-sm">
                    <span className="text-gray-600">Véhicules:</span>
                    <span className="font-medium">{dossier.nombreVehicules}</span>
                  </div>
                  <div className="flex justify-between text-sm">
                    <span className="text-gray-600">Créé le:</span>
                    <span className="font-medium">{new Date(dossier.dateCreation).toLocaleDateString("fr-FR")}</span>
                  </div>
                </div>

<div>
                  <p className="text-sm text-gray-600 mb-1">Lignes desservies:</p>
                  <p className="text-sm font-medium">{dossier.lignesDesservies}</p>
                </div>

<div className="flex items-center space-x-2 text-sm text-gray-600">
                  <Phone className="w-3 h-3" />
                  <span>{dossier.telephone}</span>
                </div>

<div className="flex space-x-2 pt-2">
                  <Link href={`/dossiers/${dossier.id}`} className="flex-1">
                    <Button variant="outline" size="sm" className="w-full">
                      Détails
                    </Button>
                  </Link>
                  <Link href={`/dossiers/${dossier.id}/vehicules`} className="flex-1">
                    <Button size="sm" className="w-full bg-blue-600 hover:bg-blue-700">
                      Véhicules
                    </Button>
                  </Link>
                </div>
              </CardContent>
            </Card>
          ))}
        </div>

{filteredDossiers.length === 0 && (
          <Card className="text-center py-12">
            <CardContent>
              <FolderOpen className="w-12 h-12 text-gray-400 mx-auto mb-4" />
              <h3 className="text-lg font-medium text-gray-900 mb-2">Aucun dossier trouvé</h3>
              <p className="text-gray-500 mb-4">
                {searchTerm || filterStatut !== "all"
                  ? "Aucun dossier ne correspond à vos critères de recherche."
                  : "Commencez par créer votre premier dossier de transport."}
              </p>
              <Link href="/dossiers/nouveau">
                <Button className="bg-green-600 hover:bg-green-700">
                  <Plus className="w-4 h-4 mr-2" />
                  Créer un Nouveau Dossier
                </Button>
              </Link>
            </CardContent>
          </Card>
        )}
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/dossiers/loading.tsx" isFixed="true" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/vehicles/[id]/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { useParams } from "next/navigation"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Badge } from "@/components/ui/badge"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { ArrowLeft, Bus, Edit, FileText, Calendar, AlertTriangle, CheckCircle, Upload } from "lucide-react"
import Link from "next/link"

interface VehicleDetails {
  id: string
  immatriculation: string
  dossier: string
  autorisation: string
  autorisationExceptionnelle?: string
  gerant: string
  destination: string
  horaire: string
  photo: string
  documents: {
    carteGrise: { expiration: string; status: "valid" | "warning" | "expired"; file?: string }
    assurance: { expiration: string; status: "valid" | "warning" | "expired"; file?: string }
    controleTechnique: { expiration: string; status: "valid" | "warning" | "expired"; file?: string }
    visiteTechnique: { expiration: string; status: "valid" | "warning" | "expired"; file?: string }
    permisConduire: { expiration: string; status: "valid" | "warning" | "expired"; numeroPermis: string; file?: string }
    visiteMedicale: { expiration: string; status: "valid" | "warning" | "expired"; file?: string }
  }
  nombrePlaces: number
  lastControl: string
  nextControl: string
  status: "conforme" | "non-conforme" | "a-controler"
  controlHistory: Array<{
    date: string
    agent: string
    status: "conforme" | "non-conforme"
    observations: string
    pdfUrl: string
  }>
}

export default function VehicleDetails() {
  const params = useParams()
  const [vehicle, setVehicle] = useState<VehicleDetails | null>(null)
  const [isEditing, setIsEditing] = useState(false)
  const [editedVehicle, setEditedVehicle] = useState<VehicleDetails | null>(null)

useEffect(() => {
    // Simulation de chargement des données
    const mockVehicle: VehicleDetails = {
      id: params.id as string,
      immatriculation: "123456-A-12",
      dossier: "DOS-2024-001",
      autorisation: "AUT-001",
      autorisationExceptionnelle: "AUT-EXC-001",
      gerant: "Transport Maghreb SARL",
      destination: "Casablanca - Rabat",
      horaire: "08:00 - 18:00",
      photo: "/placeholder.svg?height=300&width=400",
      documents: {
        carteGrise: { expiration: "2025-06-15", status: "valid", file: "carte-grise.pdf" },
        assurance: { expiration: "2024-12-31", status: "warning", file: "assurance.pdf" },
        controleTechnique: { expiration: "2024-08-20", status: "expired", file: "controle-technique.pdf" },
        visiteTechnique: { expiration: "2025-03-10", status: "valid", file: "visite-technique.pdf" },
        permisConduire: { expiration: "2026-01-15", status: "valid", numeroPermis: "PC123456789", file: "permis.pdf" },
        visiteMedicale: { expiration: "2024-07-30", status: "expired", file: "visite-medicale.pdf" },
      },
      nombrePlaces: 45,
      lastControl: "2024-01-15",
      nextControl: "2024-07-15",
      status: "non-conforme",
      controlHistory: [
        {
          date: "2024-01-15",
          agent: "Ahmed Benali",
          status: "non-conforme",
          observations: "Contrôle technique expiré, visite médicale à renouveler",
          pdfUrl: "/controle-2024-01-15.pdf",
        },
        {
          date: "2023-07-20",
          agent: "Fatima Zahra",
          status: "conforme",
          observations: "Tous les documents en règle",
          pdfUrl: "/controle-2023-07-20.pdf",
        },
      ],
    }
    setVehicle(mockVehicle)
    setEditedVehicle(mockVehicle)
  }, [params.id])

const getStatusBadge = (status: string) => {
    switch (status) {
      case "valid":
        return (
          <Badge className="bg-green-100 text-green-800">
            <CheckCircle className="w-3 h-3 mr-1" />
            Valide
          </Badge>
        )
      case "warning":
        return (
          <Badge className="bg-orange-100 text-orange-800">
            <AlertTriangle className="w-3 h-3 mr-1" />
            Expire bientôt
          </Badge>
        )
      case "expired":
        return (
          <Badge className="bg-red-100 text-red-800">
            <AlertTriangle className="w-3 h-3 mr-1" />
            Expiré
          </Badge>
        )
      default:
        return <Badge variant="secondary">Inconnu</Badge>
    }
  }

const getVehicleStatusBadge = (status: string) => {
    switch (status) {
      case "conforme":
        return (
          <Badge className="bg-green-100 text-green-800">
            <CheckCircle className="w-4 h-4 mr-1" />
            Conforme
          </Badge>
        )
      case "non-conforme":
        return (
          <Badge className="bg-red-100 text-red-800">
            <AlertTriangle className="w-4 h-4 mr-1" />
            Non Conforme
          </Badge>
        )
      case "a-controler":
        return (
          <Badge className="bg-orange-100 text-orange-800">
            <Calendar className="w-4 h-4 mr-1" />À Contrôler
          </Badge>
        )
      default:
        return <Badge variant="secondary">Inconnu</Badge>
    }
  }

const handleSave = () => {
    if (editedVehicle) {
      setVehicle(editedVehicle)
      setIsEditing(false)
      // Ici, vous enverriez les données à votre API
    }
  }

const handleDocumentDateChange = (docType: keyof VehicleDetails["documents"], newDate: string) => {
    if (!editedVehicle) return

const today = new Date()
    const expirationDate = new Date(newDate)
    const daysUntilExpiration = Math.ceil((expirationDate.getTime() - today.getTime()) / (1000 * 60 * 60 * 24))

let status: "valid" | "warning" | "expired" = "valid"
    if (daysUntilExpiration < 0) {
      status = "expired"
    } else if (daysUntilExpiration <= 30) {
      status = "warning"
    }

setEditedVehicle({
      ...editedVehicle,
      documents: {
        ...editedVehicle.documents,
        [docType]: {
          ...editedVehicle.documents[docType],
          expiration: newDate,
          status,
        },
      },
    })
  }

if (!vehicle) {
    return <div className="flex items-center justify-center min-h-screen">Chargement...</div>
  }

return (
    <div className="min-h-screen bg-gray-50">
      {/* Header */}
      <header className="bg-white shadow-sm border-b">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex items-center justify-between py-4">
            <div className="flex items-center space-x-4">
              <Link href="/">
                <Button variant="ghost" size="sm">
                  <ArrowLeft className="w-4 h-4 mr-2" />
                  Retour
                </Button>
              </Link>
              <div className="flex items-center space-x-3">
                <Bus className="w-6 h-6 text-blue-600" />
                <div>
                  <h1 className="text-xl font-bold text-gray-900">{vehicle.immatriculation}</h1>
                  <p className="text-sm text-gray-500">{vehicle.gerant}</p>
                </div>
              </div>
            </div>
            <div className="flex items-center space-x-2">
              {getVehicleStatusBadge(vehicle.status)}
              {isEditing ? (
                <div className="flex space-x-2">
                  <Button variant="outline" onClick={() => setIsEditing(false)}>
                    Annuler
                  </Button>
                  <Button onClick={handleSave} className="bg-green-600 hover:bg-green-700">
                    Sauvegarder
                  </Button>
                </div>
              ) : (
                <Button onClick={() => setIsEditing(true)} variant="outline">
                  <Edit className="w-4 h-4 mr-2" />
                  Modifier
                </Button>
              )}
              <div className="flex space-x-2 pt-2">
                <Button variant="outline" size="sm" className="flex-1" onClick={() => window.location.reload()}>
                  Actualiser
                </Button>
                <Link href={`/inspection/${vehicle.id}`} className="flex-1">
                  <Button size="sm" className="w-full bg-blue-600 hover:bg-blue-700">
                    Nouveau Contrôle
                  </Button>
                </Link>
              </div>
            </div>
          </div>
        </div>
      </header>

<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        <Tabs defaultValue="info" className="space-y-6">
          <TabsList>
            <TabsTrigger value="info">Informations</TabsTrigger>
            <TabsTrigger value="documents">Documents</TabsTrigger>
            <TabsTrigger value="history">Historique</TabsTrigger>
          </TabsList>

<TabsContent value="info">
            <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
              <div className="lg:col-span-2 space-y-6">
                <Card>
                  <CardHeader>
                    <CardTitle>Informations Générales</CardTitle>
                  </CardHeader>
                  <CardContent className="space-y-4">
                    <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                      <div>
                        <Label htmlFor="immatriculation">Immatriculation</Label>
                        <Input
                          id="immatriculation"
                          value={isEditing ? editedVehicle?.immatriculation : vehicle.immatriculation}
                          onChange={(e) =>
                            isEditing &&
                            editedVehicle &&
                            setEditedVehicle({
                              ...editedVehicle,
                              immatriculation: e.target.value,
                            })
                          }
                          disabled={!isEditing}
                        />
                      </div>
                      <div>
                        <Label htmlFor="dossier">Dossier</Label>
                        <Input
                          id="dossier"
                          value={isEditing ? editedVehicle?.dossier : vehicle.dossier}
                          onChange={(e) =>
                            isEditing &&
                            editedVehicle &&
                            setEditedVehicle({
                              ...editedVehicle,
                              dossier: e.target.value,
                            })
                          }
                          disabled={!isEditing}
                        />
                      </div>
                      <div>
                        <Label htmlFor="autorisation">Autorisation</Label>
                        <Input
                          id="autorisation"
                          value={isEditing ? editedVehicle?.autorisation : vehicle.autorisation}
                          onChange={(e) =>
                            isEditing &&
                            editedVehicle &&
                            setEditedVehicle({
                              ...editedVehicle,
                              autorisation: e.target.value,
                            })
                          }
                          disabled={!isEditing}
                        />
                      </div>
                      <div>
                        <Label htmlFor="autorisationExceptionnelle">Autorisation Exceptionnelle (optionnel)</Label>
                        <Input
                          id="autorisationExceptionnelle"
                          value={
                            isEditing ? editedVehicle?.autorisationExceptionnelle : vehicle.autorisationExceptionnelle
                          }
                          onChange={(e) =>
                            isEditing &&
                            editedVehicle &&
                            setEditedVehicle({
                              ...editedVehicle,
                              autorisationExceptionnelle: e.target.value,
                            })
                          }
                          disabled={!isEditing}
                        />
                      </div>
                      <div>
                        <Label htmlFor="gerant">Gérant de société</Label>
                        <Input
                          id="gerant"
                          value={isEditing ? editedVehicle?.gerant : vehicle.gerant}
                          onChange={(e) =>
                            isEditing &&
                            editedVehicle &&
                            setEditedVehicle({
                              ...editedVehicle,
                              gerant: e.target.value,
                            })
                          }
                          disabled={!isEditing}
                        />
                      </div>
                      <div>
                        <Label htmlFor="destination">Destination</Label>
                        <Input
                          id="destination"
                          value={isEditing ? editedVehicle?.destination : vehicle.destination}
                          onChange={(e) =>
                            isEditing &&
                            editedVehicle &&
                            setEditedVehicle({
                              ...editedVehicle,
                              destination: e.target.value,
                            })
                          }
                          disabled={!isEditing}
                        />
                      </div>
                      <div>
                        <Label htmlFor="horaire">Horaire</Label>
                        <Input
                          id="horaire"
                          value={isEditing ? editedVehicle?.horaire : vehicle.horaire}
                          onChange={(e) =>
                            isEditing &&
                            editedVehicle &&
                            setEditedVehicle({
                              ...editedVehicle,
                              horaire: e.target.value,
                            })
                          }
                          disabled={!isEditing}
                        />
                      </div>
                      <div>
                        <Label htmlFor="nombrePlaces">Nombre de places</Label>
                        <Input
                          id="nombrePlaces"
                          type="number"
                          value={isEditing ? editedVehicle?.nombrePlaces : vehicle.nombrePlaces}
                          onChange={(e) =>
                            isEditing &&
                            editedVehicle &&
                            setEditedVehicle({
                              ...editedVehicle,
                              nombrePlaces: Number.parseInt(e.target.value),
                            })
                          }
                          disabled={!isEditing}
                        />
                      </div>
                    </div>
                  </CardContent>
                </Card>
              </div>

<div>
                <Card>
                  <CardHeader>
                    <CardTitle>Photo du Véhicule</CardTitle>
                  </CardHeader>
                  <CardContent>
                    <img
                      src={vehicle.photo || "/placeholder.svg"}
                      alt={`Autocar ${vehicle.immatriculation}`}
                      className="w-full h-48 object-cover rounded-lg mb-4"
                    />
                    {isEditing && (
                      <Button variant="outline" className="w-full">
                        <Upload className="w-4 h-4 mr-2" />
                        Changer la photo
                      </Button>
                    )}
                  </CardContent>
                </Card>
              </div>
            </div>
          </TabsContent>

<TabsContent value="documents">
            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              {Object.entries(vehicle.documents).map(([docType, doc]) => (
                <Card key={docType}>
                  <CardHeader>
                    <div className="flex items-center justify-between">
                      <CardTitle className="text-lg">
                        {docType === "carteGrise"
                          ? "Carte Grise"
                          : docType === "assurance"
                            ? "Assurance"
                            : docType === "controleTechnique"
                              ? "Contrôle Technique"
                              : docType === "visiteTechnique"
                                ? "Visite Technique"
                                : docType === "permisConduire"
                                  ? "Permis de Conduire"
                                  : "Visite Médicale"}
                      </CardTitle>
                      {getStatusBadge(doc.status)}
                    </div>
                  </CardHeader>
                  <CardContent className="space-y-4">
                    <div>
                      <Label htmlFor={`${docType}-expiration`}>Date d'expiration</Label>
                      <Input
                        id={`${docType}-expiration`}
                        type="date"
                        value={
                          isEditing
                            ? editedVehicle?.documents[docType as keyof VehicleDetails["documents"]].expiration
                            : doc.expiration
                        }
                        onChange={(e) =>
                          isEditing &&
                          handleDocumentDateChange(docType as keyof VehicleDetails["documents"], e.target.value)
                        }
                        disabled={!isEditing}
                      />
                    </div>

{docType === "permisConduire" && (
                      <div>
                        <Label htmlFor="numeroPermis">Numéro de permis</Label>
                        <Input
                          id="numeroPermis"
                          value={
                            isEditing
                              ? editedVehicle?.documents.permisConduire.numeroPermis
                              : vehicle.documents.permisConduire.numeroPermis
                          }
                          onChange={(e) =>
                            isEditing &&
                            editedVehicle &&
                            setEditedVehicle({
                              ...editedVehicle,
                              documents: {
                                ...editedVehicle.documents,
                                permisConduire: {
                                  ...editedVehicle.documents.permisConduire,
                                  numeroPermis: e.target.value,
                                },
                              },
                            })
                          }
                          disabled={!isEditing}
                        />
                      </div>
                    )}

<div className="flex space-x-2">
                      {doc.file && (
                        <Button variant="outline" size="sm" className="flex-1">
                          <FileText className="w-4 h-4 mr-2" />
                          Voir le document
                        </Button>
                      )}
                      {isEditing && (
                        <Button variant="outline" size="sm" className="flex-1">
                          <Upload className="w-4 h-4 mr-2" />
                          {doc.file ? "Remplacer" : "Ajouter"}
                        </Button>
                      )}
                    </div>
                  </CardContent>
                </Card>
              ))}
            </div>
          </TabsContent>

<TabsContent value="history">
            <Card>
              <CardHeader>
                <CardTitle>Historique des Contrôles</CardTitle>
                <CardDescription>Historique complet des contrôles effectués sur ce véhicule</CardDescription>
              </CardHeader>
              <CardContent>
                <div className="space-y-4">
                  {vehicle.controlHistory.map((control, index) => (
                    <div key={index} className="border rounded-lg p-4">
                      <div className="flex items-center justify-between mb-2">
                        <div className="flex items-center space-x-3">
                          <div className="text-sm font-medium">
                            {new Date(control.date).toLocaleDateString("fr-FR")}
                          </div>
                          <Badge
                            className={
                              control.status === "conforme" ? "bg-green-100 text-green-800" : "bg-red-100 text-red-800"
                            }
                          >
                            {control.status === "conforme" ? "Conforme" : "Non Conforme"}
                          </Badge>
                        </div>
                        <Button variant="outline" size="sm">
                          <FileText className="w-4 h-4 mr-2" />
                          Télécharger PDF
                        </Button>
                      </div>
                      <div className="text-sm text-gray-600 mb-1">Agent: {control.agent}</div>
                      <div className="text-sm text-gray-700">{control.observations}</div>
                    </div>
                  ))}
                </div>
              </CardContent>
            </Card>
          </TabsContent>
        </Tabs>
      </div>
    </div>
  )
}
[V0_FILE]sql:file="scripts/01-create-tables.sql" isMerged="true"
-- Création des tables pour la gestion des autocars

-- Table des utilisateurs/agents
CREATE TABLE IF NOT EXISTS users (
    id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
    email VARCHAR(255) UNIQUE NOT NULL,
    nom VARCHAR(100) NOT NULL,
    prenom VARCHAR(100) NOT NULL,
    role VARCHAR(20) DEFAULT 'agent' CHECK (role IN ('admin', 'agent')),
    telephone VARCHAR(20),
    created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
    updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

-- Table des dossiers de transport
CREATE TABLE IF NOT EXISTS dossiers (
    id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
    numero_dossier VARCHAR(50) UNIQUE NOT NULL,
    date_creation DATE NOT NULL DEFAULT CURRENT_DATE,
    type_transport VARCHAR(20) NOT NULL CHECK (type_transport IN ('urbain', 'interurbain', 'international', 'touristique')),
    societe_transport VARCHAR(200) NOT NULL,
    responsable VARCHAR(100),
    telephone VARCHAR(20),
    email VARCHAR(100),
    adresse TEXT,
    nombre_vehicules INTEGER DEFAULT 0,
    lignes_desservies TEXT,
    observations TEXT,
    statut VARCHAR(20) DEFAULT 'en-cours' CHECK (statut IN ('en-cours', 'valide', 'suspendu', 'expire')),
    created_by UUID REFERENCES users(id),
    created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
    updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

-- Table des véhicules (autocars)
CREATE TABLE IF NOT EXISTS vehicules (
    id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
    immatriculation VARCHAR(20) UNIQUE NOT NULL,
    numero_serie VARCHAR(50),
    dossier_id UUID REFERENCES dossiers(id),
    numero_autorisation VARCHAR(50),
    autorisation_exceptionnelle VARCHAR(50),
    gerant_autorisation VARCHAR(200),
    ligne_autorisee VARCHAR(200),
    destination VARCHAR(200),
    horaire VARCHAR(50),
    gerant_societe VARCHAR(200),
    nombre_places INTEGER NOT NULL,
    photo_url TEXT,
    statut VARCHAR(20) DEFAULT 'a-controler' CHECK (statut IN ('conforme', 'non-conforme', 'a-controler')),
    date_dernier_controle DATE,
    date_prochain_controle DATE,
    created_by UUID REFERENCES users(id),
    created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
    updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

-- Table des documents
CREATE TABLE IF NOT EXISTS documents (
    id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
    vehicule_id UUID REFERENCES vehicules(id) ON DELETE CASCADE,
    type_document VARCHAR(50) NOT NULL CHECK (type_document IN (
        'carte_grise', 'assurance', 'controle_technique', 'visite_technique', 
        'permis_conduire', 'visite_medicale', 'carte_autorisation', 
        'carte_itineraire', 'autorisation_exceptionnelle', 'carnet_metrologique'
    )),
    numero_document VARCHAR(100),
    date_expiration DATE,
    statut VARCHAR(20) DEFAULT 'valid' CHECK (statut IN ('valid', 'warning', 'expired')),
    fichier_url TEXT,
    observations TEXT,
    created_by UUID REFERENCES users(id),
    created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
    updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
    UNIQUE(vehicule_id, type_document)
);

-- Table des contrôles techniques
CREATE TABLE IF NOT EXISTS controles (
    id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
    vehicule_id UUID REFERENCES vehicules(id) ON DELETE CASCADE,
    agent_id UUID REFERENCES users(id),
    date_controle TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
    statut VARCHAR(20) NOT NULL CHECK (statut IN ('conforme', 'non-conforme')),
    
    -- Informations véhicule au moment du contrôle
    nombre_sieges_installes INTEGER,
    nombre_voyageurs INTEGER,
    proprete VARCHAR(20) CHECK (proprete IN ('propre', 'non-propre')),
    etat_sieges VARCHAR(20) CHECK (etat_sieges IN ('bon', 'moyen', 'deteriore')),
    
    -- Contrôle mécanique
    pneus_avant_references VARCHAR(100),
    pneus_avant_profondeur VARCHAR(20),
    chronotachygraphe_disponible BOOLEAN DEFAULT FALSE,
    chronotachygraphe_fonctionnel BOOLEAN DEFAULT FALSE,
    chronotachygraphe_conforme BOOLEAN DEFAULT FALSE,
    chronotachygraphe_numero_serie VARCHAR(50),
    pare_chocs_etat VARCHAR(20) CHECK (pare_chocs_etat IN ('bon', 'mauvais')),
    retroviseurs_fonctionnel BOOLEAN DEFAULT FALSE,
    essuie_glaces_fonctionnel BOOLEAN DEFAULT FALSE,
    
    -- Feux
    feux_route BOOLEAN DEFAULT FALSE,
    feux_croisement BOOLEAN DEFAULT FALSE,
    feux_indicateurs BOOLEAN DEFAULT FALSE,
    feux_stop BOOLEAN DEFAULT FALSE,
    feux_marche_arriere BOOLEAN DEFAULT FALSE,
    feux_gabarit BOOLEAN DEFAULT FALSE,
    
    -- Extincteurs
    extincteur1_disponible BOOLEAN DEFAULT FALSE,
    extincteur1_capacite VARCHAR(20),
    extincteur1_validite BOOLEAN DEFAULT FALSE,
    extincteur2_disponible BOOLEAN DEFAULT FALSE,
    extincteur2_capacite VARCHAR(20),
    extincteur2_validite BOOLEAN DEFAULT FALSE,
    
    observations TEXT,
    signature VARCHAR(200),
    pdf_url TEXT,
    
    created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
    updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

-- Table des contrôles de documents (détail par contrôle)
CREATE TABLE IF NOT EXISTS controle_documents (
    id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
    controle_id UUID REFERENCES controles(id) ON DELETE CASCADE,
    type_document VARCHAR(50) NOT NULL,
    disponible BOOLEAN DEFAULT FALSE,
    validite BOOLEAN DEFAULT FALSE,
    date_expiration DATE,
    numero_serie VARCHAR(50), -- Pour carnet métrologique
    created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

-- Table d'historique des modifications
CREATE TABLE IF NOT EXISTS historique_modifications (
    id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
    table_name VARCHAR(50) NOT NULL,
    record_id UUID NOT NULL,
    action VARCHAR(20) NOT NULL CHECK (action IN ('INSERT', 'UPDATE', 'DELETE')),
    old_values JSONB,
    new_values JSONB,
    modified_by UUID REFERENCES users(id),
    modified_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
    description TEXT
);

-- Index pour améliorer les performances
CREATE INDEX IF NOT EXISTS idx_vehicules_immatriculation ON vehicules(immatriculation);
CREATE INDEX IF NOT EXISTS idx_vehicules_statut ON vehicules(statut);
CREATE INDEX IF NOT EXISTS idx_documents_vehicule_id ON documents(vehicule_id);
CREATE INDEX IF NOT EXISTS idx_documents_type ON documents(type_document);
CREATE INDEX IF NOT EXISTS idx_documents_statut ON documents(statut);
CREATE INDEX IF NOT EXISTS idx_controles_vehicule_id ON controles(vehicule_id);
CREATE INDEX IF NOT EXISTS idx_controles_date ON controles(date_controle);
CREATE INDEX IF NOT EXISTS idx_historique_table_record ON historique_modifications(table_name, record_id);
CREATE INDEX IF NOT EXISTS idx_historique_date ON historique_modifications(modified_at);
[V0_FILE]sql:file="scripts/02-create-functions.sql" isMerged="true"
-- Fonctions utilitaires pour la base de données

-- Fonction pour mettre à jour automatiquement updated_at
CREATE OR REPLACE FUNCTION update_updated_at_column()
RETURNS TRIGGER AS $$
BEGIN
    NEW.updated_at = NOW();
    RETURN NEW;
END;
$$ language 'plpgsql';

-- Triggers pour updated_at
CREATE TRIGGER update_users_updated_at BEFORE UPDATE ON users FOR EACH ROW EXECUTE FUNCTION update_updated_at_column();
CREATE TRIGGER update_dossiers_updated_at BEFORE UPDATE ON dossiers FOR EACH ROW EXECUTE FUNCTION update_updated_at_column();
CREATE TRIGGER update_vehicules_updated_at BEFORE UPDATE ON vehicules FOR EACH ROW EXECUTE FUNCTION update_updated_at_column();
CREATE TRIGGER update_documents_updated_at BEFORE UPDATE ON documents FOR EACH ROW EXECUTE FUNCTION update_updated_at_column();
CREATE TRIGGER update_controles_updated_at BEFORE UPDATE ON controles FOR EACH ROW EXECUTE FUNCTION update_updated_at_column();

-- Fonction pour calculer le statut d'un document basé sur la date d'expiration
CREATE OR REPLACE FUNCTION calculate_document_status(expiration_date DATE)
RETURNS VARCHAR(20) AS $$
BEGIN
    IF expiration_date IS NULL THEN
        RETURN 'valid';
    END IF;
    
    IF expiration_date < CURRENT_DATE THEN
        RETURN 'expired';
    ELSIF expiration_date <= CURRENT_DATE + INTERVAL '30 days' THEN
        RETURN 'warning';
    ELSE
        RETURN 'valid';
    END IF;
END;
$$ LANGUAGE plpgsql;

-- Fonction pour mettre à jour automatiquement le statut des documents
CREATE OR REPLACE FUNCTION update_document_status()
RETURNS TRIGGER AS $$
BEGIN
    NEW.statut = calculate_document_status(NEW.date_expiration);
    RETURN NEW;
END;
$$ LANGUAGE plpgsql;

-- Trigger pour mettre à jour le statut des documents
CREATE TRIGGER update_document_status_trigger 
    BEFORE INSERT OR UPDATE ON documents 
    FOR EACH ROW EXECUTE FUNCTION update_document_status();

-- Fonction pour enregistrer les modifications dans l'historique
CREATE OR REPLACE FUNCTION log_modifications()
RETURNS TRIGGER AS $$
BEGIN
    IF TG_OP = 'DELETE' THEN
        INSERT INTO historique_modifications (table_name, record_id, action, old_values, modified_by)
        VALUES (TG_TABLE_NAME, OLD.id, TG_OP, row_to_json(OLD), NULL);
        RETURN OLD;
    ELSIF TG_OP = 'UPDATE' THEN
        INSERT INTO historique_modifications (table_name, record_id, action, old_values, new_values, modified_by)
        VALUES (TG_TABLE_NAME, NEW.id, TG_OP, row_to_json(OLD), row_to_json(NEW), NEW.updated_by);
        RETURN NEW;
    ELSIF TG_OP = 'INSERT' THEN
        INSERT INTO historique_modifications (table_name, record_id, action, new_values, modified_by)
        VALUES (TG_TABLE_NAME, NEW.id, TG_OP, row_to_json(NEW), NEW.created_by);
        RETURN NEW;
    END IF;
    RETURN NULL;
END;
$$ LANGUAGE plpgsql;

-- Triggers pour l'historique des modifications
CREATE TRIGGER log_vehicules_modifications 
    AFTER INSERT OR UPDATE OR DELETE ON vehicules 
    FOR EACH ROW EXECUTE FUNCTION log_modifications();

CREATE TRIGGER log_documents_modifications 
    AFTER INSERT OR UPDATE OR DELETE ON documents 
    FOR EACH ROW EXECUTE FUNCTION log_modifications();

CREATE TRIGGER log_controles_modifications 
    AFTER INSERT OR UPDATE OR DELETE ON controles 
    FOR EACH ROW EXECUTE FUNCTION log_modifications();
[V0_FILE]sql:file="scripts/03-insert-sample-data.sql" isMerged="true"
-- Insertion de données d'exemple

-- Insertion d'utilisateurs
INSERT INTO users (id, email, nom, prenom, role, telephone) VALUES
('550e8400-e29b-41d4-a716-446655440001', 'admin@transport.ma', 'Benali', 'Ahmed', 'admin', '+212 6 12 34 56 78'),
('550e8400-e29b-41d4-a716-446655440002', 'agent1@transport.ma', 'Alami', 'Fatima', 'agent', '+212 6 98 76 54 32'),
('550e8400-e29b-41d4-a716-446655440003', 'agent2@transport.ma', 'Tazi', 'Omar', 'agent', '+212 6 11 22 33 44')
ON CONFLICT (email) DO NOTHING;

-- Insertion de dossiers
INSERT INTO dossiers (id, numero_dossier, type_transport, societe_transport, responsable, telephone, email, nombre_vehicules, lignes_desservies, statut, created_by) VALUES
('660e8400-e29b-41d4-a716-446655440001', 'DOS-2024-001', 'interurbain', 'Transport Maghreb SARL', 'Ahmed Benali', '+212 6 12 34 56 78', 'contact@transport-maghreb.ma', 3, 'Casablanca - Rabat', 'valide', '550e8400-e29b-41d4-a716-446655440001'),
('660e8400-e29b-41d4-a716-446655440002', 'DOS-2024-002', 'urbain', 'Atlas Transport', 'Fatima Zahra', '+212 6 98 76 54 32', 'info@atlas-transport.ma', 5, 'Marrakech - Agadir', 'en-cours', '550e8400-e29b-41d4-a716-446655440001'),
('660e8400-e29b-41d4-a716-446655440003', 'DOS-2024-003', 'touristique', 'Sahara Lines', 'Omar Alami', '+212 6 11 22 33 44', 'contact@sahara-lines.ma', 2, 'Fès - Meknès', 'valide', '550e8400-e29b-41d4-a716-446655440001')
ON CONFLICT (numero_dossier) DO NOTHING;

-- Insertion de véhicules
INSERT INTO vehicules (id, immatriculation, numero_serie, dossier_id, numero_autorisation, gerant_autorisation, ligne_autorisee, destination, horaire, gerant_societe, nombre_places, statut, date_dernier_controle, date_prochain_controle, created_by) VALUES
('770e8400-e29b-41d4-a716-446655440001', '123456-A-12', 'MB-2024-001', '660e8400-e29b-41d4-a716-446655440001', 'AUT-001', 'Ahmed Benali', 'Casablanca - Rabat', 'Casablanca - Rabat', '08:00 - 18:00', 'Transport Maghreb SARL', 45, 'non-conforme', '2024-01-15', '2024-07-15', '550e8400-e29b-41d4-a716-446655440001'),
('770e8400-e29b-41d4-a716-446655440002', '789012-B-34', 'MB-2024-002', '660e8400-e29b-41d4-a716-446655440002', 'AUT-002', 'Fatima Zahra', 'Marrakech - Agadir', 'Marrakech - Agadir', '06:00 - 20:00', 'Atlas Transport', 52, 'conforme', '2024-02-20', '2024-08-20', '550e8400-e29b-41d4-a716-446655440001'),
('770e8400-e29b-41d4-a716-446655440003', '345678-C-56', 'MB-2024-003', '660e8400-e29b-41d4-a716-446655440003', 'AUT-003', 'Omar Alami', 'Fès - Meknès', 'Fès - Meknès', '07:00 - 19:00', 'Sahara Lines', 38, 'a-controler', '2024-03-10', '2024-09-10', '550e8400-e29b-41d4-a716-446655440001')
ON CONFLICT (immatriculation) DO NOTHING;

-- Insertion de documents
INSERT INTO documents (vehicule_id, type_document, numero_document, date_expiration, fichier_url, created_by) VALUES
-- Documents pour véhicule 1 (123456-A-12)
('770e8400-e29b-41d4-a716-446655440001', 'carte_grise', 'CG123456', '2025-06-15', NULL, '550e8400-e29b-41d4-a716-446655440001'),
('770e8400-e29b-41d4-a716-446655440001', 'assurance', 'ASS789012', '2024-12-31', NULL, '550e8400-e29b-41d4-a716-446655440001'),
('770e8400-e29b-41d4-a716-446655440001', 'controle_technique', 'CT345678', '2024-08-20', NULL, '550e8400-e29b-41d4-a716-446655440001'),
('770e8400-e29b-41d4-a716-446655440001', 'visite_technique', 'VT901234', '2025-03-10', NULL, '550e8400-e29b-41d4-a716-446655440001'),
('770e8400-e29b-41d4-a716-446655440001', 'permis_conduire', 'PC123456789', '2026-01-15', NULL, '550e8400-e29b-41d4-a716-446655440001'),
('770e8400-e29b-41d4-a716-446655440001', 'visite_medicale', 'VM567890', '2024-07-30', NULL, '550e8400-e29b-41d4-a716-446655440001'),

-- Documents pour véhicule 2 (789012-B-34)
('770e8400-e29b-41d4-a716-446655440002', 'carte_grise', 'CG789012', '2025-12-20', NULL, '550e8400-e29b-41d4-a716-446655440001'),
('770e8400-e29b-41d4-a716-446655440002', 'assurance', 'ASS345678', '2025-01-15', NULL, '550e8400-e29b-41d4-a716-446655440001'),
('770e8400-e29b-41d4-a716-446655440002', 'controle_technique', 'CT789012', '2025-02-28', NULL, '550e8400-e29b-41d4-a716-446655440001'),
('770e8400-e29b-41d4-a716-446655440002', 'visite_technique', 'VT345678', '2025-04-10', NULL, '550e8400-e29b-41d4-a716-446655440001'),
('770e8400-e29b-41d4-a716-446655440002', 'permis_conduire', 'PC987654321', '2026-08-20', NULL, '550e8400-e29b-41d4-a716-446655440001'),
('770e8400-e29b-41d4-a716-446655440002', 'visite_medicale', 'VM123456', '2025-01-10', NULL, '550e8400-e29b-41d4-a716-446655440001'),

-- Documents pour véhicule 3 (345678-C-56)
('770e8400-e29b-41d4-a716-446655440003', 'carte_grise', 'CG345678', '2025-09-30', NULL, '550e8400-e29b-41d4-a716-446655440001'),
('770e8400-e29b-41d4-a716-446655440003', 'assurance', 'ASS901234', '2024-07-25', NULL, '550e8400-e29b-41d4-a716-446655440001'),
('770e8400-e29b-41d4-a716-446655440003', 'controle_technique', 'CT123456', '2024-11-15', NULL, '550e8400-e29b-41d4-a716-446655440001'),
('770e8400-e29b-41d4-a716-446655440003', 'visite_technique', 'VT789012', '2025-05-20', NULL, '550e8400-e29b-41d4-a716-446655440001'),
('770e8400-e29b-41d4-a716-446655440003', 'permis_conduire', 'PC555666777', '2025-12-10', NULL, '550e8400-e29b-41d4-a716-446655440001'),
('770e8400-e29b-41d4-a716-446655440003', 'visite_medicale', 'VM789012', '2024-09-05', NULL, '550e8400-e29b-41d4-a716-446655440001')
ON CONFLICT (vehicule_id, type_document) DO NOTHING;
[V0_FILE]sql:file="scripts/04-create-views.sql" isMerged="true"
-- Vues pour simplifier les requêtes

-- Vue complète des véhicules avec leurs documents
CREATE OR REPLACE VIEW vue_vehicules_complets AS
SELECT 
    v.*,
    d.numero_dossier,
    d.societe_transport as dossier_societe,
    d.type_transport,
    -- Compter les documents par statut
    COUNT(CASE WHEN doc.statut = 'expired' THEN 1 END) as documents_expires,
    COUNT(CASE WHEN doc.statut = 'warning' THEN 1 END) as documents_alertes,
    COUNT(CASE WHEN doc.statut = 'valid' THEN 1 END) as documents_valides,
    -- Dernière date de contrôle
    MAX(c.date_controle) as derniere_date_controle,
    -- Statut du dernier contrôle
    (SELECT statut FROM controles WHERE vehicule_id = v.id ORDER BY date_controle DESC LIMIT 1) as dernier_statut_controle
FROM vehicules v
LEFT JOIN dossiers d ON v.dossier_id = d.id
LEFT JOIN documents doc ON v.id = doc.vehicule_id
LEFT JOIN controles c ON v.id = c.vehicule_id
GROUP BY v.id, d.numero_dossier, d.societe_transport, d.type_transport;

-- Vue des documents avec statut calculé
CREATE OR REPLACE VIEW vue_documents_statut AS
SELECT 
    d.*,
    v.immatriculation,
    v.gerant_societe,
    calculate_document_status(d.date_expiration) as statut_calcule,
    CASE 
        WHEN d.date_expiration < CURRENT_DATE THEN 
            CURRENT_DATE - d.date_expiration
        ELSE 0 
    END as jours_expires,
    CASE 
        WHEN d.date_expiration >= CURRENT_DATE THEN 
            d.date_expiration - CURRENT_DATE
        ELSE 0 
    END as jours_restants
FROM documents d
JOIN vehicules v ON d.vehicule_id = v.id;

-- Vue des statistiques globales
CREATE OR REPLACE VIEW vue_statistiques AS
SELECT 
    COUNT(DISTINCT v.id) as total_vehicules,
    COUNT(DISTINCT CASE WHEN v.statut = 'conforme' THEN v.id END) as vehicules_conformes,
    COUNT(DISTINCT CASE WHEN v.statut = 'non-conforme' THEN v.id END) as vehicules_non_conformes,
    COUNT(DISTINCT CASE WHEN v.statut = 'a-controler' THEN v.id END) as vehicules_a_controler,
    COUNT(CASE WHEN d.statut = 'expired' THEN 1 END) as documents_expires,
    COUNT(CASE WHEN d.statut = 'warning' THEN 1 END) as documents_alertes,
    COUNT(DISTINCT c.id) as total_controles,
    COUNT(DISTINCT CASE WHEN c.statut = 'conforme' THEN c.id END) as controles_conformes,
    COUNT(DISTINCT CASE WHEN c.statut = 'non-conforme' THEN c.id END) as controles_non_conformes
FROM vehicules v
LEFT JOIN documents d ON v.id = d.vehicule_id
LEFT JOIN controles c ON v.id = c.vehicule_id;

-- Vue de l'historique des contrôles
CREATE OR REPLACE VIEW vue_historique_controles AS
SELECT 
    c.*,
    v.immatriculation,
    v.gerant_societe,
    u.nom as agent_nom,
    u.prenom as agent_prenom,
    COUNT(cd.id) as nombre_documents_controles,
    COUNT(CASE WHEN cd.disponible = true AND cd.validite = true THEN 1 END) as documents_conformes
FROM controles c
JOIN vehicules v ON c.vehicule_id = v.id
LEFT JOIN users u ON c.agent_id = u.id
LEFT JOIN controle_documents cd ON c.id = cd.controle_id
GROUP BY c.id, v.immatriculation, v.gerant_societe, u.nom, u.prenom
ORDER BY c.date_controle DESC;
[V0_FILE]typescriptreact:file="lib/supabase.ts" isMerged="true"
import { createClient } from "@supabase/supabase-js"

const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL!
const supabaseAnonKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!

export const supabase = createClient(supabaseUrl, supabaseAnonKey)

// Types pour TypeScript
export interface User {
  id: string
  email: string
  nom: string
  prenom: string
  role: "admin" | "agent"
  telephone?: string
  created_at: string
  updated_at: string
}

export interface Dossier {
  id: string
  numero_dossier: string
  date_creation: string
  type_transport: "urbain" | "interurbain" | "international" | "touristique"
  societe_transport: string
  responsable?: string
  telephone?: string
  email?: string
  adresse?: string
  nombre_vehicules: number
  lignes_desservies?: string
  observations?: string
  statut: "en-cours" | "valide" | "suspendu" | "expire"
  created_by?: string
  created_at: string
  updated_at: string
}

export interface Vehicule {
  id: string
  immatriculation: string
  numero_serie?: string
  dossier_id?: string
  numero_autorisation?: string
  autorisation_exceptionnelle?: string
  gerant_autorisation?: string
  ligne_autorisee?: string
  destination?: string
  horaire?: string
  gerant_societe?: string
  nombre_places: number
  photo_url?: string
  statut: "conforme" | "non-conforme" | "a-controler"
  date_dernier_controle?: string
  date_prochain_controle?: string
  created_by?: string
  created_at: string
  updated_at: string
}

export interface Document {
  id: string
  vehicule_id: string
  type_document:
    | "carte_grise"
    | "assurance"
    | "controle_technique"
    | "visite_technique"
    | "permis_conduire"
    | "visite_medicale"
    | "carte_autorisation"
    | "carte_itineraire"
    | "autorisation_exceptionnelle"
    | "carnet_metrologique"
  numero_document?: string
  date_expiration?: string
  statut: "valid" | "warning" | "expired"
  fichier_url?: string
  observations?: string
  created_by?: string
  created_at: string
  updated_at: string
}

export interface Controle {
  id: string
  vehicule_id: string
  agent_id?: string
  date_controle: string
  statut: "conforme" | "non-conforme"
  nombre_sieges_installes?: number
  nombre_voyageurs?: number
  proprete?: "propre" | "non-propre"
  etat_sieges?: "bon" | "moyen" | "deteriore"
  pneus_avant_references?: string
  pneus_avant_profondeur?: string
  chronotachygraphe_disponible: boolean
  chronotachygraphe_fonctionnel: boolean
  chronotachygraphe_conforme: boolean
  chronotachygraphe_numero_serie?: string
  pare_chocs_etat?: "bon" | "mauvais"
  retroviseurs_fonctionnel: boolean
  essuie_glaces_fonctionnel: boolean
  feux_route: boolean
  feux_croisement: boolean
  feux_indicateurs: boolean
  feux_stop: boolean
  feux_marche_arriere: boolean
  feux_gabarit: boolean
  extincteur1_disponible: boolean
  extincteur1_capacite?: string
  extincteur1_validite: boolean
  extincteur2_disponible: boolean
  extincteur2_capacite?: string
  extincteur2_validite: boolean
  observations?: string
  signature?: string
  pdf_url?: string
  created_at: string
  updated_at: string
}

export interface VehiculeComplet extends Vehicule {
  numero_dossier?: string
  dossier_societe?: string
  type_transport?: string
  documents_expires: number
  documents_alertes: number
  documents_valides: number
  derniere_date_controle?: string
  dernier_statut_controle?: string
}

// Fonctions utilitaires pour les requêtes
export const vehiculeQueries = {
  // Récupérer tous les véhicules avec leurs informations complètes
  async getAll(): Promise<VehiculeComplet[]> {
    const { data, error } = await supabase
      .from("vue_vehicules_complets")
      .select("*")
      .order("created_at", { ascending: false })

if (error) throw error
    return data || []
  },

// Récupérer un véhicule par ID avec ses documents
  async getById(id: string) {
    const { data: vehicule, error: vehiculeError } = await supabase
      .from("vehicules")
      .select(`
        *,
        dossiers (
          numero_dossier,
          societe_transport,
          type_transport
        )
      `)
      .eq("id", id)
      .single()

if (vehiculeError) throw vehiculeError

const { data: documents, error: documentsError } = await supabase
      .from("documents")
      .select("*")
      .eq("vehicule_id", id)

if (documentsError) throw documentsError

return { vehicule, documents }
  },

// Créer un nouveau véhicule
  async create(vehicule: Omit<Vehicule, "id" | "created_at" | "updated_at">) {
    const { data, error } = await supabase.from("vehicules").insert([vehicule]).select().single()

if (error) throw error
    return data
  },

// Mettre à jour un véhicule
  async update(id: string, updates: Partial<Vehicule>) {
    const { data, error } = await supabase.from("vehicules").update(updates).eq("id", id).select().single()

if (error) throw error
    return data
  },

// Supprimer un véhicule
  async delete(id: string) {
    const { error } = await supabase.from("vehicules").delete().eq("id", id)

if (error) throw error
  },
}

export const documentQueries = {
  // Récupérer les documents d'un véhicule
  async getByVehiculeId(vehiculeId: string): Promise<Document[]> {
    const { data, error } = await supabase
      .from("documents")
      .select("*")
      .eq("vehicule_id", vehiculeId)
      .order("type_document")

if (error) throw error
    return data || []
  },

// Mettre à jour un document
  async upsert(document: Omit<Document, "id" | "created_at" | "updated_at">) {
    const { data, error } = await supabase
      .from("documents")
      .upsert([document], {
        onConflict: "vehicule_id,type_document",
        ignoreDuplicates: false,
      })
      .select()
      .single()

if (error) throw error
    return data
  },

// Récupérer les documents expirés ou en alerte
  async getAlertes(): Promise<Document[]> {
    const { data, error } = await supabase
      .from("vue_documents_statut")
      .select("*")
      .in("statut", ["expired", "warning"])
      .order("date_expiration")

if (error) throw error
    return data || []
  },
}

export const controleQueries = {
  // Créer un nouveau contrôle
  async create(controle: Omit<Controle, "id" | "created_at" | "updated_at">) {
    const { data, error } = await supabase.from("controles").insert([controle]).select().single()

if (error) throw error
    return data
  },

// Récupérer l'historique des contrôles d'un véhicule
  async getByVehiculeId(vehiculeId: string): Promise<Controle[]> {
    const { data, error } = await supabase
      .from("controles")
      .select(`
        *,
        users (
          nom,
          prenom
        )
      `)
      .eq("vehicule_id", vehiculeId)
      .order("date_controle", { ascending: false })

if (error) throw error
    return data || []
  },

// Récupérer les statistiques
  async getStatistiques() {
    const { data, error } = await supabase.from("vue_statistiques").select("*").single()

if (error) throw error
    return data
  },
}

export const dossierQueries = {
  // Récupérer tous les dossiers
  async getAll(): Promise<Dossier[]> {
    const { data, error } = await supabase.from("dossiers").select("*").order("created_at", { ascending: false })

if (error) throw error
    return data || []
  },

// Créer un nouveau dossier
  async create(dossier: Omit<Dossier, "id" | "created_at" | "updated_at">) {
    const { data, error } = await supabase.from("dossiers").insert([dossier]).select().single()

if (error) throw error
    return data
  },
}
[V0_FILE]typescriptreact:file="app/layout.tsx" isMerged="true"
import type React from "react"
import type { Metadata, Viewport } from "next"
import { Inter } from "next/font/google"
import "./globals.css"

const inter = Inter({ subsets: ["latin"] })

export const metadata: Metadata = {
  title: "Gestion des Autocars",
  description: "Système de gestion et contrôle des autocars - Gare Routière",
  manifest: "/manifest.json",
  appleWebApp: {
    capable: true,
    statusBarStyle: "default",
    title: "Gestion Autocars",
  },
  formatDetection: {
    telephone: false,
  },
}

export const viewport: Viewport = {
  width: "device-width",
  initialScale: 1,
  maximumScale: 1,
  userScalable: false,
  viewportFit: "cover",
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="fr">
      <head>
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="apple-mobile-web-app-status-bar-style" content="default" />
        <meta name="apple-mobile-web-app-title" content="Gestion Autocars" />
        <link rel="apple-touch-icon" href="/icon-192x192.png" />
        <link rel="apple-touch-icon" sizes="152x152" href="/icon-152x152.png" />
        <link rel="apple-touch-icon" sizes="180x180" href="/icon-180x180.png" />
        <link rel="apple-touch-icon" sizes="167x167" href="/icon-167x167.png" />
        <meta name="theme-color" content="#2563eb" />
      </head>
      <body className={`${inter.className} antialiased`}>
        <div className="min-h-screen bg-gray-50">{children}</div>
      </body>
    </html>
  )
}
[V0_FILE]json:file="public/manifest.json" isMerged="true"
{
  "name": "Gestion des Autocars",
  "short_name": "Autocars",
  "description": "Système de gestion et contrôle des autocars",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#2563eb",
  "orientation": "portrait",
  "icons": [
    {
      "src": "/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "any maskable"
    },
    {
      "src": "/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "any maskable"
    }
  ],
  "categories": ["business", "productivity"],
  "lang": "fr",
  "dir": "ltr"
}
[V0_FILE]typescriptreact:file="hooks/use-mobile.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"

export function useIsMobile() {
  const [isMobile, setIsMobile] = useState(false)

useEffect(() => {
    const checkDevice = () => {
      setIsMobile(window.innerWidth < 768)
    }

checkDevice()
    window.addEventListener("resize", checkDevice)

return () => window.removeEventListener("resize", checkDevice)
  }, [])

return isMobile
}

export function useIsIOS() {
  const [isIOS, setIsIOS] = useState(false)

useEffect(() => {
    const checkIOS = () => {
      const userAgent = window.navigator.userAgent.toLowerCase()
      setIsIOS(/iphone|ipad|ipod/.test(userAgent))
    }

checkIOS()
  }, [])

return isIOS
}

export function useDeviceInfo() {
  const [deviceInfo, setDeviceInfo] = useState({
    isMobile: false,
    isIOS: false,
    isStandalone: false,
    screenHeight: 0,
    safeAreaTop: 0,
    safeAreaBottom: 0,
  })

useEffect(() => {
    const updateDeviceInfo = () => {
      const userAgent = window.navigator.userAgent.toLowerCase()
      const isIOS = /iphone|ipad|ipod/.test(userAgent)
      const isMobile = window.innerWidth < 768
      const isStandalone = window.matchMedia("(display-mode: standalone)").matches

// Calculer les safe areas pour iPhone
      let safeAreaTop = 0
      let safeAreaBottom = 0

if (isIOS) {
        // iPhone avec encoche (iPhone X et plus récents)
        if (window.screen.height >= 812) {
          safeAreaTop = isStandalone ? 44 : 20
          safeAreaBottom = isStandalone ? 34 : 0
        } else {
          // iPhone plus anciens
          safeAreaTop = isStandalone ? 20 : 0
          safeAreaBottom = 0
        }
      }

setDeviceInfo({
        isMobile,
        isIOS,
        isStandalone,
        screenHeight: window.innerHeight,
        safeAreaTop,
        safeAreaBottom,
      })
    }

updateDeviceInfo()
    window.addEventListener("resize", updateDeviceInfo)
    window.addEventListener("orientationchange", updateDeviceInfo)

return () => {
      window.removeEventListener("resize", updateDeviceInfo)
      window.removeEventListener("orientationchange", updateDeviceInfo)
    }
  }, [])

return deviceInfo
}
[V0_FILE]typescriptreact:file="components/mobile-header.tsx" isMerged="true"
"use client"

import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet"
import { Bus, Menu, Plus, Settings, Users, Bell } from "lucide-react"
import Link from "next/link"
import { useDeviceInfo } from "@/hooks/use-mobile"

interface MobileHeaderProps {
  title: string
  subtitle?: string
  userRole?: "admin" | "agent"
  showNotifications?: boolean
  notificationCount?: number
}

export function MobileHeader({
  title,
  subtitle,
  userRole = "agent",
  showNotifications = false,
  notificationCount = 0,
}: MobileHeaderProps) {
  const { safeAreaTop, isStandalone } = useDeviceInfo()

return (
    <header
      className="bg-white shadow-sm border-b sticky top-0 z-50"
      style={{
        paddingTop: isStandalone ? `${safeAreaTop}px` : "0px",
      }}
    >
      <div className="px-4 py-3">
        <div className="flex items-center justify-between">
          {/* Logo et titre */}
          <div className="flex items-center space-x-3 flex-1 min-w-0">
            <Bus className="w-6 h-6 text-blue-600 flex-shrink-0" />
            <div className="min-w-0 flex-1">
              <h1 className="text-lg font-bold text-gray-900 truncate">{title}</h1>
              {subtitle && <p className="text-xs text-gray-500 truncate">{subtitle}</p>}
            </div>
          </div>

{/* Actions à droite */}
          <div className="flex items-center space-x-2">
            {/* Notifications */}
            {showNotifications && (
              <Button variant="ghost" size="sm" className="relative p-2">
                <Bell className="w-5 h-5" />
                {notificationCount > 0 && (
                  <Badge className="absolute -top-1 -right-1 h-5 w-5 rounded-full p-0 text-xs bg-red-500">
                    {notificationCount > 9 ? "9+" : notificationCount}
                  </Badge>
                )}
              </Button>
            )}

{/* Menu hamburger */}
            <Sheet>
              <SheetTrigger asChild>
                <Button variant="ghost" size="sm" className="p-2">
                  <Menu className="w-5 h-5" />
                </Button>
              </SheetTrigger>
              <SheetContent side="right" className="w-80">
                <div className="py-4">
                  <div className="flex items-center space-x-3 mb-6">
                    <Bus className="w-8 h-8 text-blue-600" />
                    <div>
                      <h2 className="font-bold text-gray-900">Gestion Autocars</h2>
                      <Badge variant="outline" className="text-xs">
                        <Users className="w-3 h-3 mr-1" />
                        {userRole === "admin" ? "Administrateur" : "Agent"}
                      </Badge>
                    </div>
                  </div>

<nav className="space-y-2">
                    <Link href="/">
                      <Button variant="ghost" className="w-full justify-start">
                        <Bus className="w-4 h-4 mr-3" />
                        Tableau de bord
                      </Button>
                    </Link>

<Link href="/inspection/new">
                      <Button variant="ghost" className="w-full justify-start">
                        <Plus className="w-4 h-4 mr-3" />
                        Nouveau Contrôle
                      </Button>
                    </Link>

<Link href="/dossiers/nouveau">
                      <Button variant="ghost" className="w-full justify-start">
                        <Plus className="w-4 h-4 mr-3" />
                        Nouveau Dossier
                      </Button>
                    </Link>

{userRole === "admin" && (
                      <Link href="/vehicles/add">
                        <Button variant="ghost" className="w-full justify-start">
                          <Plus className="w-4 h-4 mr-3" />
                          Ajouter Autocar
                        </Button>
                      </Link>
                    )}

<Link href="/dossiers">
                      <Button variant="ghost" className="w-full justify-start">
                        <Settings className="w-4 h-4 mr-3" />
                        Gestion Dossiers
                      </Button>
                    </Link>
                  </nav>
                </div>
              </SheetContent>
            </Sheet>
          </div>
        </div>
      </div>
    </header>
  )
}
[V0_FILE]typescriptreact:file="components/mobile-bottom-nav.tsx" isMerged="true"
"use client"

import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Bus, Plus, Search, FileText, Settings } from "lucide-react"
import Link from "next/link"
import { usePathname } from "next/navigation"
import { useDeviceInfo } from "@/hooks/use-mobile"

interface MobileBottomNavProps {
  alertCount?: number
}

export function MobileBottomNav({ alertCount = 0 }: MobileBottomNavProps) {
  const pathname = usePathname()
  const { safeAreaBottom, isStandalone } = useDeviceInfo()

const navItems = [
    {
      href: "/",
      icon: Bus,
      label: "Accueil",
      active: pathname === "/",
    },
    {
      href: "/search",
      icon: Search,
      label: "Recherche",
      active: pathname === "/search",
    },
    {
      href: "/inspection/new",
      icon: Plus,
      label: "Contrôle",
      active: pathname.startsWith("/inspection"),
      primary: true,
    },
    {
      href: "/alerts",
      icon: FileText,
      label: "Alertes",
      active: pathname === "/alerts",
      badge: alertCount,
    },
    {
      href: "/settings",
      icon: Settings,
      label: "Paramètres",
      active: pathname === "/settings",
    },
  ]

return (
    <nav
      className="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 z-50"
      style={{
        paddingBottom: isStandalone ? `${safeAreaBottom}px` : "0px",
      }}
    >
      <div className="grid grid-cols-5 py-2">
        {navItems.map((item) => {
          const Icon = item.icon
          return (
            <Link key={item.href} href={item.href}>
              <Button
                variant="ghost"
                className={`flex flex-col items-center justify-center h-16 w-full relative ${
                  item.primary
                    ? "bg-blue-600 text-white hover:bg-blue-700 mx-2 rounded-full"
                    : item.active
                      ? "text-blue-600"
                      : "text-gray-500"
                }`}
              >
                <Icon className={`w-5 h-5 ${item.primary ? "mb-1" : "mb-1"}`} />
                <span className="text-xs font-medium">{item.label}</span>
                {item.badge && item.badge > 0 && (
                  <Badge className="absolute -top-1 -right-1 h-5 w-5 rounded-full p-0 text-xs bg-red-500">
                    {item.badge > 9 ? "9+" : item.badge}
                  </Badge>
                )}
              </Button>
            </Link>
          )
        })}
      </div>
    </nav>
  )
}
[V0_FILE]typescriptreact:file="components/mobile-card.tsx" isMerged="true"
"use client"

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { ChevronRight, AlertTriangle, CheckCircle, Clock } from "lucide-react"
import Link from "next/link"
import type { VehiculeComplet } from "@/lib/supabase"

interface MobileVehicleCardProps {
  vehicle: VehiculeComplet
  onTap?: () => void
}

export function MobileVehicleCard({ vehicle, onTap }: MobileVehicleCardProps) {
  const getStatusBadge = (status: string) => {
    switch (status) {
      case "conforme":
        return (
          <Badge className="bg-green-100 text-green-800 text-xs">
            <CheckCircle className="w-3 h-3 mr-1" />
            Conforme
          </Badge>
        )
      case "non-conforme":
        return (
          <Badge className="bg-red-100 text-red-800 text-xs">
            <AlertTriangle className="w-3 h-3 mr-1" />
            Non Conforme
          </Badge>
        )
      case "a-controler":
        return (
          <Badge className="bg-orange-100 text-orange-800 text-xs">
            <Clock className="w-3 h-3 mr-1" />À Contrôler
          </Badge>
        )
      default:
        return (
          <Badge variant="secondary" className="text-xs">
            Inconnu
          </Badge>
        )
    }
  }

const getDocumentStatusBadge = (count: number, type: "valid" | "warning" | "expired") => {
    if (count === 0) return null

switch (type) {
      case "valid":
        return <Badge className="bg-green-100 text-green-800 text-xs">{count}✓</Badge>
      case "warning":
        return <Badge className="bg-orange-100 text-orange-800 text-xs">{count}⚠</Badge>
      case "expired":
        return <Badge className="bg-red-100 text-red-800 text-xs">{count}✗</Badge>
      default:
        return (
          <Badge variant="secondary" className="text-xs">
            {count}?
          </Badge>
        )
    }
  }

return (
    <Card className="hover:shadow-md transition-shadow active:scale-95 transition-transform">
      <CardHeader className="pb-3">
        <div className="flex items-center justify-between">
          <div className="flex-1 min-w-0">
            <CardTitle className="text-base truncate">{vehicle.immatriculation}</CardTitle>
            <CardDescription className="text-sm truncate">{vehicle.gerant_societe}</CardDescription>
          </div>
          <div className="flex items-center space-x-2">
            {getStatusBadge(vehicle.statut)}
            <ChevronRight className="w-4 h-4 text-gray-400" />
          </div>
        </div>
      </CardHeader>
      <CardContent className="space-y-3">
        {/* Image du véhicule */}
        <img
          src={vehicle.photo_url || "/placeholder.svg?height=150&width=300"}
          alt={`Autocar ${vehicle.immatriculation}`}
          className="w-full h-24 object-cover rounded-lg"
        />

{/* Informations principales */}
        <div className="grid grid-cols-2 gap-2 text-xs">
          <div>
            <span className="text-gray-500">Destination:</span>
            <p className="font-medium truncate">{vehicle.destination || "N/A"}</p>
          </div>
          <div>
            <span className="text-gray-500">Places:</span>
            <p className="font-medium">{vehicle.nombre_places}</p>
          </div>
        </div>

{/* État des documents */}
        <div>
          <p className="text-xs font-medium text-gray-700 mb-1">Documents:</p>
          <div className="flex space-x-1">
            {getDocumentStatusBadge(vehicle.documents_valides, "valid")}
            {getDocumentStatusBadge(vehicle.documents_alertes, "warning")}
            {getDocumentStatusBadge(vehicle.documents_expires, "expired")}
          </div>
        </div>

{/* Actions */}
        <div className="flex space-x-2 pt-2">
          <Link href={`/vehicles/${vehicle.id}`} className="flex-1">
            <Button variant="outline" size="sm" className="w-full text-xs">
              Détails
            </Button>
          </Link>
          <Link href={`/inspection/${vehicle.id}`} className="flex-1">
            <Button size="sm" className="w-full bg-blue-600 hover:bg-blue-700 text-xs">
              Contrôler
            </Button>
          </Link>
        </div>
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="components/mobile-stats.tsx" isMerged="true"
"use client"

import { Card, CardContent } from "@/components/ui/card"
import { Bus, Clock, AlertTriangle, FileText } from "lucide-react"

interface MobileStatsProps {
  stats: {
    totalVehicles: number
    aControler: number
    documentsExpires: number
    alertes: number
  }
}

export function MobileStats({ stats }: MobileStatsProps) {
  const statItems = [
    {
      label: "Total",
      value: stats.totalVehicles,
      icon: Bus,
      color: "text-blue-600",
      bgColor: "bg-blue-50",
    },
    {
      label: "À Contrôler",
      value: stats.aControler,
      icon: Clock,
      color: "text-orange-600",
      bgColor: "bg-orange-50",
    },
    {
      label: "Expirés",
      value: stats.documentsExpires,
      icon: AlertTriangle,
      color: "text-red-600",
      bgColor: "bg-red-50",
    },
    {
      label: "Alertes",
      value: stats.alertes,
      icon: FileText,
      color: "text-yellow-600",
      bgColor: "bg-yellow-50",
    },
  ]

return (
    <div className="grid grid-cols-2 gap-3">
      {statItems.map((item, index) => {
        const Icon = item.icon
        return (
          <Card key={index} className="hover:shadow-md transition-shadow">
            <CardContent className="p-4">
              <div className="flex items-center space-x-3">
                <div className={`p-2 rounded-lg ${item.bgColor}`}>
                  <Icon className={`w-5 h-5 ${item.color}`} />
                </div>
                <div>
                  <p className="text-xs text-gray-600">{item.label}</p>
                  <p className={`text-xl font-bold ${item.color}`}>{item.value}</p>
                </div>
              </div>
            </CardContent>
          </Card>
        )
      })}
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Search, Plus, Loader2, RefreshCw } from "lucide-react"
import Link from "next/link"
import { vehiculeQueries, documentQueries, controleQueries, type VehiculeComplet, type Document } from "@/lib/supabase"
import { MobileHeader } from "@/components/mobile-header"
import { MobileBottomNav } from "@/components/mobile-bottom-nav"
import { MobileVehicleCard } from "@/components/mobile-card"
import { MobileStats } from "@/components/mobile-stats"
import { useDeviceInfo } from "@/hooks/use-mobile"

export default function Dashboard() {
  const [vehicles, setVehicles] = useState<VehiculeComplet[]>([])
  const [alertes, setAlertes] = useState<Document[]>([])
  const [searchTerm, setSearchTerm] = useState("")
  const [filterGerant, setFilterGerant] = useState("all")
  const [filterStatus, setFilterStatus] = useState("all")
  const [userRole, setUserRole] = useState<"admin" | "agent">("agent")
  const [loading, setLoading] = useState(true)
  const [refreshing, setRefreshing] = useState(false)
  const { isMobile, safeAreaBottom } = useDeviceInfo()
  const [stats, setStats] = useState({
    totalVehicles: 0,
    conformes: 0,
    nonConformes: 0,
    aControler: 0,
    documentsExpires: 0,
    alertes: 0,
  })

useEffect(() => {
    loadData()
  }, [])

const loadData = async (isRefresh = false) => {
    try {
      if (isRefresh) {
        setRefreshing(true)
      } else {
        setLoading(true)
      }

// Charger les véhicules
      const vehiculesData = await vehiculeQueries.getAll()
      setVehicles(vehiculesData)

// Charger les alertes documents
      const alertesData = await documentQueries.getAlertes()
      setAlertes(alertesData)

// Calculer les statistiques
      const statistiques = await controleQueries.getStatistiques()
      if (statistiques) {
        setStats({
          totalVehicles: statistiques.total_vehicules || 0,
          conformes: statistiques.vehicules_conformes || 0,
          nonConformes: statistiques.vehicules_non_conformes || 0,
          aControler: statistiques.vehicules_a_controler || 0,
          documentsExpires: statistiques.documents_expires || 0,
          alertes: statistiques.documents_alertes || 0,
        })
      }
    } catch (error) {
      console.error("Erreur lors du chargement des données:", error)
    } finally {
      setLoading(false)
      setRefreshing(false)
    }
  }

const handleRefresh = () => {
    loadData(true)
  }

const filteredVehicles = vehicles.filter((vehicle) => {
    const matchesSearch =
      vehicle.immatriculation.toLowerCase().includes(searchTerm.toLowerCase()) ||
      (vehicle.gerant_societe || "").toLowerCase().includes(searchTerm.toLowerCase()) ||
      (vehicle.destination || "").toLowerCase().includes(searchTerm.toLowerCase())
    const matchesGerant = filterGerant === "all" || vehicle.gerant_societe === filterGerant
    const matchesStatus = filterStatus === "all" || vehicle.statut === filterStatus

return matchesSearch && matchesGerant && matchesStatus
  })

if (loading) {
    return (
      <div className="min-h-screen bg-gray-50 flex items-center justify-center">
        <div className="text-center">
          <Loader2 className="w-8 h-8 animate-spin mx-auto mb-4 text-blue-600" />
          <p className="text-gray-600">Chargement des données...</p>
        </div>
      </div>
    )
  }

return (
    <div className="min-h-screen bg-gray-50">
      {/* Header Mobile */}
      <MobileHeader
        title="Gestion des Autocars"
        subtitle="Gare Routière - Système de Contrôle"
        userRole={userRole}
        showNotifications={true}
        notificationCount={stats.alertes + stats.documentsExpires}
      />

{/* Contenu principal */}
      <div
        className="px-4 py-4 space-y-4"
        style={{
          paddingBottom: isMobile ? `${80 + safeAreaBottom}px` : "20px",
        }}
      >
        {/* Statistiques */}
        <MobileStats stats={stats} />

{/* Actions rapides */}
        <Card>
          <CardHeader className="pb-3">
            <div className="flex items-center justify-between">
              <CardTitle className="text-lg">Actions Rapides</CardTitle>
              <Button variant="ghost" size="sm" onClick={handleRefresh} disabled={refreshing} className="p-2">
                <RefreshCw className={`w-4 h-4 ${refreshing ? "animate-spin" : ""}`} />
              </Button>
            </div>
          </CardHeader>
          <CardContent>
            <div className="grid grid-cols-2 gap-3">
              <Link href="/inspection/new">
                <Button className="w-full bg-blue-600 hover:bg-blue-700 h-12">
                  <Plus className="w-4 h-4 mr-2" />
                  Nouveau Contrôle
                </Button>
              </Link>
              <Link href="/dossiers/nouveau">
                <Button variant="outline" className="w-full h-12">
                  <Plus className="w-4 h-4 mr-2" />
                  Nouveau Dossier
                </Button>
              </Link>
            </div>
          </CardContent>
        </Card>

{/* Recherche et filtres */}
        <Card>
          <CardHeader className="pb-3">
            <CardTitle className="text-lg">Recherche</CardTitle>
          </CardHeader>
          <CardContent className="space-y-3">
            <div className="relative">
              <Search className="absolute left-3 top-3 h-4 w-4 text-gray-400" />
              <Input
                placeholder="Rechercher par immatriculation..."
                value={searchTerm}
                onChange={(e) => setSearchTerm(e.target.value)}
                className="pl-10"
              />
            </div>
            <div className="grid grid-cols-2 gap-3">
              <Select value={filterGerant} onValueChange={setFilterGerant}>
                <SelectTrigger>
                  <SelectValue placeholder="Gérant" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="all">Tous</SelectItem>
                  {Array.from(new Set(vehicles.map((v) => v.gerant_societe).filter(Boolean))).map((gerant) => (
                    <SelectItem key={gerant} value={gerant!}>
                      {gerant}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
              <Select value={filterStatus} onValueChange={setFilterStatus}>
                <SelectTrigger>
                  <SelectValue placeholder="Statut" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="all">Tous</SelectItem>
                  <SelectItem value="conforme">Conforme</SelectItem>
                  <SelectItem value="non-conforme">Non Conforme</SelectItem>
                  <SelectItem value="a-controler">À Contrôler</SelectItem>
                </SelectContent>
              </Select>
            </div>
            {(searchTerm || filterGerant !== "all" || filterStatus !== "all") && (
              <Button
                variant="outline"
                size="sm"
                onClick={() => {
                  setSearchTerm("")
                  setFilterGerant("all")
                  setFilterStatus("all")
                }}
                className="w-full"
              >
                Réinitialiser les filtres
              </Button>
            )}
          </CardContent>
        </Card>

{/* Liste des véhicules */}
        <div>
          <div className="flex items-center justify-between mb-3">
            <h2 className="text-lg font-semibold text-gray-900">Autocars ({filteredVehicles.length})</h2>
          </div>

{filteredVehicles.length === 0 ? (
            <Card className="text-center py-8">
              <CardContent>
                <p className="text-gray-500 mb-4">
                  {searchTerm || filterGerant !== "all" || filterStatus !== "all"
                    ? "Aucun autocar ne correspond à vos critères."
                    : "Aucun autocar enregistré."}
                </p>
                <Link href="/vehicles/add">
                  <Button className="bg-blue-600 hover:bg-blue-700">
                    <Plus className="w-4 h-4 mr-2" />
                    Ajouter un Autocar
                  </Button>
                </Link>
              </CardContent>
            </Card>
          ) : (
            <div className="space-y-3">
              {filteredVehicles.map((vehicle) => (
                <MobileVehicleCard key={vehicle.id} vehicle={vehicle} />
              ))}
            </div>
          )}
        </div>

{/* Alertes */}
        {alertes.length > 0 && (
          <Card className="border-orange-200 bg-orange-50">
            <CardHeader className="pb-3">
              <CardTitle className="text-lg text-orange-800">🚨 Alertes Documents</CardTitle>
              <CardDescription className="text-orange-700">
                {alertes.length} document(s) nécessitent votre attention
              </CardDescription>
            </CardHeader>
            <CardContent>
              <Link href="/alerts">
                <Button className="w-full bg-orange-600 hover:bg-orange-700">Voir toutes les alertes</Button>
              </Link>
            </CardContent>
          </Card>
        )}
      </div>

{/* Navigation mobile en bas */}
      {isMobile && <MobileBottomNav alertCount={stats.alertes + stats.documentsExpires} />}
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/search/page.tsx" isFixed="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState, useEffect, useCallback } from "react"
import { Input } from "@/components/ui/input"
import { Card, CardContent } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Search, X, Filter } from "lucide-react"
import { MobileHeader } from "@/components/mobile-header"
import { MobileBottomNav } from "@/components/mobile-bottom-nav"
import { MobileVehicleCard } from "@/components/mobile-card"
import { vehiculeQueries, type VehiculeComplet } from "@/lib/supabase"
import { useDeviceInfo } from "@/hooks/use-mobile"

export default function SearchPage() {
  const [vehicles, setVehicles] = useState<VehiculeComplet[]>([])
  const [searchTerm, setSearchTerm] = useState("")
  const [recentSearches, setRecentSearches] = useState<string[]>([])
  const [loading, setLoading] = useState(false)
  const { isMobile, safeAreaBottom } = useDeviceInfo()

useEffect(() => {
    // Charger les recherches récentes depuis localStorage
    const saved = localStorage.getItem("recentSearches")
    if (saved) {
      setRecentSearches(JSON.parse(saved))
    }
  }, [])

useEffect(() => {
    if (searchTerm.length >= 2) {
      performSearch()
    } else {
      setVehicles([])
    }
  }, [searchTerm])

const performSearch = async () => {
    setLoading(true)
    try {
      const allVehicles = await vehiculeQueries.getAll()
      const filtered = allVehicles.filter(
        (vehicle) =>
          vehicle.immatriculation.toLowerCase().includes(searchTerm.toLowerCase()) ||
          (vehicle.gerant_societe || "").toLowerCase().includes(searchTerm.toLowerCase()) ||
          (vehicle.destination || "").toLowerCase().includes(searchTerm.toLowerCase()) ||
          (vehicle.numero_dossier || "").toLowerCase().includes(searchTerm.toLowerCase()),
      )
      setVehicles(filtered)

// Ajouter à l'historique si pas déjà présent
      if (searchTerm.length >= 2 && !recentSearches.includes(searchTerm)) {
        const newRecent = [searchTerm, ...recentSearches.slice(0, 4)]
        setRecentSearches(newRecent)
        localStorage.setItem("recentSearches", JSON.stringify(newRecent))
      }
    } catch (error) {
      console.error("Erreur lors de la recherche:", error)
    } finally {
      setLoading(false)
    }
  }

const clearSearch = () => {
    setSearchTerm("")
    setVehicles([])
  }

const clearRecentSearches = () => {
    setRecentSearches([])
    localStorage.removeItem("recentSearches")
  }

const useRecentSearch = useCallback(
    (term: string) => {
      setSearchTerm(term)
    },
    [setSearchTerm],
  )

return (
    <div className="min-h-screen bg-gray-50">
      <MobileHeader title="Recherche" subtitle="Trouvez rapidement un autocar" />

<div
        className="px-4 py-4 space-y-4"
        style={{
          paddingBottom: isMobile ? `${80 + safeAreaBottom}px` : "20px",
        }}
      >
        {/* Barre de recherche */}
        <Card>
          <CardContent className="p-4">
            <div className="relative">
              <Search className="absolute left-3 top-3 h-4 w-4 text-gray-400" />
              <Input
                placeholder="Rechercher par immatriculation, gérant, destination..."
                value={searchTerm}
                onChange={(e) => setSearchTerm(e.target.value)}
                className="pl-10 pr-10"
                autoFocus
              />
              {searchTerm && (
                <Button variant="ghost" size="sm" onClick={clearSearch} className="absolute right-1 top-1 p-2">
                  <X className="w-4 h-4" />
                </Button>
              )}
            </div>
          </CardContent>
        </Card>

{/* Recherches récentes */}
        {!searchTerm && recentSearches.length > 0 && (
          <Card>
            <CardContent className="p-4">
              <div className="flex items-center justify-between mb-3">
                <h3 className="font-medium text-gray-900">Recherches récentes</h3>
                <Button variant="ghost" size="sm" onClick={clearRecentSearches} className="text-xs text-gray-500">
                  Effacer
                </Button>
              </div>
              <div className="space-y-2">
                {recentSearches.map((term, index) => (
                  <Button
                    key={index}
                    variant="ghost"
                    onClick={() => useRecentSearch(term)}
                    className="w-full justify-start text-left h-auto p-2"
                  >
                    <Search className="w-4 h-4 mr-2 text-gray-400" />
                    {term}
                  </Button>
                ))}
              </div>
            </CardContent>
          </Card>
        )}

{/* Résultats de recherche */}
        {searchTerm && (
          <div>
            <div className="flex items-center justify-between mb-3">
              <h3 className="font-medium text-gray-900">
                {loading ? "Recherche en cours..." : `${vehicles.length} résultat(s)`}
              </h3>
              {vehicles.length > 0 && (
                <Button variant="ghost" size="sm">
                  <Filter className="w-4 h-4" />
                </Button>
              )}
            </div>

{loading ? (
              <Card>
                <CardContent className="p-8 text-center">
                  <div className="animate-pulse">
                    <div className="h-4 bg-gray-200 rounded w-3/4 mx-auto mb-2"></div>
                    <div className="h-4 bg-gray-200 rounded w-1/2 mx-auto"></div>
                  </div>
                </CardContent>
              </Card>
            ) : vehicles.length === 0 && searchTerm.length >= 2 ? (
              <Card>
                <CardContent className="p-8 text-center">
                  <Search className="w-12 h-12 text-gray-400 mx-auto mb-4" />
                  <h3 className="font-medium text-gray-900 mb-2">Aucun résultat</h3>
                  <p className="text-gray-500 text-sm">Aucun autocar ne correspond à "{searchTerm}"</p>
                </CardContent>
              </Card>
            ) : (
              <div className="space-y-3">
                {vehicles.map((vehicle) => (
                  <MobileVehicleCard key={vehicle.id} vehicle={vehicle} />
                ))}
              </div>
            )}
          </div>
        )}

{/* Suggestions si pas de recherche */}
        {!searchTerm && recentSearches.length === 0 && (
          <Card>
            <CardContent className="p-8 text-center">
              <Search className="w-12 h-12 text-gray-400 mx-auto mb-4" />
              <h3 className="font-medium text-gray-900 mb-2">Recherche rapide</h3>
              <p className="text-gray-500 text-sm mb-4">Tapez au moins 2 caractères pour commencer la recherche</p>
              <div className="space-y-2">
                <p className="text-xs text-gray-400">Vous pouvez rechercher par :</p>
                <div className="flex flex-wrap gap-2 justify-center">
                  <span className="px-2 py-1 bg-gray-100 rounded text-xs">Immatriculation</span>
                  <span className="px-2 py-1 bg-gray-100 rounded text-xs">Gérant</span>
                  <span className="px-2 py-1 bg-gray-100 rounded text-xs">Destination</span>
                  <span className="px-2 py-1 bg-gray-100 rounded text-xs">N° Dossier</span>
                </div>
              </div>
            </CardContent>
          </Card>
        )}
      </div>

{isMobile && <MobileBottomNav />}
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/search/loading.tsx" isFixed="true" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]css:file="app/globals.css" isMerged="true"
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;
    --card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 222.2 84% 4.9%;
    --primary: 221.2 83.2% 53.3%;
    --primary-foreground: 210 40% 98%;
    --secondary: 210 40% 96%;
    --secondary-foreground: 222.2 84% 4.9%;
    --muted: 210 40% 96%;
    --muted-foreground: 215.4 16.3% 46.9%;
    --accent: 210 40% 96%;
    --accent-foreground: 222.2 84% 4.9%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;
    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    --ring: 221.2 83.2% 53.3%;
    --radius: 0.5rem;
    --chart-1: 12 76% 61%;
    --chart-2: 173 58% 39%;
    --chart-3: 197 37% 24%;
    --chart-4: 43 74% 66%;
    --chart-5: 27 87% 67%;
  }

.dark {
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;
    --card: 222.2 84% 4.9%;
    --card-foreground: 210 40% 98%;
    --popover: 222.2 84% 4.9%;
    --popover-foreground: 210 40% 98%;
    --primary: 217.2 91.2% 59.8%;
    --primary-foreground: 222.2 84% 4.9%;
    --secondary: 217.2 32.6% 17.5%;
    --secondary-foreground: 210 40% 98%;
    --muted: 217.2 32.6% 17.5%;
    --muted-foreground: 215 20.2% 65.1%;
    --accent: 217.2 32.6% 17.5%;
    --accent-foreground: 210 40% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 40% 98%;
    --border: 217.2 32.6% 17.5%;
    --input: 217.2 32.6% 17.5%;
    --ring: 224.3 76.3% 94.1%;
    --chart-1: 220 70% 50%;
    --chart-2: 160 60% 45%;
    --chart-3: 30 80% 55%;
    --chart-4: 280 65% 60%;
    --chart-5: 340 75% 55%;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }
}

/* Optimisations pour mobile */
@layer utilities {
  .touch-manipulation {
    touch-action: manipulation;
  }

.safe-area-inset-top {
    padding-top: env(safe-area-inset-top);
  }

.safe-area-inset-bottom {
    padding-bottom: env(safe-area-inset-bottom);
  }

.safe-area-inset-left {
    padding-left: env(safe-area-inset-left);
  }

.safe-area-inset-right {
    padding-right: env(safe-area-inset-right);
  }
}

/* Améliorations pour iOS */
@supports (-webkit-touch-callout: none) {
  .ios-scroll {
    -webkit-overflow-scrolling: touch;
  }
}

/* Optimisations tactiles */
button,
[role="button"] {
  touch-action: manipulation;
}

/* Amélioration des zones de toucher */
@media (max-width: 768px) {
  button {
    min-height: 44px;
  }

input,
  select,
  textarea {
    font-size: 16px; /* Évite le zoom sur iOS */
  }
}

/* Animation pour les interactions tactiles */
.active\:scale-95:active {
  transform: scale(0.95);
}

/* Masquer les barres de défilement sur mobile */
@media (max-width: 768px) {
  ::-webkit-scrollbar {
    display: none;
  }

* {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
}
[V0_FILE]shellscript:file="scripts/install.sh" isMerged="true"
#!/bin/bash

# Script d'installation pour l'application Gestion des Autocars
echo "🚌 Installation de l'application Gestion des Autocars..."

# Vérifier si Node.js est installé
if ! command -v node &> /dev/null; then
    echo "❌ Node.js n'est pas installé. Veuillez l'installer depuis https://nodejs.org/"
    exit 1
fi

# Vérifier si npm est installé
if ! command -v npm &> /dev/null; then
    echo "❌ npm n'est pas installé. Veuillez l'installer avec Node.js"
    exit 1
fi

echo "✅ Node.js et npm sont installés"

# Installer les dépendances
echo "📦 Installation des dépendances..."
npm install

# Créer le fichier .env.local s'il n'existe pas
if [ ! -f .env.local ]; then
    echo "🔧 Création du fichier de configuration..."
    cat > .env.local << EOL
# Configuration Supabase
NEXT_PUBLIC_SUPABASE_URL=your_supabase_url_here
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key_here

# Configuration de l'application
NEXT_PUBLIC_APP_NAME="Gestion des Autocars"
NEXT_PUBLIC_APP_VERSION="1.0.0"
EOL
    echo "⚠️  Veuillez configurer vos clés Supabase dans le fichier .env.local"
fi

# Construire l'application
echo "🏗️  Construction de l'application..."
npm run build

echo "✅ Installation terminée !"
echo ""
echo "🚀 Pour démarrer l'application :"
echo "   npm run dev"
echo ""
echo "🌐 L'application sera disponible sur :"
echo "   http://localhost:3000"
echo ""
echo "📱 Pour installer sur iPhone :"
echo "   1. Ouvrir Safari et aller sur l'URL"
echo "   2. Appuyer sur Partager > Sur l'écran d'accueil"
[V0_FILE]dockerfile:file="Dockerfile" isMerged="true"
# Dockerfile pour déploiement
FROM node:18-alpine AS base

# Install dependencies only when needed
FROM base AS deps
RUN apk add --no-cache libc6-compat
WORKDIR /app

# Install dependencies based on the preferred package manager
COPY package.json package-lock.json* ./
RUN npm ci

# Rebuild the source code only when needed
FROM base AS builder
WORKDIR /app
COPY --from=deps /app/node_modules ./node_modules
COPY . .

# Build the application
RUN npm run build

# Production image, copy all the files and run next
FROM base AS runner
WORKDIR /app

ENV NODE_ENV production

RUN addgroup --system --gid 1001 nodejs
RUN adduser --system --uid 1001 nextjs

COPY --from=builder /app/public ./public

# Set the correct permission for prerender cache
RUN mkdir .next
RUN chown nextjs:nodejs .next

# Automatically leverage output traces to reduce image size
COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static

USER nextjs

EXPOSE 3000

ENV PORT 3000
ENV HOSTNAME "0.0.0.0"

CMD ["node", "server.js"]
[V0_FILE]yaml:file="docker-compose.yml" isMerged="true"
version: '3.8'

services:
  app:
    build: .
    ports:
      - "3000:3000"
    environment:
      - NEXT_PUBLIC_SUPABASE_URL=${NEXT_PUBLIC_SUPABASE_URL}
      - NEXT_PUBLIC_SUPABASE_ANON_KEY=${NEXT_PUBLIC_SUPABASE_ANON_KEY}
    volumes:
      - ./.env.local:/app/.env.local:ro
    restart: unless-stopped

nginx:
    image: nginx:alpine
    ports:
      - "80:80"
      - "443:443"
    volumes:
      - ./nginx.conf:/etc/nginx/nginx.conf:ro
      - ./ssl:/etc/nginx/ssl:ro
    depends_on:
      - app
    restart: unless-stopped
[V0_FILE]plaintext:file="nginx.conf" isMerged="true"
events {
    worker_connections 1024;
}

http {
    upstream app {
        server app:3000;
    }

# Configuration pour PWA
    map $sent_http_content_type $expires {
        "text/html"                 epoch;
        "text/html; charset=utf-8"  epoch;
        default                     off;
    }

server {
        listen 80;
        server_name localhost;

# Redirection HTTPS
        return 301 https://$server_name$request_uri;
    }

server {
        listen 443 ssl http2;
        server_name localhost;

# Configuration SSL
        ssl_certificate /etc/nginx/ssl/cert.pem;
        ssl_certificate_key /etc/nginx/ssl/key.pem;

# Headers de sécurité
        add_header X-Frame-Options "SAMEORIGIN" always;
        add_header X-XSS-Protection "1; mode=block" always;
        add_header X-Content-Type-Options "nosniff" always;
        add_header Referrer-Policy "no-referrer-when-downgrade" always;
        add_header Content-Security-Policy "default-src 'self' http: https: data: blob: 'unsafe-inline'" always;

# Configuration PWA
        location /manifest.json {
            add_header Cache-Control "public, max-age=86400";
        }

location /sw.js {
            add_header Cache-Control "no-cache";
        }

# Proxy vers l'application
        location / {
            proxy_pass http://app;
            proxy_http_version 1.1;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection 'upgrade';
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header X-Forwarded-Proto $scheme;
            proxy_cache_bypass $http_upgrade;
        }
    }
}
[V0_FILE]markdown:file="README.md" isMerged="true"
# 🚌 Gestion des Autocars - Application Mobile

Application de gestion et contrôle des autocars optimisée pour iPhone et appareils mobiles.

## 📱 Installation sur iPhone

### Méthode 1: PWA (Progressive Web App)
1. Ouvrir **Safari** sur votre iPhone
2. Naviguer vers l'URL de l'application
3. Appuyer sur **Partager** (icône carré avec flèche)
4. Sélectionner **"Sur l'écran d'accueil"**
5. Confirmer l'installation

### Méthode 2: Installation locale

#### Prérequis
- Node.js 18+ installé
- npm ou yarn
- Base de données Supabase configurée

#### Installation rapide
\`\`\`bash
# Cloner le projet
git clone <repository-url>
cd bus-management-system

# Rendre le script exécutable
chmod +x scripts/install.sh

# Exécuter l'installation
./scripts/install.sh

# Démarrer l'application
npm run dev
\`\`\`

#### Installation manuelle
\`\`\`bash
# Installer les dépendances
npm install

# Configurer l'environnement
cp .env.example .env.local
# Éditer .env.local avec vos clés Supabase

# Construire l'application
npm run build

# Démarrer en mode production
npm start
\`\`\`

## 🚀 Déploiement

### Vercel (Recommandé)
\`\`\`bash
# Installer Vercel CLI
npm i -g vercel

# Déployer
vercel --prod
\`\`\`

### Docker
\`\`\`bash
# Construire l'image
docker build -t bus-management .

# Démarrer avec docker-compose
docker-compose up -d
\`\`\`

### Netlify
\`\`\`bash
# Construire pour export statique
npm run export

# Déployer le dossier 'out'
\`\`\`

## 🔧 Configuration

### Variables d'environnement
\`\`\`env
NEXT_PUBLIC_SUPABASE_URL=your_supabase_url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key
\`\`\`

### Base de données
1. Créer un projet Supabase
2. Exécuter les scripts SQL dans l'ordre :
   - `scripts/01-create-tables.sql`
   - `scripts/02-create-functions.sql`
   - `scripts/03-insert-sample-data.sql`
   - `scripts/04-create-views.sql`

## 📱 Fonctionnalités Mobile

- ✅ Interface optimisée iPhone
- ✅ Navigation tactile intuitive
- ✅ Mode hors-ligne partiel
- ✅ Installation PWA
- ✅ Safe areas iPhone X+
- ✅ Animations tactiles
- ✅ Recherche intelligente

## 🛠️ Développement

\`\`\`bash
# Mode développement
npm run dev

# Tests
npm run test

# Linting
npm run lint

# Build production
npm run build
\`\`\`

## 📞 Support

Pour toute question ou problème :
- 📧 Email: support@gestion-autocars.ma
- 📱 Téléphone: +212 6 XX XX XX XX
- 🌐 Documentation: [docs.gestion-autocars.ma]

## 📄 Licence

© 2024 Gestion des Autocars. Tous droits réservés.
[V0_FILE]plaintext:file=".env.example" isMerged="true"
# Configuration Supabase
NEXT_PUBLIC_SUPABASE_URL=https://your-project.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key-here

# Configuration de l'application
NEXT_PUBLIC_APP_NAME="Gestion des Autocars"
NEXT_PUBLIC_APP_VERSION="1.0.0"
NEXT_PUBLIC_APP_DESCRIPTION="Système de gestion et contrôle des autocars"

# Configuration PWA
NEXT_PUBLIC_PWA_NAME="Autocars"
NEXT_PUBLIC_PWA_SHORT_NAME="Autocars"
NEXT_PUBLIC_PWA_THEME_COLOR="#2563eb"
NEXT_PUBLIC_PWA_BACKGROUND_COLOR="#ffffff"

# Configuration de déploiement
NEXT_PUBLIC_BASE_URL=https://your-domain.com
NEXT_PUBLIC_API_URL=https://your-api.com

# Configuration optionnelle
NEXT_PUBLIC_GOOGLE_ANALYTICS_ID=GA-XXXXXXXXX
NEXT_PUBLIC_SENTRY_DSN=https://your-sentry-dsn
[V0_FILE]json:file="package.json" isEdit="true" isMerged="true"
{
  "name": "bus-management-mobile",
  "version": "1.0.0",
  "main": "expo-router/entry",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "build:android": "eas build --platform android",
    "build:ios": "eas build --platform ios",
    "submit:android": "eas submit --platform android",
    "submit:ios": "eas submit --platform ios"
  },
  "dependencies": {
    "expo": "~50.0.0",
    "expo-router": "~3.4.0",
    "expo-status-bar": "~1.11.1",
    "expo-constants": "~15.4.0",
    "expo-linking": "~6.2.0",
    "expo-font": "~11.10.0",
    "expo-splash-screen": "~0.26.0",
    "expo-system-ui": "~2.9.0",
    "expo-web-browser": "~12.8.0",
    "expo-camera": "~14.1.0",
    "expo-barcode-scanner": "~12.9.0",
    "expo-document-picker": "~11.10.0",
    "expo-file-system": "~16.0.0",
    "expo-sharing": "~11.10.0",
    "expo-print": "~12.8.0",
    "expo-notifications": "~0.27.0",
    "expo-location": "~16.5.0",
    "expo-sqlite": "~13.4.0",
    "react": "18.2.0",
    "react-native": "0.73.0",
    "react-native-safe-area-context": "4.8.2",
    "react-native-screens": "~3.29.0",
    "react-native-gesture-handler": "~2.14.0",
    "react-native-reanimated": "~3.6.0",
    "react-native-vector-icons": "^10.0.3",
    "@react-native-async-storage/async-storage": "1.21.0",
    "@react-navigation/native": "^6.1.0",
    "@react-navigation/stack": "^6.3.0",
    "@react-navigation/bottom-tabs": "^6.5.0",
    "@supabase/supabase-js": "^2.38.0",
    "react-native-url-polyfill": "^2.0.0",
    "react-native-elements": "^3.4.3",
    "react-native-paper": "^5.11.0",
    "react-native-modal": "^13.0.1",
    "react-native-toast-message": "^2.1.7",
    "react-native-qrcode-scanner": "^1.5.5",
    "react-native-signature-canvas": "^4.7.2"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0",
    "@types/react": "~18.2.45",
    "@types/react-native": "^0.72.0",
    "typescript": "^5.1.3"
  },
  "private": true
}
[V0_FILE]json:file="app.json" isMerged="true"
{
  "expo": {
    "name": "Gestion Autocars",
    "slug": "bus-management-mobile",
    "version": "1.0.0",
    "orientation": "portrait",
    "icon": "./assets/icon.png",
    "userInterfaceStyle": "light",
    "splash": {
      "image": "./assets/splash.png",
      "resizeMode": "contain",
      "backgroundColor": "#2563eb"
    },
    "assetBundlePatterns": ["**/*"],
    "ios": {
      "supportsTablet": true,
      "bundleIdentifier": "com.gestionautocars.mobile",
      "buildNumber": "1.0.0",
      "infoPlist": {
        "NSCameraUsageDescription": "Cette app utilise la caméra pour scanner les QR codes et prendre des photos des véhicules.",
        "NSLocationWhenInUseUsageDescription": "Cette app utilise la localisation pour enregistrer le lieu des contrôles."
      }
    },
    "android": {
      "adaptiveIcon": {
        "foregroundImage": "./assets/adaptive-icon.png",
        "backgroundColor": "#2563eb"
      },
      "package": "com.gestionautocars.mobile",
      "versionCode": 1,
      "permissions": [
        "CAMERA",
        "ACCESS_FINE_LOCATION",
        "ACCESS_COARSE_LOCATION",
        "WRITE_EXTERNAL_STORAGE",
        "READ_EXTERNAL_STORAGE"
      ]
    },
    "web": {
      "favicon": "./assets/favicon.png",
      "bundler": "metro"
    },
    "plugins": [
      "expo-router",
      [
        "expo-camera",
        {
          "cameraPermission": "Autoriser l'accès à la caméra pour scanner les QR codes."
        }
      ],
      [
        "expo-location",
        {
          "locationAlwaysAndWhenInUsePermission": "Autoriser l'accès à la localisation pour les contrôles."
        }
      ]
    ],
    "scheme": "bus-management",
    "extra": {
      "router": {
        "origin": false
      },
      "eas": {
        "projectId": "your-project-id"
      }
    }
  }
}
[V0_FILE]typescript:file="app/_layout.tsx" isMerged="true"
import { Stack } from "expo-router"
import { StatusBar } from "expo-status-bar"
import { SafeAreaProvider } from "react-native-safe-area-context"
import { Provider as PaperProvider } from "react-native-paper"
import Toast from "react-native-toast-message"
import { AuthProvider } from "../contexts/AuthContext"
import { DatabaseProvider } from "../contexts/DatabaseContext"
import { theme } from "../constants/theme"

export default function RootLayout() {
  return (
    <SafeAreaProvider>
      <PaperProvider theme={theme}>
        <AuthProvider>
          <DatabaseProvider>
            <Stack
              screenOptions={{
                headerStyle: {
                  backgroundColor: "#2563eb",
                },
                headerTintColor: "#fff",
                headerTitleStyle: {
                  fontWeight: "bold",
                },
              }}
            >
              <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
              <Stack.Screen name="login" options={{ title: "Connexion" }} />
              <Stack.Screen name="vehicle/[id]" options={{ title: "Détails Véhicule" }} />
              <Stack.Screen name="inspection/[id]" options={{ title: "Contrôle Technique" }} />
              <Stack.Screen name="camera" options={{ title: "Scanner QR Code" }} />
            </Stack>
            <StatusBar style="light" />
            <Toast />
          </DatabaseProvider>
        </AuthProvider>
      </PaperProvider>
    </SafeAreaProvider>
  )
}
[V0_FILE]typescript:file="app/(tabs)/_layout.tsx" isMerged="true"
import { Tabs } from "expo-router"
import { Ionicons } from "@expo/vector-icons"

export default function TabLayout() {
  return (
    <Tabs
      screenOptions={{
        tabBarActiveTintColor: "#2563eb",
        tabBarInactiveTintColor: "#6b7280",
        tabBarStyle: {
          backgroundColor: "#ffffff",
          borderTopWidth: 1,
          borderTopColor: "#e5e7eb",
          paddingBottom: 5,
          height: 60,
        },
        headerStyle: {
          backgroundColor: "#2563eb",
        },
        headerTintColor: "#fff",
        headerTitleStyle: {
          fontWeight: "bold",
        },
      }}
    >
      <Tabs.Screen
        name="index"
        options={{
          title: "Accueil",
          tabBarIcon: ({ color, size }) => <Ionicons name="home" size={size} color={color} />,
        }}
      />
      <Tabs.Screen
        name="search"
        options={{
          title: "Recherche",
          tabBarIcon: ({ color, size }) => <Ionicons name="search" size={size} color={color} />,
        }}
      />
      <Tabs.Screen
        name="scan"
        options={{
          title: "Scanner",
          tabBarIcon: ({ color, size }) => <Ionicons name="qr-code" size={size} color={color} />,
        }}
      />
      <Tabs.Screen
        name="alerts"
        options={{
          title: "Alertes",
          tabBarIcon: ({ color, size }) => <Ionicons name="notifications" size={size} color={color} />,
          tabBarBadge: 3,
        }}
      />
      <Tabs.Screen
        name="profile"
        options={{
          title: "Profil",
          tabBarIcon: ({ color, size }) => <Ionicons name="person" size={size} color={color} />,
        }}
      />
    </Tabs>
  )
}
[V0_FILE]typescript:file="app/(tabs)/index.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { View, Text, ScrollView, RefreshControl, TouchableOpacity, StyleSheet, Dimensions } from "react-native"
import { Card, Button, Searchbar, FAB } from "react-native-paper"
import { Ionicons } from "@expo/vector-icons"
import { router } from "expo-router"
import { useDatabase } from "../../contexts/DatabaseContext"
import { VehicleCard } from "../../components/VehicleCard"
import { StatsCard } from "../../components/StatsCard"
import { LoadingSpinner } from "../../components/LoadingSpinner"

const { width } = Dimensions.get("window")

export default function HomeScreen() {
  const { vehicles, stats, loading, refreshData } = useDatabase()
  const [searchQuery, setSearchQuery] = useState("")
  const [refreshing, setRefreshing] = useState(false)

const onRefresh = async () => {
    setRefreshing(true)
    await refreshData()
    setRefreshing(false)
  }

const filteredVehicles = vehicles.filter(
    (vehicle) =>
      vehicle.immatriculation.toLowerCase().includes(searchQuery.toLowerCase()) ||
      vehicle.gerant_societe?.toLowerCase().includes(searchQuery.toLowerCase()) ||
      vehicle.destination?.toLowerCase().includes(searchQuery.toLowerCase()),
  )

if (loading) {
    return <LoadingSpinner />
  }

return (
    <View style={styles.container}>
      <ScrollView
        style={styles.scrollView}
        refreshControl={<RefreshControl refreshing={refreshing} onRefresh={onRefresh} />}
      >
        {/* Header avec statistiques */}
        <View style={styles.header}>
          <Text style={styles.headerTitle}>Tableau de Bord</Text>
          <Text style={styles.headerSubtitle}>Gestion des Autocars</Text>
        </View>

{/* Statistiques */}
        <View style={styles.statsContainer}>
          <StatsCard title="Total" value={stats.totalVehicles} icon="bus" color="#2563eb" />
          <StatsCard title="Conformes" value={stats.conformes} icon="checkmark-circle" color="#10b981" />
          <StatsCard title="Non Conformes" value={stats.nonConformes} icon="close-circle" color="#ef4444" />
          <StatsCard title="À Contrôler" value={stats.aControler} icon="time" color="#f59e0b" />
        </View>

{/* Actions rapides */}
        <Card style={styles.actionsCard}>
          <Card.Content>
            <Text style={styles.sectionTitle}>Actions Rapides</Text>
            <View style={styles.actionsContainer}>
              <TouchableOpacity
                style={[styles.actionButton, { backgroundColor: "#2563eb" }]}
                onPress={() => router.push("/inspection/new")}
              >
                <Ionicons name="add-circle" size={24} color="white" />
                <Text style={styles.actionButtonText}>Nouveau Contrôle</Text>
              </TouchableOpacity>
              <TouchableOpacity
                style={[styles.actionButton, { backgroundColor: "#10b981" }]}
                onPress={() => router.push("/camera")}
              >
                <Ionicons name="qr-code" size={24} color="white" />
                <Text style={styles.actionButtonText}>Scanner QR</Text>
              </TouchableOpacity>
            </View>
          </Card.Content>
        </Card>

{/* Barre de recherche */}
        <Searchbar
          placeholder="Rechercher un autocar..."
          onChangeText={setSearchQuery}
          value={searchQuery}
          style={styles.searchbar}
          iconColor="#2563eb"
        />

{/* Liste des véhicules */}
        <View style={styles.vehiclesSection}>
          <Text style={styles.sectionTitle}>Autocars ({filteredVehicles.length})</Text>
          {filteredVehicles.map((vehicle) => (
            <VehicleCard key={vehicle.id} vehicle={vehicle} onPress={() => router.push(`/vehicle/${vehicle.id}`)} />
          ))}
        </View>

{/* Alertes */}
        {stats.alertes > 0 && (
          <Card style={[styles.alertCard, { backgroundColor: "#fef3c7" }]}>
            <Card.Content>
              <View style={styles.alertHeader}>
                <Ionicons name="warning" size={24} color="#f59e0b" />
                <Text style={styles.alertTitle}>Alertes Documents</Text>
              </View>
              <Text style={styles.alertText}>{stats.alertes} document(s) nécessitent votre attention</Text>
              <Button
                mode="contained"
                onPress={() => router.push("/alerts")}
                style={styles.alertButton}
                buttonColor="#f59e0b"
              >
                Voir les alertes
              </Button>
            </Card.Content>
          </Card>
        )}
      </ScrollView>

{/* Bouton flottant */}
      <FAB icon="plus" style={styles.fab} onPress={() => router.push("/inspection/new")} color="white" />
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#f8fafc",
  },
  scrollView: {
    flex: 1,
  },
  header: {
    backgroundColor: "#2563eb",
    padding: 20,
    paddingTop: 40,
  },
  headerTitle: {
    fontSize: 24,
    fontWeight: "bold",
    color: "white",
  },
  headerSubtitle: {
    fontSize: 16,
    color: "#bfdbfe",
    marginTop: 4,
  },
  statsContainer: {
    flexDirection: "row",
    flexWrap: "wrap",
    padding: 16,
    gap: 12,
  },
  actionsCard: {
    margin: 16,
    marginTop: 0,
  },
  sectionTitle: {
    fontSize: 18,
    fontWeight: "bold",
    color: "#1f2937",
    marginBottom: 12,
  },
  actionsContainer: {
    flexDirection: "row",
    gap: 12,
  },
  actionButton: {
    flex: 1,
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "center",
    padding: 16,
    borderRadius: 8,
    gap: 8,
  },
  actionButtonText: {
    color: "white",
    fontWeight: "bold",
    fontSize: 14,
  },
  searchbar: {
    margin: 16,
    marginTop: 0,
  },
  vehiclesSection: {
    padding: 16,
    paddingTop: 0,
  },
  alertCard: {
    margin: 16,
    borderWidth: 1,
    borderColor: "#fbbf24",
  },
  alertHeader: {
    flexDirection: "row",
    alignItems: "center",
    gap: 8,
    marginBottom: 8,
  },
  alertTitle: {
    fontSize: 16,
    fontWeight: "bold",
    color: "#92400e",
  },
  alertText: {
    color: "#92400e",
    marginBottom: 12,
  },
  alertButton: {
    marginTop: 8,
  },
  fab: {
    position: "absolute",
    margin: 16,
    right: 0,
    bottom: 0,
    backgroundColor: "#2563eb",
  },
})
[V0_FILE]typescript:file="app/(tabs)/search.tsx" isFixed="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { View, Text, ScrollView, StyleSheet, TouchableOpacity } from "react-native"
import { Searchbar, Card, Chip } from "react-native-paper"
import { Ionicons } from "@expo/vector-icons"
import AsyncStorage from "@react-native-async-storage/async-storage"
import { useDatabase } from "../../contexts/DatabaseContext"
import { VehicleCard } from "../../components/VehicleCard"
import { router } from "expo-router"

export default function SearchScreen() {
  const { vehicles } = useDatabase()
  const [searchQuery, setSearchQuery] = useState("")
  const [recentSearches, setRecentSearches] = useState<string[]>([])
  const [filteredVehicles, setFilteredVehicles] = useState(vehicles)

useEffect(() => {
    loadRecentSearches()
  }, [])

useEffect(() => {
    if (searchQuery.length >= 2) {
      const filtered = vehicles.filter(
        (vehicle) =>
          vehicle.immatriculation.toLowerCase().includes(searchQuery.toLowerCase()) ||
          vehicle.gerant_societe?.toLowerCase().includes(searchQuery.toLowerCase()) ||
          vehicle.destination?.toLowerCase().includes(searchQuery.toLowerCase()) ||
          vehicle.numero_dossier?.toLowerCase().includes(searchQuery.toLowerCase()),
      )
      setFilteredVehicles(filtered)

// Sauvegarder la recherche
      saveRecentSearch(searchQuery)
    } else {
      setFilteredVehicles([])
    }
  }, [searchQuery, vehicles])

const loadRecentSearches = async () => {
    try {
      const saved = await AsyncStorage.getItem("recentSearches")
      if (saved) {
        setRecentSearches(JSON.parse(saved))
      }
    } catch (error) {
      console.error("Erreur lors du chargement des recherches récentes:", error)
    }
  }

const saveRecentSearch = async (query: string) => {
    try {
      if (query.length >= 2 && !recentSearches.includes(query)) {
        const newRecent = [query, ...recentSearches.slice(0, 4)]
        setRecentSearches(newRecent)
        await AsyncStorage.setItem("recentSearches", JSON.stringify(newRecent))
      }
    } catch (error) {
      console.error("Erreur lors de la sauvegarde:", error)
    }
  }

const clearRecentSearches = async () => {
    try {
      setRecentSearches([])
      await AsyncStorage.removeItem("recentSearches")
    } catch (error) {
      console.error("Erreur lors de la suppression:", error)
    }
  }

const handleRecentSearch = (query: string) => {
    setSearchQuery(query)
  }

return (
    <View style={styles.container}>
      <View style={styles.searchContainer}>
        <Searchbar
          placeholder="Rechercher par immatriculation, gérant..."
          onChangeText={setSearchQuery}
          value={searchQuery}
          style={styles.searchbar}
          iconColor="#2563eb"
          autoFocus
        />
      </View>

<ScrollView style={styles.scrollView}>
        {/* Recherches récentes */}
        {!searchQuery && recentSearches.length > 0 && (
          <Card style={styles.recentCard}>
            <Card.Content>
              <View style={styles.recentHeader}>
                <Text style={styles.sectionTitle}>Recherches récentes</Text>
                <TouchableOpacity onPress={clearRecentSearches}>
                  <Text style={styles.clearButton}>Effacer</Text>
                </TouchableOpacity>
              </View>
              <View style={styles.chipsContainer}>
                {recentSearches.map((search, index) => (
                  <Chip key={index} onPress={() => handleRecentSearch(search)} style={styles.chip} icon="clock-outline">
                    {search}
                  </Chip>
                ))}
              </View>
            </Card.Content>
          </Card>
        )}

{/* Suggestions de recherche */}
        {!searchQuery && recentSearches.length === 0 && (
          <Card style={styles.suggestionsCard}>
            <Card.Content>
              <View style={styles.suggestionsHeader}>
                <Ionicons name="search" size={48} color="#9ca3af" />
                <Text style={styles.suggestionsTitle}>Recherche rapide</Text>
                <Text style={styles.suggestionsText}>Tapez au moins 2 caractères pour commencer</Text>
              </View>
              <View style={styles.suggestionsTypes}>
                <Text style={styles.suggestionsLabel}>Vous pouvez rechercher par :</Text>
                <View style={styles.chipsContainer}>
                  <Chip style={styles.suggestionChip}>Immatriculation</Chip>
                  <Chip style={styles.suggestionChip}>Gérant</Chip>
                  <Chip style={styles.suggestionChip}>Destination</Chip>
                  <Chip style={styles.suggestionChip}>N° Dossier</Chip>
                </View>
              </View>
            </Card.Content>
          </Card>
        )}

{/* Résultats de recherche */}
        {searchQuery && (
          <View style={styles.resultsContainer}>
            <Text style={styles.resultsTitle}>
              {filteredVehicles.length} résultat(s) pour "{searchQuery}"
            </Text>

{filteredVehicles.length === 0 ? (
              <Card style={styles.noResultsCard}>
                <Card.Content style={styles.noResultsContent}>
                  <Ionicons name="search" size={48} color="#9ca3af" />
                  <Text style={styles.noResultsTitle}>Aucun résultat</Text>
                  <Text style={styles.noResultsText}>Aucun autocar ne correspond à "{searchQuery}"</Text>
                </Card.Content>
              </Card>
            ) : (
              <View style={styles.vehiclesList}>
                {filteredVehicles.map((vehicle) => (
                  <VehicleCard
                    key={vehicle.id}
                    vehicle={vehicle}
                    onPress={() => router.push(`/vehicle/${vehicle.id}`)}
                  />
                ))}
              </View>
            )}
          </View>
        )}
      </ScrollView>
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#f8fafc",
  },
  searchContainer: {
    backgroundColor: "#2563eb",
    padding: 16,
    paddingTop: 8,
  },
  searchbar: {
    elevation: 4,
  },
  scrollView: {
    flex: 1,
  },
  recentCard: {
    margin: 16,
  },
  recentHeader: {
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
    marginBottom: 12,
  },
  sectionTitle: {
    fontSize: 16,
    fontWeight: "bold",
    color: "#1f2937",
  },
  clearButton: {
    color: "#2563eb",
    fontSize: 14,
  },
  chipsContainer: {
    flexDirection: "row",
    flexWrap: "wrap",
    gap: 8,
  },
  chip: {
    backgroundColor: "#e5e7eb",
  },
  suggestionsCard: {
    margin: 16,
  },
  suggestionsHeader: {
    alignItems: "center",
    marginBottom: 20,
  },
  suggestionsTitle: {
    fontSize: 18,
    fontWeight: "bold",
    color: "#1f2937",
    marginTop: 12,
    marginBottom: 8,
  },
  suggestionsText: {
    color: "#6b7280",
    textAlign: "center",
  },
  suggestionsTypes: {
    alignItems: "center",
  },
  suggestionsLabel: {
    fontSize: 12,
    color: "#9ca3af",
    marginBottom: 8,
  },
  suggestionChip: {
    backgroundColor: "#f3f4f6",
  },
  resultsContainer: {
    padding: 16,
  },
  resultsTitle: {
    fontSize: 16,
    fontWeight: "bold",
    color: "#1f2937",
    marginBottom: 16,
  },
  noResultsCard: {
    marginTop: 20,
  },
  noResultsContent: {
    alignItems: "center",
    paddingVertical: 32,
  },
  noResultsTitle: {
    fontSize: 18,
    fontWeight: "bold",
    color: "#1f2937",
    marginTop: 12,
    marginBottom: 8,
  },
  noResultsText: {
    color: "#6b7280",
    textAlign: "center",
  },
  vehiclesList: {
    gap: 12,
  },
})
[V0_FILE]typescript:file="app/(tabs)/scan.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { View, Text, StyleSheet, Alert } from "react-native"
import { BarCodeScanner } from "expo-barcode-scanner"
import { Button, Card } from "react-native-paper"
import { Ionicons } from "@expo/vector-icons"
import { router } from "expo-router"

export default function ScanScreen() {
  const [hasPermission, setHasPermission] = useState<boolean | null>(null)
  const [scanned, setScanned] = useState(false)

useEffect(() => {
    const getBarCodeScannerPermissions = async () => {
      const { status } = await BarCodeScanner.requestPermissionsAsync()
      setHasPermission(status === "granted")
    }

getBarCodeScannerPermissions()
  }, [])

const handleBarCodeScanned = ({ type, data }: { type: string; data: string }) => {
    setScanned(true)

// Analyser le QR code pour extraire l'ID du véhicule
    try {
      // Supposons que le QR code contient l'ID du véhicule ou l'immatriculation
      const vehicleId = data

Alert.alert("QR Code scanné", `Véhicule détecté: ${data}`, [
        {
          text: "Annuler",
          onPress: () => setScanned(false),
          style: "cancel",
        },
        {
          text: "Voir détails",
          onPress: () => router.push(`/vehicle/${vehicleId}`),
        },
        {
          text: "Contrôler",
          onPress: () => router.push(`/inspection/${vehicleId}`),
        },
      ])
    } catch (error) {
      Alert.alert("Erreur", "QR code non reconnu", [
        {
          text: "OK",
          onPress: () => setScanned(false),
        },
      ])
    }
  }

if (hasPermission === null) {
    return (
      <View style={styles.container}>
        <Card style={styles.permissionCard}>
          <Card.Content style={styles.permissionContent}>
            <Ionicons name="camera" size={48} color="#9ca3af" />
            <Text style={styles.permissionText}>Demande d'autorisation pour utiliser la caméra...</Text>
          </Card.Content>
        </Card>
      </View>
    )
  }

if (hasPermission === false) {
    return (
      <View style={styles.container}>
        <Card style={styles.permissionCard}>
          <Card.Content style={styles.permissionContent}>
            <Ionicons name="camera-off" size={48} color="#ef4444" />
            <Text style={styles.permissionTitle}>Accès caméra refusé</Text>
            <Text style={styles.permissionText}>
              Veuillez autoriser l'accès à la caméra dans les paramètres pour scanner les QR codes.
            </Text>
            <Button
              mode="contained"
              onPress={() => BarCodeScanner.requestPermissionsAsync()}
              style={styles.permissionButton}
            >
              Demander l'autorisation
            </Button>
          </Card.Content>
        </Card>
      </View>
    )
  }

return (
    <View style={styles.container}>
      <BarCodeScanner onBarCodeScanned={scanned ? undefined : handleBarCodeScanned} style={styles.scanner} />

{/* Overlay avec instructions */}
      <View style={styles.overlay}>
        <View style={styles.scanArea}>
          <View style={styles.scanFrame} />
        </View>

<View style={styles.instructionsContainer}>
          <Card style={styles.instructionsCard}>
            <Card.Content>
              <Text style={styles.instructionsTitle}>Scanner le QR Code</Text>
              <Text style={styles.instructionsText}>Pointez la caméra vers le QR code du véhicule</Text>
            </Card.Content>
          </Card>
        </View>
      </View>

{/* Bouton pour rescanner */}
      {scanned && (
        <View style={styles.rescanContainer}>
          <Button mode="contained" onPress={() => setScanned(false)} style={styles.rescanButton} icon="refresh">
            Scanner à nouveau
          </Button>
        </View>
      )}
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#000",
  },
  scanner: {
    flex: 1,
  },
  overlay: {
    position: "absolute",
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    justifyContent: "center",
    alignItems: "center",
  },
  scanArea: {
    width: 250,
    height: 250,
    justifyContent: "center",
    alignItems: "center",
  },
  scanFrame: {
    width: 200,
    height: 200,
    borderWidth: 2,
    borderColor: "#2563eb",
    borderRadius: 12,
    backgroundColor: "transparent",
  },
  instructionsContainer: {
    position: "absolute",
    bottom: 100,
    left: 20,
    right: 20,
  },
  instructionsCard: {
    backgroundColor: "rgba(255, 255, 255, 0.9)",
  },
  instructionsTitle: {
    fontSize: 18,
    fontWeight: "bold",
    textAlign: "center",
    marginBottom: 8,
    color: "#1f2937",
  },
  instructionsText: {
    textAlign: "center",
    color: "#6b7280",
  },
  rescanContainer: {
    position: "absolute",
    bottom: 30,
    left: 20,
    right: 20,
  },
  rescanButton: {
    backgroundColor: "#2563eb",
  },
  permissionCard: {
    margin: 20,
  },
  permissionContent: {
    alignItems: "center",
    paddingVertical: 40,
  },
  permissionTitle: {
    fontSize: 18,
    fontWeight: "bold",
    color: "#1f2937",
    marginTop: 16,
    marginBottom: 8,
  },
  permissionText: {
    textAlign: "center",
    color: "#6b7280",
    marginBottom: 20,
  },
  permissionButton: {
    marginTop: 16,
  },
})
[V0_FILE]typescript:file="components/VehicleCard.tsx" isMerged="true"
import { View, Text, StyleSheet, TouchableOpacity, Image } from "react-native"
import { Card, Badge, Button } from "react-native-paper"
import { Ionicons } from "@expo/vector-icons"

interface Vehicle {
  id: string
  immatriculation: string
  gerant_societe?: string
  destination?: string
  nombre_places: number
  statut: "conforme" | "non-conforme" | "a-controler"
  photo_url?: string
  documents_expires: number
  documents_alertes: number
  documents_valides: number
}

interface VehicleCardProps {
  vehicle: Vehicle
  onPress: () => void
}

export function VehicleCard({ vehicle, onPress }: VehicleCardProps) {
  const getStatusColor = (status: string) => {
    switch (status) {
      case "conforme":
        return "#10b981"
      case "non-conforme":
        return "#ef4444"
      case "a-controler":
        return "#f59e0b"
      default:
        return "#6b7280"
    }
  }

const getStatusText = (status: string) => {
    switch (status) {
      case "conforme":
        return "Conforme"
      case "non-conforme":
        return "Non Conforme"
      case "a-controler":
        return "À Contrôler"
      default:
        return "Inconnu"
    }
  }

const getStatusIcon = (status: string) => {
    switch (status) {
      case "conforme":
        return "checkmark-circle"
      case "non-conforme":
        return "close-circle"
      case "a-controler":
        return "time"
      default:
        return "help-circle"
    }
  }

return (
    <TouchableOpacity onPress={onPress} activeOpacity={0.7}>
      <Card style={styles.card}>
        <Card.Content style={styles.content}>
          {/* Header avec immatriculation et statut */}
          <View style={styles.header}>
            <View style={styles.titleContainer}>
              <Text style={styles.immatriculation}>{vehicle.immatriculation}</Text>
              <Text style={styles.gerant}>{vehicle.gerant_societe}</Text>
            </View>
            <View style={[styles.statusBadge, { backgroundColor: getStatusColor(vehicle.statut) }]}>
              <Ionicons name={getStatusIcon(vehicle.statut)} size={16} color="white" />
              <Text style={styles.statusText}>{getStatusText(vehicle.statut)}</Text>
            </View>
          </View>

{/* Image du véhicule */}
          <Image
            source={{
              uri: vehicle.photo_url || "https://via.placeholder.com/300x150/e5e7eb/9ca3af?text=Autocar",
            }}
            style={styles.vehicleImage}
            resizeMode="cover"
          />

{/* Informations principales */}
          <View style={styles.infoContainer}>
            <View style={styles.infoRow}>
              <Ionicons name="location" size={16} color="#6b7280" />
              <Text style={styles.infoText}>{vehicle.destination || "N/A"}</Text>
            </View>
            <View style={styles.infoRow}>
              <Ionicons name="people" size={16} color="#6b7280" />
              <Text style={styles.infoText}>{vehicle.nombre_places} places</Text>
            </View>
          </View>

{/* État des documents */}
          <View style={styles.documentsContainer}>
            <Text style={styles.documentsTitle}>Documents:</Text>
            <View style={styles.documentsBadges}>
              {vehicle.documents_valides > 0 && (
                <Badge style={[styles.documentBadge, { backgroundColor: "#10b981" }]}>
                  {vehicle.documents_valides}✓
                </Badge>
              )}
              {vehicle.documents_alertes > 0 && (
                <Badge style={[styles.documentBadge, { backgroundColor: "#f59e0b" }]}>
                  {vehicle.documents_alertes}⚠
                </Badge>
              )}
              {vehicle.documents_expires > 0 && (
                <Badge style={[styles.documentBadge, { backgroundColor: "#ef4444" }]}>
                  {vehicle.documents_expires}✗
                </Badge>
              )}
            </View>
          </View>

{/* Actions */}
          <View style={styles.actionsContainer}>
            <Button mode="outlined" onPress={onPress} style={styles.actionButton} compact>
              Détails
            </Button>
            <Button
              mode="contained"
              onPress={() => {
                /* Navigation vers contrôle */
              }}
              style={[styles.actionButton, { backgroundColor: "#2563eb" }]}
              compact
            >
              Contrôler
            </Button>
          </View>
        </Card.Content>
      </Card>
    </TouchableOpacity>
  )
}

const styles = StyleSheet.create({
  card: {
    marginBottom: 12,
    elevation: 2,
  },
  content: {
    padding: 16,
  },
  header: {
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "flex-start",
    marginBottom: 12,
  },
  titleContainer: {
    flex: 1,
  },
  immatriculation: {
    fontSize: 18,
    fontWeight: "bold",
    color: "#1f2937",
  },
  gerant: {
    fontSize: 14,
    color: "#6b7280",
    marginTop: 2,
  },
  statusBadge: {
    flexDirection: "row",
    alignItems: "center",
    paddingHorizontal: 8,
    paddingVertical: 4,
    borderRadius: 12,
    gap: 4,
  },
  statusText: {
    color: "white",
    fontSize: 12,
    fontWeight: "bold",
  },
  vehicleImage: {
    width: "100%",
    height: 120,
    borderRadius: 8,
    marginBottom: 12,
  },
  infoContainer: {
    marginBottom: 12,
  },
  infoRow: {
    flexDirection: "row",
    alignItems: "center",
    gap: 8,
    marginBottom: 4,
  },
  infoText: {
    fontSize: 14,
    color: "#4b5563",
  },
  documentsContainer: {
    marginBottom: 16,
  },
  documentsTitle: {
    fontSize: 14,
    fontWeight: "600",
    color: "#374151",
    marginBottom: 6,
  },
  documentsBadges: {
    flexDirection: "row",
    gap: 6,
  },
  documentBadge: {
    color: "white",
    fontSize: 12,
  },
  actionsContainer: {
    flexDirection: "row",
    gap: 8,
  },
  actionButton: {
    flex: 1,
  },
})
[V0_FILE]typescript:file="components/StatsCard.tsx" isMerged="true"
import { View, Text, StyleSheet, Dimensions } from "react-native"
import { Card } from "react-native-paper"
import { Ionicons } from "@expo/vector-icons"

const { width } = Dimensions.get("window")
const cardWidth = (width - 48) / 2 // 2 cartes par ligne avec marges

interface StatsCardProps {
  title: string
  value: number
  icon: keyof typeof Ionicons.glyphMap
  color: string
}

export function StatsCard({ title, value, icon, color }: StatsCardProps) {
  return (
    <Card style={[styles.card, { width: cardWidth }]}>
      <Card.Content style={styles.content}>
        <View style={[styles.iconContainer, { backgroundColor: `${color}20` }]}>
          <Ionicons name={icon} size={24} color={color} />
        </View>
        <View style={styles.textContainer}>
          <Text style={styles.title}>{title}</Text>
          <Text style={[styles.value, { color }]}>{value}</Text>
        </View>
      </Card.Content>
    </Card>
  )
}

const styles = StyleSheet.create({
  card: {
    elevation: 2,
  },
  content: {
    flexDirection: "row",
    alignItems: "center",
    padding: 12,
  },
  iconContainer: {
    width: 48,
    height: 48,
    borderRadius: 24,
    justifyContent: "center",
    alignItems: "center",
    marginRight: 12,
  },
  textContainer: {
    flex: 1,
  },
  title: {
    fontSize: 12,
    color: "#6b7280",
    marginBottom: 2,
  },
  value: {
    fontSize: 24,
    fontWeight: "bold",
  },
})
[V0_FILE]typescript:file="contexts/DatabaseContext.tsx" isMerged="true"
"use client"

import type React from "react"
import { createContext, useContext, useState, useEffect } from "react"
import { createClient } from "@supabase/supabase-js"
import AsyncStorage from "@react-native-async-storage/async-storage"

// Configuration Supabase
const supabaseUrl = "YOUR_SUPABASE_URL"
const supabaseAnonKey = "YOUR_SUPABASE_ANON_KEY"

const supabase = createClient(supabaseUrl, supabaseAnonKey)

interface Vehicle {
  id: string
  immatriculation: string
  gerant_societe?: string
  destination?: string
  nombre_places: number
  statut: "conforme" | "non-conforme" | "a-controler"
  photo_url?: string
  numero_dossier?: string
  documents_expires: number
  documents_alertes: number
  documents_valides: number
}

interface Stats {
  totalVehicles: number
  conformes: number
  nonConformes: number
  aControler: number
  documentsExpires: number
  alertes: number
}

interface DatabaseContextType {
  vehicles: Vehicle[]
  stats: Stats
  loading: boolean
  refreshData: () => Promise<void>
  getVehicleById: (id: string) => Vehicle | undefined
}

const DatabaseContext = createContext<DatabaseContextType | undefined>(undefined)

export function DatabaseProvider({ children }: { children: React.ReactNode }) {
  const [vehicles, setVehicles] = useState<Vehicle[]>([])
  const [stats, setStats] = useState<Stats>({
    totalVehicles: 0,
    conformes: 0,
    nonConformes: 0,
    aControler: 0,
    documentsExpires: 0,
    alertes: 0,
  })
  const [loading, setLoading] = useState(true)

useEffect(() => {
    loadData()
  }, [])

const loadData = async () => {
    try {
      setLoading(true)

// Charger depuis le cache local d'abord
      await loadFromCache()

// Puis charger depuis Supabase
      await loadFromSupabase()
    } catch (error) {
      console.error("Erreur lors du chargement des données:", error)
    } finally {
      setLoading(false)
    }
  }

const loadFromCache = async () => {
    try {
      const cachedVehicles = await AsyncStorage.getItem("vehicles")
      const cachedStats = await AsyncStorage.getItem("stats")

if (cachedVehicles) {
        setVehicles(JSON.parse(cachedVehicles))
      }

if (cachedStats) {
        setStats(JSON.parse(cachedStats))
      }
    } catch (error) {
      console.error("Erreur lors du chargement du cache:", error)
    }
  }

const loadFromSupabase = async () => {
    try {
      // Charger les véhicules avec leurs statistiques de documents
      const { data: vehiclesData, error: vehiclesError } = await supabase
        .from("vue_vehicules_complets")
        .select("*")
        .order("created_at", { ascending: false })

if (vehiclesError) throw vehiclesError

// Charger les statistiques globales
      const { data: statsData, error: statsError } = await supabase.from("vue_statistiques").select("*").single()

if (statsError) throw statsError

const processedVehicles = vehiclesData || []
      const processedStats = {
        totalVehicles: statsData?.total_vehicules || 0,
        conformes: statsData?.vehicules_conformes || 0,
        nonConformes: statsData?.vehicules_non_conformes || 0,
        aControler: statsData?.vehicules_a_controler || 0,
        documentsExpires: statsData?.documents_expires || 0,
        alertes: statsData?.documents_alertes || 0,
      }

setVehicles(processedVehicles)
      setStats(processedStats)

// Sauvegarder en cache
      await AsyncStorage.setItem("vehicles", JSON.stringify(processedVehicles))
      await AsyncStorage.setItem("stats", JSON.stringify(processedStats))
      await AsyncStorage.setItem("lastSync", new Date().toISOString())
    } catch (error) {
      console.error("Erreur lors du chargement depuis Supabase:", error)
    }
  }

const refreshData = async () => {
    await loadFromSupabase()
  }

const getVehicleById = (id: string) => {
    return vehicles.find((vehicle) => vehicle.id === id)
  }

const value = {
    vehicles,
    stats,
    loading,
    refreshData,
    getVehicleById,
  }

return <DatabaseContext.Provider value={value}>{children}</DatabaseContext.Provider>
}

export function useDatabase() {
  const context = useContext(DatabaseContext)
  if (context === undefined) {
    throw new Error("useDatabase must be used within a DatabaseProvider")
  }
  return context
}
[V0_FILE]typescript:file="constants/theme.ts" isMerged="true"
import { MD3LightTheme } from "react-native-paper"

export const theme = {
  ...MD3LightTheme,
  colors: {
    ...MD3LightTheme.colors,
    primary: "#2563eb",
    primaryContainer: "#dbeafe",
    secondary: "#10b981",
    secondaryContainer: "#d1fae5",
    tertiary: "#f59e0b",
    tertiaryContainer: "#fef3c7",
    error: "#ef4444",
    errorContainer: "#fee2e2",
    background: "#f8fafc",
    surface: "#ffffff",
    surfaceVariant: "#f1f5f9",
    onPrimary: "#ffffff",
    onSecondary: "#ffffff",
    onTertiary: "#ffffff",
    onError: "#ffffff",
    onBackground: "#1f2937",
    onSurface: "#1f2937",
    onSurfaceVariant: "#6b7280",
  },
}
[V0_FILE]shellscript:file="scripts/setup-mobile.sh" isMerged="true"
#!/bin/bash

echo "🚌 Configuration de l'application mobile Gestion des Autocars..."

# Vérifier si Node.js est installé
if ! command -v node &> /dev/null; then
    echo "❌ Node.js n'est pas installé. Veuillez l'installer depuis https://nodejs.org/"
    exit 1
fi

# Vérifier si Expo CLI est installé
if ! command -v expo &> /dev/null; then
    echo "📱 Installation d'Expo CLI..."
    npm install -g @expo/cli
fi

echo "✅ Expo CLI installé"

# Installer les dépendances
echo "📦 Installation des dépendances..."
npm install

# Créer le fichier de configuration
if [ ! -f .env ]; then
    echo "🔧 Création du fichier de configuration..."
    cat > .env << EOL
# Configuration Supabase
EXPO_PUBLIC_SUPABASE_URL=your_supabase_url_here
EXPO_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key_here

# Configuration de l'application
EXPO_PUBLIC_APP_NAME="Gestion des Autocars"
EXPO_PUBLIC_APP_VERSION="1.0.0"
EOL
    echo "⚠️  Veuillez configurer vos clés Supabase dans le fichier .env"
fi

echo "✅ Configuration terminée !"
echo ""
echo "🚀 Pour démarrer l'application :"
echo "   expo start"
echo ""
echo "📱 Pour tester sur votre téléphone :"
echo "   1. Installer l'app Expo Go sur votre téléphone"
echo "   2. Scanner le QR code affiché"
echo ""
echo "🏗️  Pour construire l'application :"
echo "   expo build:android  # Pour Android"
echo "   expo build:ios      # Pour iOS"
[V0_FILE]markdown:file="README-MOBILE.md" isMerged="true"
# 📱 Gestion des Autocars - Application Mobile Native

Application mobile native développée avec React Native et Expo pour la gestion et le contrôle des autocars.

## 🚀 Installation Rapide

### Prérequis
- Node.js 18+
- Expo CLI
- Expo Go app sur votre téléphone

### Installation
\`\`\`bash
# Cloner le projet
git clone <repository-url>
cd bus-management-mobile

# Rendre le script exécutable
chmod +x scripts/setup-mobile.sh

# Exécuter l'installation
./scripts/setup-mobile.sh

# Démarrer l'application
expo start
\`\`\`

## 📱 Test sur Téléphone

### Méthode 1: Expo Go (Développement)
1. **Installer Expo Go** sur votre téléphone
2. **Démarrer** l'application : `expo start`
3. **Scanner le QR code** avec Expo Go
4. **L'app se lance** automatiquement

### Méthode 2: Build Native
\`\`\`bash
# Android
expo build:android

# iOS (nécessite un compte développeur Apple)
expo build:ios
\`\`\`

## 🎯 Fonctionnalités Mobile

### ✅ Fonctionnalités Implémentées
- **Interface native** optimisée mobile
- **Navigation par onglets** intuitive
- **Scanner QR Code** intégré
- **Recherche intelligente** avec historique
- **Gestion hors-ligne** avec cache local
- **Notifications push** pour les alertes
- **Appareil photo** pour les photos véhicules
- **Signature tactile** pour les contrôles

### 📋 Écrans Principaux
1. **Accueil** - Dashboard avec statistiques
2. **Recherche** - Recherche avancée avec historique
3. **Scanner** - Scanner QR codes véhicules
4. **Alertes** - Notifications documents expirés
5. **Profil** - Paramètres utilisateur

### 🔧 Fonctionnalités Techniques
- **Cache local** avec AsyncStorage
- **Synchronisation** avec Supabase
- **Mode hors-ligne** partiel
- **Optimisations performances** mobile
- **Gestion des permissions** caméra/localisation

## 🏗️ Architecture

### Structure du Projet
\`\`\`
app/
├── (tabs)/           # Navigation par onglets
│   ├── index.tsx     # Écran d'accueil
│   ├── search.tsx    # Recherche
│   ├── scan.tsx      # Scanner QR
│   ├── alerts.tsx    # Alertes
│   └── profile.tsx   # Profil
├── vehicle/[id].tsx  # Détails véhicule
├── inspection/[id].tsx # Contrôle technique
└── _layout.tsx       # Layout principal

components/
├── VehicleCard.tsx   # Carte véhicule
├── StatsCard.tsx     # Carte statistique
└── LoadingSpinner.tsx # Indicateur chargement

contexts/
├── AuthContext.tsx   # Authentification
└── DatabaseContext.tsx # Base de données
\`\`\`

## 🔧 Configuration

### Variables d'Environnement
\`\`\`env
EXPO_PUBLIC_SUPABASE_URL=https://your-project.supabase.co
EXPO_PUBLIC_SUPABASE_ANON_KEY=your-anon-key
\`\`\`

### Permissions Requises
- **Caméra** : Scanner QR codes, photos véhicules
- **Localisation** : Géolocalisation des contrôles
- **Stockage** : Cache local des données

## 📦 Déploiement

### Google Play Store (Android)
\`\`\`bash
# Construire l'APK
expo build:android --type apk

# Ou construire l'AAB pour le Play Store
expo build:android --type app-bundle
\`\`\`

### Apple App Store (iOS)
\`\`\`bash
# Nécessite un compte développeur Apple
expo build:ios
\`\`\`

### Distribution Interne
\`\`\`bash
# Générer un lien de partage
expo publish

# Ou créer un APK pour distribution directe
expo build:android --type apk
\`\`\`

## 🛠️ Développement

### Commandes Utiles
\`\`\`bash
# Démarrer en mode développement
expo start

# Démarrer sur Android
expo start --android

# Démarrer sur iOS
expo start --ios

# Nettoyer le cache
expo start --clear

# Voir les logs
expo logs
\`\`\`

### Debug
- **Expo DevTools** : Interface web de debug
- **React Native Debugger** : Debug avancé
- **Flipper** : Debug natif (après eject)

## 📱 Optimisations Mobile

### Performances
- **Lazy loading** des images
- **Pagination** des listes
- **Cache intelligent** des données
- **Optimisation** des re-renders

### UX Mobile
- **Animations fluides** avec Reanimated
- **Gestes tactiles** intuitifs
- **Feedback haptique** sur interactions
- **Interface adaptative** selon la taille d'écran

## 🔒 Sécurité

- **Authentification** sécurisée
- **Chiffrement** des données sensibles
- **Validation** côté client et serveur
- **Gestion des permissions** appropriée

## 📞 Support

Pour toute question :
- 📧 **Email** : support@gestion-autocars.ma
- 📱 **Téléphone** : +212 6 XX XX XX XX
- 🌐 **Documentation** : docs.gestion-autocars.ma

## 📄 Licence

import { useState, useEffect } from "react"
import { useParams } from "next/navigation"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Checkbox } from "@/components/ui/checkbox"
import { Textarea } from "@/components/ui/textarea"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Badge } from "@/components/ui/badge"
import { ArrowLeft, Bus, CheckCircle, AlertTriangle, Download, Save, Loader2 } from "lucide-react"
import Link from "next/link"
import { useRouter } from "next/navigation"
import { controleQueries, vehiculeQueries } from "@/lib/supabase"

interface InspectionData {
  vehicleInfo: {
    immatriculation: string
    numeroSerie: string
    nombreSiegesAutorises: number
    dossier: string
    numeroAutorisation: string
    gerantAutorisation: string
    ligneAutorisee: string
    destination: string
    horaire: string
    gerant: string
    conducteur: string
    numeroPermisConduire: string
    carteConduireProfessionnel: string
  }
  controleDocuments: {
    transport: {
      carteAutorisation: { disponible: boolean; validite: boolean; dateExpiration: string }
      carteItineraire: { disponible: boolean; validite: boolean; dateExpiration: string }
      autorisationExceptionnelle: { disponible: boolean; validite: boolean; dateExpiration: string }
      carnetMetrologique: { disponible: boolean; validite: boolean; dateExpiration: string; numeroSerie: string }
      permisConduire: { disponible: boolean; validite: boolean; dateExpiration: string }
    }
    circulation: {
      certificatImmatriculation: { disponible: boolean; validite: boolean; dateExpiration: string }
      attestationAssurance: { disponible: boolean; validite: boolean; dateExpiration: string }
      certificatControleTechnique: { disponible: boolean; validite: boolean; dateExpiration: string }
      visiteMedicale: { disponible: boolean; validite: boolean; dateExpiration: string }
      carteConduireProfessionnel: {
        disponible: boolean
        validite: boolean
        dateExpiration: string
        optionnelle: boolean
      }
    }
  }
  etatInterieur: {
    nombreSiegesInstalle: number
    nombreVoyageurs: number
    proprete: "propre" | "non-propre"
    etatSieges: "bon" | "moyen" | "deteriore"
  }
  controleMecanique: {
    pneus: {
      avant: { references: string; profondeur: string }
      droit: { references: string; profondeur: string }
      gauche: { references: string; profondeur: string }
      interieurArriere: { profondeur: string }
      exterieurArriere: { references: string; profondeur: string }
      secours: { manquant: boolean; profondeur: string }
    }
    chronotachygraphe: { disponible: boolean; fonctionnel: boolean; conforme: boolean; numeroSerie?: string }
    pareChocs: { etat: "bon" | "mauvais" }
    retroviseurs: { fonctionnel: boolean }
    essuieGlaces: { fonctionnel: boolean }
    feux: {
      route: { fonctionnel: boolean }
      croisement: { fonctionnel: boolean }
      indicateurs: { fonctionnel: boolean }
      stop: { fonctionnel: boolean }
      marcheArriere: { fonctionnel: boolean }
      gabarit: { fonctionnel: boolean }
    }
    extincteurs: {
      extincteur1: { disponible: boolean; capacite: string; validite: boolean }
      extincteur2: { disponible: boolean; capacite: string; validite: boolean }
    }
  }
  observations: string
  signature: string
  dateHeure: string
  agent: string
  statut: "conforme" | "non-conforme"
}

export default function InspectionForm() {
  const params = useParams()
  const router = useRouter()
  const [inspectionData, setInspectionData] = useState<InspectionData>({
    vehicleInfo: {
      immatriculation: "",
      numeroSerie: "",
      nombreSiegesAutorises: 0,
      dossier: "",
      numeroAutorisation: "",
      gerantAutorisation: "",
      ligneAutorisee: "",
      destination: "",
      horaire: "",
      gerant: "",
      conducteur: "",
      numeroPermisConduire: "",
      carteConduireProfessionnel: "",
    },
    controleDocuments: {
      transport: {
        carteAutorisation: { disponible: false, validite: false, dateExpiration: "" },
        carteItineraire: { disponible: false, validite: false, dateExpiration: "" },
        autorisationExceptionnelle: { disponible: false, validite: false, dateExpiration: "" },
        carnetMetrologique: { disponible: false, validite: false, dateExpiration: "", numeroSerie: "" },
        permisConduire: { disponible: false, validite: false, dateExpiration: "" },
      },
      circulation: {
        certificatImmatriculation: { disponible: false, validite: false, dateExpiration: "" },
        attestationAssurance: { disponible: false, validite: false, dateExpiration: "" },
        certificatControleTechnique: { disponible: false, validite: false, dateExpiration: "" },
        visiteMedicale: { disponible: false, validite: false, dateExpiration: "" },
        carteConduireProfessionnel: { disponible: false, validite: false, dateExpiration: "", optionnelle: true },
      },
    },
    etatInterieur: {
      nombreSiegesInstalle: 0,
      nombreVoyageurs: 0,
      proprete: "propre",
      etatSieges: "bon",
    },
    controleMecanique: {
      pneus: {
        avant: { references: "", profondeur: "" },
        droit: { references: "", profondeur: "" },
        gauche: { references: "", profondeur: "" },
        interieurArriere: { profondeur: "" },
        exterieurArriere: { references: "", profondeur: "" },
        secours: { manquant: false, profondeur: "" },
      },
      chronotachygraphe: { disponible: false, fonctionnel: false, conforme: false, numeroSerie: "" },
      pareChocs: { etat: "bon" },
      retroviseurs: { fonctionnel: false },
      essuieGlaces: { fonctionnel: false },
      feux: {
        route: { fonctionnel: false },
        croisement: { fonctionnel: false },
        indicateurs: { fonctionnel: false },
        stop: { fonctionnel: false },
        marcheArriere: { fonctionnel: false },
        gabarit: { fonctionnel: false },
      },
      extincteurs: {
        extincteur1: { disponible: false, capacite: "", validite: false },
        extincteur2: { disponible: false, capacite: "", validite: false },
      },
    },
    observations: "",
    signature: "",
    dateHeure: new Date().toISOString().slice(0, 16),
    agent: "Agent de contrôle",
    statut: "conforme",
  })

const [currentStep, setCurrentStep] = useState(0)
  const [isGeneratingPDF, setIsGeneratingPDF] = useState(false)
  const [isSaving, setIsSaving] = useState(false)
  const [saveSuccess, setSaveSuccess] = useState(false)

useEffect(() => {
    // Charger les données du véhicule
    const mockVehicleData = {
      immatriculation: "123456-A-12",
      numeroSerie: "MB-2024-001",
      nombreSiegesAutorises: 45,
      dossier: "DOS-2024-001",
      numeroAutorisation: "AUT-001",
      gerantAutorisation: "Ahmed Benali",
      ligneAutorisee: "Casablanca - Rabat",
      destination: "Casablanca - Rabat",
      horaire: "08:00 - 18:00",
      gerant: "Transport Maghreb SARL",
      conducteur: "Mohamed Alami",
      numeroPermisConduire: "PC123456789",
      carteConduireProfessionnel: "CCP987654321",
    }

setInspectionData((prev) => ({
      ...prev,
      vehicleInfo: mockVehicleData,
    }))
  }, [params.id])

const steps = ["Informations Véhicule", "Contrôle Documents", "État Intérieur", "Contrôle Mécanique", "Finalisation"]

const saveInspection = async () => {
    setIsSaving(true)
    setSaveSuccess(false)

try {
      // Calculer le statut final
      const finalStatus = calculateStatus()

// Préparer les données pour la base de données
      const controleData = {
        vehicule_id: params.id as string,
        agent_id: "550e8400-e29b-41d4-a716-446655440001", // ID de l'agent connecté
        date_controle: new Date(inspectionData.dateHeure).toISOString(),
        statut: finalStatus,

// État intérieur
        nombre_sieges_installes: inspectionData.etatInterieur.nombreSiegesInstalle,
        nombre_voyageurs: inspectionData.etatInterieur.nombreVoyageurs,
        proprete: inspectionData.etatInterieur.proprete,
        etat_sieges: inspectionData.etatInterieur.etatSieges,

// Contrôle mécanique
        pneus_avant_references: inspectionData.controleMecanique.pneus.avant.references,
        pneus_avant_profondeur: inspectionData.controleMecanique.pneus.avant.profondeur,
        chronotachygraphe_disponible: inspectionData.controleMecanique.chronotachygraphe.disponible,
        chronotachygraphe_fonctionnel: inspectionData.controleMecanique.chronotachygraphe.fonctionnel,
        chronotachygraphe_conforme: inspectionData.controleMecanique.chronotachygraphe.conforme,
        chronotachygraphe_numero_serie: inspectionData.controleMecanique.chronotachygraphe.numeroSerie,
        pare_chocs_etat: inspectionData.controleMecanique.pareChocs.etat,
        retroviseurs_fonctionnel: inspectionData.controleMecanique.retroviseurs.fonctionnel,
        essuie_glaces_fonctionnel: inspectionData.controleMecanique.essuieGlaces.fonctionnel,

// Feux
        feux_route: inspectionData.controleMecanique.feux.route.fonctionnel,
        feux_croisement: inspectionData.controleMecanique.feux.croisement.fonctionnel,
        feux_indicateurs: inspectionData.controleMecanique.feux.indicateurs.fonctionnel,
        feux_stop: inspectionData.controleMecanique.feux.stop.fonctionnel,
        feux_marche_arriere: inspectionData.controleMecanique.feux.marcheArriere.fonctionnel,
        feux_gabarit: inspectionData.controleMecanique.feux.gabarit.fonctionnel,

// Extincteurs
        extincteur1_disponible: inspectionData.controleMecanique.extincteurs.extincteur1.disponible,
        extincteur1_capacite: inspectionData.controleMecanique.extincteurs.extincteur1.capacite,
        extincteur1_validite: inspectionData.controleMecanique.extincteurs.extincteur1.validite,
        extincteur2_disponible: inspectionData.controleMecanique.extincteurs.extincteur2.disponible,
        extincteur2_capacite: inspectionData.controleMecanique.extincteurs.extincteur2.capacite,
        extincteur2_validite: inspectionData.controleMecanique.extincteurs.extincteur2.validite,

observations: inspectionData.observations,
        signature: inspectionData.signature,
      }

// Sauvegarder le contrôle principal
      const savedControle = await controleQueries.create(controleData)

// Sauvegarder les détails des documents contrôlés
      const documentsToSave = [
        // Documents de transport
        ...Object.entries(inspectionData.controleDocuments.transport).map(([key, doc]) => ({
          controle_id: savedControle.id,
          type_document: key,
          disponible: doc.disponible,
          validite: doc.validite,
          date_expiration: doc.dateExpiration || null,
          numero_serie: key === "carnetMetrologique" ? doc.numeroSerie : null,
        })),
        // Documents de circulation
        ...Object.entries(inspectionData.controleDocuments.circulation).map(([key, doc]) => ({
          controle_id: savedControle.id,
          type_document: key,
          disponible: doc.disponible,
          validite: doc.validite,
          date_expiration: doc.dateExpiration || null,
        })),
      ]

// Sauvegarder chaque document contrôlé
      for (const docData of documentsToSave) {
        await fetch("/api/controle-documents", {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify(docData),
        })
      }

// Mettre à jour le statut du véhicule
      await vehiculeQueries.update(params.id as string, {
        statut: finalStatus,
        date_dernier_controle: new Date().toISOString().split("T")[0],
        date_prochain_controle: new Date(Date.now() + 6 * 30 * 24 * 60 * 60 * 1000).toISOString().split("T")[0], // 6 mois
      })

setSaveSuccess(true)

// Afficher un message de succès
      setTimeout(() => {
        alert("✅ Contrôle enregistré avec succès !")
      }, 500)
    } catch (error) {
      console.error("Erreur lors de la sauvegarde:", error)
      alert("❌ Erreur lors de l'enregistrement du contrôle. Veuillez réessayer.")
    } finally {
      setIsSaving(false)
    }
  }

const generatePDF = async () => {
    setIsGeneratingPDF(true)

try {
      // Simulation de génération PDF
      await new Promise((resolve) => setTimeout(resolve, 2000))

// Créer le contenu du PDF (simulation)
      const pdfContent = `
FICHE DE CONTRÔLE TECHNIQUE
=============================

INFORMATIONS VÉHICULE:
- Immatriculation: ${inspectionData.vehicleInfo.immatriculation}
- Numéro de série: ${inspectionData.vehicleInfo.numeroSerie}
- Nombre de sièges: ${inspectionData.vehicleInfo.nombreSiegesAutorises}
- Dossier: ${inspectionData.vehicleInfo.dossier}
- Autorisation: ${inspectionData.vehicleInfo.numeroAutorisation}
- Gérant autorisation: ${inspectionData.vehicleInfo.gerantAutorisation}
- Destination: ${inspectionData.vehicleInfo.destination}
- Horaire: ${inspectionData.vehicleInfo.horaire}
- Conducteur: ${inspectionData.vehicleInfo.conducteur}
- Permis: ${inspectionData.vehicleInfo.numeroPermisConduire}

CONTRÔLE EFFECTUÉ LE: ${new Date(inspectionData.dateHeure).toLocaleString("fr-FR")}
AGENT: ${inspectionData.agent}
STATUT: ${calculateStatus().toUpperCase()}

OBSERVATIONS:
${inspectionData.observations || "Aucune observation particulière"}

SIGNATURE: ${inspectionData.signature}
      `

// Créer un blob avec le contenu
      const blob = new Blob([pdfContent], { type: "text/plain" })
      const url = URL.createObjectURL(blob)

// Créer un lien de téléchargement
      const link = document.createElement("a")
      link.href = url
      link.download = `controle-${inspectionData.vehicleInfo.immatriculation}-${new Date().toISOString().slice(0, 10)}.txt`
      document.body.appendChild(link)
      link.click()
      document.body.removeChild(link)

// Nettoyer l'URL
      URL.revokeObjectURL(url)

// Afficher un message de succès
      alert("Fiche de contrôle générée avec succès !")
    } catch (error) {
      console.error("Erreur lors de la génération du PDF:", error)
      alert("Erreur lors de la génération de la fiche de contrôle")
    } finally {
      setIsGeneratingPDF(false)
    }
  }

const calculateStatus = (): "conforme" | "non-conforme" => {
    // Vérifier les documents de transport (tous obligatoires)
    const documentsTransportOK = Object.values(inspectionData.controleDocuments.transport).every(
      (doc) => doc.disponible && doc.validite,
    )

// Vérifier les documents de circulation (carte conducteur professionnel optionnelle)
    const documentsCirculationOK = Object.entries(inspectionData.controleDocuments.circulation).every(([key, doc]) => {
      if (key === "carteConduireProfessionnel" && doc.optionnelle) {
        // Si le document est optionnel et non disponible, on l'ignore
        return !doc.disponible || (doc.disponible && doc.validite)
      }
      return doc.disponible && doc.validite
    })

const documentsOK = documentsTransportOK && documentsCirculationOK

const mecanicOK =
      inspectionData.controleMecanique.chronotachygraphe.conforme &&
      inspectionData.controleMecanique.pareChocs.etat === "bon" &&
      Object.values(inspectionData.controleMecanique.feux).every((feu) => feu.fonctionnel)

return documentsOK && mecanicOK ? "conforme" : "non-conforme"
  }

const renderStep = () => {
    switch (currentStep) {
      case 0:
        return (
          <Card>
            <CardHeader>
              <CardTitle>Informations du Véhicule</CardTitle>
              <CardDescription>Vérifiez et complétez les informations du véhicule</CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                  <Label htmlFor="immatriculation">Immatriculation</Label>
                  <Input
                    id="immatriculation"
                    value={inspectionData.vehicleInfo.immatriculation}
                    onChange={(e) =>
                      setInspectionData((prev) => ({
                        ...prev,
                        vehicleInfo: { ...prev.vehicleInfo, immatriculation: e.target.value },
                      }))
                    }
                  />
                </div>
                <div>
                  <Label htmlFor="numeroSerie">Numéro de série</Label>
                  <Input
                    id="numeroSerie"
                    value={inspectionData.vehicleInfo.numeroSerie}
                    onChange={(e) =>
                      setInspectionData((prev) => ({
                        ...prev,
                        vehicleInfo: { ...prev.vehicleInfo, numeroSerie: e.target.value },
                      }))
                    }
                  />
                </div>
                <div>
                  <Label htmlFor="nombreSiegesAutorises">Nombre de sièges autorisés</Label>
                  <Input
                    id="nombreSiegesAutorises"
                    type="number"
                    value={inspectionData.vehicleInfo.nombreSiegesAutorises}
                    onChange={(e) =>
                      setInspectionData((prev) => ({
                        ...prev,
                        vehicleInfo: { ...prev.vehicleInfo, nombreSiegesAutorises: Number.parseInt(e.target.value) },
                      }))
                    }
                  />
                </div>
                <div>
                  <Label htmlFor="dossier">Dossier</Label>
                  <Input
                    id="dossier"
                    value={inspectionData.vehicleInfo.dossier}
                    onChange={(e) =>
                      setInspectionData((prev) => ({
                        ...prev,
                        vehicleInfo: { ...prev.vehicleInfo, dossier: e.target.value },
                      }))
                    }
                  />
                </div>
                <div>
                  <Label htmlFor="numeroAutorisation">Numéro d'autorisation</Label>
                  <Input
                    id="numeroAutorisation"
                    value={inspectionData.vehicleInfo.numeroAutorisation}
                    onChange={(e) =>
                      setInspectionData((prev) => ({
                        ...prev,
                        vehicleInfo: { ...prev.vehicleInfo, numeroAutorisation: e.target.value },
                      }))
                    }
                  />
                </div>
                <div>
                  <Label htmlFor="gerantAutorisation">Gérant de l'autorisation</Label>
                  <Input
                    id="gerantAutorisation"
                    value={inspectionData.vehicleInfo.gerantAutorisation}
                    onChange={(e) =>
                      setInspectionData((prev) => ({
                        ...prev,
                        vehicleInfo: { ...prev.vehicleInfo, gerantAutorisation: e.target.value },
                      }))
                    }
                  />
                </div>
                <div>
                  <Label htmlFor="ligneAutorisee">Ligne autorisée</Label>
                  <Input
                    id="ligneAutorisee"
                    value={inspectionData.vehicleInfo.ligneAutorisee}
                    onChange={(e) =>
                      setInspectionData((prev) => ({
                        ...prev,
                        vehicleInfo: { ...prev.vehicleInfo, ligneAutorisee: e.target.value },
                      }))
                    }
                  />
                </div>
                <div>
                  <Label htmlFor="destination">Destination</Label>
                  <Input
                    id="destination"
                    value={inspectionData.vehicleInfo.destination}
                    onChange={(e) =>
                      setInspectionData((prev) => ({
                        ...prev,
                        vehicleInfo: { ...prev.vehicleInfo, destination: e.target.value },
                      }))
                    }
                  />
                </div>
                <div>
                  <Label htmlFor="horaire">Horaire</Label>
                  <Input
                    id="horaire"
                    value={inspectionData.vehicleInfo.horaire}
                    onChange={(e) =>
                      setInspectionData((prev) => ({
                        ...prev,
                        vehicleInfo: { ...prev.vehicleInfo, horaire: e.target.value },
                      }))
                    }
                  />
                </div>
                <div>
                  <Label htmlFor="gerant">Gérant de société</Label>
                  <Input
                    id="gerant"
                    value={inspectionData.vehicleInfo.gerant}
                    onChange={(e) =>
                      setInspectionData((prev) => ({
                        ...prev,
                        vehicleInfo: { ...prev.vehicleInfo, gerant: e.target.value },
                      }))
                    }
                  />
                </div>
                <div>
                  <Label htmlFor="conducteur">Nom et prénom du conducteur</Label>
                  <Input
                    id="conducteur"
                    value={inspectionData.vehicleInfo.conducteur}
                    onChange={(e) =>
                      setInspectionData((prev) => ({
                        ...prev,
                        vehicleInfo: { ...prev.vehicleInfo, conducteur: e.target.value },
                      }))
                    }
                  />
                </div>
                <div>
                  <Label htmlFor="numeroPermisConduire">Numéro de permis de conduire</Label>
                  <Input
                    id="numeroPermisConduire"
                    value={inspectionData.vehicleInfo.numeroPermisConduire}
                    onChange={(e) =>
                      setInspectionData((prev) => ({
                        ...prev,
                        vehicleInfo: { ...prev.vehicleInfo, numeroPermisConduire: e.target.value },
                      }))
                    }
                  />
                </div>
                <div>
                  <Label htmlFor="carteConduireProfessionnel">Carte de conducteur professionnel</Label>
                  <Input
                    id="carteConduireProfessionnel"
                    value={inspectionData.vehicleInfo.carteConduireProfessionnel}
                    onChange={(e) =>
                      setInspectionData((prev) => ({
                        ...prev,
                        vehicleInfo: { ...prev.vehicleInfo, carteConduireProfessionnel: e.target.value },
                      }))
                    }
                  />
                </div>
              </div>
            </CardContent>
          </Card>
        )

case 1:
        return (
          <div className="space-y-6">
            <Card>
              <CardHeader>
                <CardTitle>I - CONTRÔLE DES DOCUMENTS</CardTitle>
              </CardHeader>
              <CardContent>
                <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
                  <div>
                    <h3 className="font-semibold mb-4">Documents de transport</h3>
                    <div className="space-y-4">
                      {Object.entries(inspectionData.controleDocuments.transport).map(([key, doc]) => (
                        <div key={key} className="border p-4 rounded-lg">
                          <h4 className="font-medium mb-3">
                            {key === "carteAutorisation"
                              ? "Carte d'autorisation"
                              : key === "carteItineraire"
                                ? "Carte d'itinéraire"
                                : key === "autorisationExceptionnelle"
                                  ? "Autorisation exceptionnelle"
                                  : key === "carnetMetrologique"
                                    ? "Carnet métrologique"
                                    : "Permis de conduire"}
                          </h4>

<div className="space-y-3">
                            <div className="flex space-x-4">
                              <div className="flex items-center space-x-2">
                                <Checkbox
                                  checked={doc.disponible}
                                  onCheckedChange={(checked) => {
                                    setInspectionData((prev) => ({
                                      ...prev,
                                      controleDocuments: {
                                        ...prev.controleDocuments,
                                        transport: {
                                          ...prev.controleDocuments.transport,
                                          [key]: { ...doc, disponible: checked as boolean },
                                        },
                                      },
                                    }))
                                  }}
                                />
                                <Label>Disponible</Label>
                              </div>
                              <div className="flex items-center space-x-2">
                                <Checkbox
                                  checked={doc.validite}
                                  onCheckedChange={(checked) => {
                                    setInspectionData((prev) => ({
                                      ...prev,
                                      controleDocuments: {
                                        ...prev.controleDocuments,
                                        transport: {
                                          ...prev.controleDocuments.transport,
                                          [key]: { ...doc, validite: checked as boolean },
                                        },
                                      },
                                    }))
                                  }}
                                />
                                <Label>Validité</Label>
                              </div>
                            </div>

<div>
                              <Label htmlFor={`${key}-expiration`}>Date d'expiration</Label>
                              <Input
                                id={`${key}-expiration`}
                                type="date"
                                value={doc.dateExpiration}
                                onChange={(e) => {
                                  setInspectionData((prev) => ({
                                    ...prev,
                                    controleDocuments: {
                                      ...prev.controleDocuments,
                                      transport: {
                                        ...prev.controleDocuments.transport,
                                        [key]: { ...doc, dateExpiration: e.target.value },
                                      },
                                    },
                                  }))
                                }}
                              />
                            </div>

{key === "carnetMetrologique" && (
                              <div>
                                <Label htmlFor="numeroSerie">Numéro de série</Label>
                                <Input
                                  id="numeroSerie"
                                  placeholder="Saisissez le numéro de série"
                                  value={doc.numeroSerie || ""}
                                  onChange={(e) => {
                                    setInspectionData((prev) => ({
                                      ...prev,
                                      controleDocuments: {
                                        ...prev.controleDocuments,
                                        transport: {
                                          ...prev.controleDocuments.transport,
                                          carnetMetrologique: {
                                            ...prev.controleDocuments.transport.carnetMetrologique,
                                            numeroSerie: e.target.value,
                                          },
                                        },
                                      },
                                    }))
                                  }}
                                />
                              </div>
                            )}
                          </div>
                        </div>
                      ))}
                    </div>
                  </div>

<div>
                    <h3 className="font-semibold mb-4">Documents de circulation</h3>
                    <div className="space-y-4">
                      {Object.entries(inspectionData.controleDocuments.circulation).map(([key, doc]) => (
                        <div key={key} className="border p-4 rounded-lg">
                          <h4 className="font-medium mb-3 flex items-center">
                            {key === "certificatImmatriculation"
                              ? "Certificat d'immatriculation"
                              : key === "attestationAssurance"
                                ? "Attestation d'assurance"
                                : key === "certificatControleTechnique"
                                  ? "Certificat de contrôle technique"
                                  : key === "visiteMedicale"
                                    ? "Visite médicale du conducteur"
                                    : "Carte de conducteur professionnel"}
                            {key === "carteConduireProfessionnel" && (
                              <Badge variant="secondary" className="ml-2 text-xs">
                                Optionnelle
                              </Badge>
                            )}
                          </h4>

<div className="space-y-3">
                            <div className="flex space-x-4">
                              <div className="flex items-center space-x-2">
                                <Checkbox
                                  checked={doc.disponible}
                                  onCheckedChange={(checked) => {
                                    setInspectionData((prev) => ({
                                      ...prev,
                                      controleDocuments: {
                                        ...prev.controleDocuments,
                                        circulation: {
                                          ...prev.controleDocuments.circulation,
                                          [key]: { ...doc, disponible: checked as boolean },
                                        },
                                      },
                                    }))
                                  }}
                                />
                                <Label>Disponible</Label>
                              </div>
                              <div className="flex items-center space-x-2">
                                <Checkbox
                                  checked={doc.validite}
                                  onCheckedChange={(checked) => {
                                    setInspectionData((prev) => ({
                                      ...prev,
                                      controleDocuments: {
                                        ...prev.controleDocuments,
                                        circulation: {
                                          ...prev.controleDocuments.circulation,
                                          [key]: { ...doc, validite: checked as boolean },
                                        },
                                      },
                                    }))
                                  }}
                                />
                                <Label>Validité</Label>
                              </div>
                            </div>

<div>
                              <Label htmlFor={`${key}-expiration`}>Date d'expiration</Label>
                              <Input
                                id={`${key}-expiration`}
                                type="date"
                                value={doc.dateExpiration}
                                onChange={(e) => {
                                  setInspectionData((prev) => ({
                                    ...prev,
                                    controleDocuments: {
                                      ...prev.controleDocuments,
                                      circulation: {
                                        ...prev.controleDocuments.circulation,
                                        [key]: { ...doc, dateExpiration: e.target.value },
                                      },
                                    },
                                  }))
                                }}
                              />
                            </div>
                          </div>
                        </div>
                      ))}
                    </div>
                  </div>
                </div>
              </CardContent>
            </Card>
          </div>
        )

case 2:
        return (
          <Card>
            <CardHeader>
              <CardTitle>II - ÉTAT INTÉRIEUR DU VÉHICULE</CardTitle>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                  <Label htmlFor="nombreSiegesInstalle">Nombre de sièges installés au moment du contrôle</Label>
                  <Input
                    id="nombreSiegesInstalle"
                    type="number"
                    value={inspectionData.etatInterieur.nombreSiegesInstalle}
                    onChange={(e) =>
                      setInspectionData((prev) => ({
                        ...prev,
                        etatInterieur: { ...prev.etatInterieur, nombreSiegesInstalle: Number.parseInt(e.target.value) },
                      }))
                    }
                  />
                </div>
                <div>
                  <Label htmlFor="nombreVoyageurs">Nombre de voyageurs à bord du véhicule au moment du contrôle</Label>
                  <Input
                    id="nombreVoyageurs"
                    type="number"
                    value={inspectionData.etatInterieur.nombreVoyageurs}
                    onChange={(e) =>
                      setInspectionData((prev) => ({
                        ...prev,
                        etatInterieur: { ...prev.etatInterieur, nombreVoyageurs: Number.parseInt(e.target.value) },
                      }))
                    }
                  />
                </div>
              </div>

<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                  <Label>Propreté interne de l'autocar</Label>
                  <Select
                    value={inspectionData.etatInterieur.proprete}
                    onValueChange={(value: "propre" | "non-propre") =>
                      setInspectionData((prev) => ({
                        ...prev,
                        etatInterieur: { ...prev.etatInterieur, proprete: value },
                      }))
                    }
                  >
                    <SelectTrigger>
                      <SelectValue />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="propre">Propre</SelectItem>
                      <SelectItem value="non-propre">Non propre</SelectItem>
                    </SelectContent>
                  </Select>
                </div>
                <div>
                  <Label>État des sièges</Label>
                  <Select
                    value={inspectionData.etatInterieur.etatSieges}
                    onValueChange={(value: "bon" | "moyen" | "deteriore") =>
                      setInspectionData((prev) => ({
                        ...prev,
                        etatInterieur: { ...prev.etatInterieur, etatSieges: value },
                      }))
                    }
                  >
                    <SelectTrigger>
                      <SelectValue />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="bon">Bon</SelectItem>
                      <SelectItem value="moyen">Moyen</SelectItem>
                      <SelectItem value="deteriore">Détérioré</SelectItem>
                    </SelectContent>
                  </Select>
                </div>
              </div>
            </CardContent>
          </Card>
        )

case 3:
        return (
          <div className="space-y-6">
            <Card>
              <CardHeader>
                <CardTitle>III - CONTRÔLE DE L'ÉTAT MÉCANIQUE APPARENT</CardTitle>
              </CardHeader>
              <CardContent className="space-y-6">
                {/* Pneus */}
                <div>
                  <h3 className="font-semibold mb-4">Pneus</h3>
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div className="space-y-4">
                      <div>
                        <Label>Pneus avant</Label>
                        <div className="grid grid-cols-2 gap-2">
                          <Input
                            placeholder="Références"
                            value={inspectionData.controleMecanique.pneus.avant.references}
                            onChange={(e) =>
                              setInspectionData((prev) => ({
                                ...prev,
                                controleMecanique: {
                                  ...prev.controleMecanique,
                                  pneus: {
                                    ...prev.controleMecanique.pneus,
                                    avant: { ...prev.controleMecanique.pneus.avant, references: e.target.value },
                                  },
                                },
                              }))
                            }
                          />
                          <Input
                            placeholder="Profondeur des sculptures"
                            value={inspectionData.controleMecanique.pneus.avant.profondeur}
                            onChange={(e) =>
                              setInspectionData((prev) => ({
                                ...prev,
                                controleMecanique: {
                                  ...prev.controleMecanique,
                                  pneus: {
                                    ...prev.controleMecanique.pneus,
                                    avant: { ...prev.controleMecanique.pneus.avant, profondeur: e.target.value },
                                  },
                                },
                              }))
                            }
                          />
                        </div>
                      </div>
                    </div>
                  </div>
                </div>

{/* Chronotachygraphe */}
                <div>
                  <h3 className="font-semibold mb-4">Chronotachygraphe</h3>
                  <div className="space-y-4">
                    <div className="flex space-x-6">
                      <div className="flex items-center space-x-2">
                        <Checkbox
                          checked={inspectionData.controleMecanique.chronotachygraphe.disponible}
                          onCheckedChange={(checked) =>
                            setInspectionData((prev) => ({
                              ...prev,
                              controleMecanique: {
                                ...prev.controleMecanique,
                                chronotachygraphe: {
                                  ...prev.controleMecanique.chronotachygraphe,
                                  disponible: checked as boolean,
                                },
                              },
                            }))
                          }
                        />
                        <Label>Disponible (oui/non)</Label>
                      </div>
                      <div className="flex items-center space-x-2">
                        <Checkbox
                          checked={inspectionData.controleMecanique.chronotachygraphe.fonctionnel}
                          onCheckedChange={(checked) =>
                            setInspectionData((prev) => ({
                              ...prev,
                              controleMecanique: {
                                ...prev.controleMecanique,
                                chronotachygraphe: {
                                  ...prev.controleMecanique.chronotachygraphe,
                                  fonctionnel: checked as boolean,
                                },
                              },
                            }))
                          }
                        />
                        <Label>Fonctionnel (oui/non)</Label>
                      </div>
                      <div className="flex items-center space-x-2">
                        <Checkbox
                          checked={inspectionData.controleMecanique.chronotachygraphe.conforme}
                          onCheckedChange={(checked) =>
                            setInspectionData((prev) => ({
                              ...prev,
                              controleMecanique: {
                                ...prev.controleMecanique,
                                chronotachygraphe: {
                                  ...prev.controleMecanique.chronotachygraphe,
                                  conforme: checked as boolean,
                                },
                              },
                            }))
                          }
                        />
                        <Label>Conforme (oui/non)</Label>
                      </div>
                    </div>
                    <div className="max-w-md">
                      <Label htmlFor="chronotachygrapheNumeroSerie">Numéro de série</Label>
                      <Input
                        id="chronotachygrapheNumeroSerie"
                        placeholder="Saisissez le numéro de série du chronotachygraphe"
                        value={inspectionData.controleMecanique.chronotachygraphe.numeroSerie || ""}
                        onChange={(e) =>
                          setInspectionData((prev) => ({
                            ...prev,
                            controleMecanique: {
                              ...prev.controleMecanique,
                              chronotachygraphe: {
                                ...prev.controleMecanique.chronotachygraphe,
                                numeroSerie: e.target.value,
                              },
                            },
                          }))
                        }
                      />
                    </div>
                  </div>
                </div>

{/* Feux */}
                <div>
                  <h3 className="font-semibold mb-4">Feux</h3>
                  <div className="grid grid-cols-2 md:grid-cols-3 gap-4">
                    {Object.entries(inspectionData.controleMecanique.feux).map(([key, feu]) => (
                      <div key={key} className="flex items-center space-x-2">
                        <Checkbox
                          checked={feu.fonctionnel}
                          onCheckedChange={(checked) =>
                            setInspectionData((prev) => ({
                              ...prev,
                              controleMecanique: {
                                ...prev.controleMecanique,
                                feux: {
                                  ...prev.controleMecanique.feux,
                                  [key]: { fonctionnel: checked as boolean },
                                },
                              },
                            }))
                          }
                        />
                        <Label>
                          {key === "route"
                            ? "Feux de route"
                            : key === "croisement"
                              ? "Feux de croisement"
                              : key === "indicateurs"
                                ? "Feux indicateurs de direction"
                                : key === "stop"
                                  ? "Feux de stop"
                                  : key === "marcheArriere"
                                    ? "Feux marche arrière"
                                    : "Feux indicateurs de gabarit"}
                        </Label>
                      </div>
                    ))}
                  </div>
                </div>

{/* Extincteurs */}
                <div>
                  <h3 className="font-semibold mb-4">Extincteurs</h3>
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                    {Object.entries(inspectionData.controleMecanique.extincteurs).map(([key, extincteur]) => (
                      <div key={key} className="border p-4 rounded-lg">
                        <h4 className="font-medium mb-2">{key === "extincteur1" ? "Extincteur 1" : "Extincteur 2"}</h4>
                        <div className="space-y-2">
                          <div className="flex items-center space-x-2">
                            <Checkbox
                              checked={extincteur.disponible}
                              onCheckedChange={(checked) =>
                                setInspectionData((prev) => ({
                                  ...prev,
                                  controleMecanique: {
                                    ...prev.controleMecanique,
                                    extincteurs: {
                                      ...prev.controleMecanique.extincteurs,
                                      [key]: { ...extincteur, disponible: checked as boolean },
                                    },
                                  },
                                }))
                              }
                            />
                            <Label>Disponible (oui/non)</Label>
                          </div>
                          <Input
                            placeholder="Capacité"
                            value={extincteur.capacite}
                            onChange={(e) =>
                              setInspectionData((prev) => ({
                                ...prev,
                                controleMecanique: {
                                  ...prev.controleMecanique,
                                  extincteurs: {
                                    ...prev.controleMecanique.extincteurs,
                                    [key]: { ...extincteur, capacite: e.target.value },
                                  },
                                },
                              }))
                            }
                          />
                          <div className="flex items-center space-x-2">
                            <Checkbox
                              checked={extincteur.validite}
                              onCheckedChange={(checked) =>
                                setInspectionData((prev) => ({
                                  ...prev,
                                  controleMecanique: {
                                    ...prev.controleMecanique,
                                    extincteurs: {
                                      ...prev.controleMecanique.extincteurs,
                                      [key]: { ...extincteur, validite: checked as boolean },
                                    },
                                  },
                                }))
                              }
                            />
                            <Label>Validité</Label>
                          </div>
                        </div>
                      </div>
                    ))}
                  </div>
                </div>
              </CardContent>
            </Card>
          </div>
        )

case 4:
        return (
          <div className="space-y-6">
            <Card>
              <CardHeader>
                <CardTitle>Observations Générales</CardTitle>
              </CardHeader>
              <CardContent>
                <Textarea
                  placeholder="Observations relatives à l'état général du véhicule (carrosserie, système de direction, système de suspension, fuites d'huile, etc.)"
                  value={inspectionData.observations}
                  onChange={(e) =>
                    setInspectionData((prev) => ({
                      ...prev,
                      observations: e.target.value,
                    }))
                  }
                  rows={4}
                />
              </CardContent>
            </Card>

<Card>
              <CardHeader>
                <CardTitle>Signature et Finalisation</CardTitle>
              </CardHeader>
              <CardContent className="space-y-4">
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  <div>
                    <Label htmlFor="agent">Agent de contrôle</Label>
                    <Input
                      id="agent"
                      value={inspectionData.agent}
                      onChange={(e) =>
                        setInspectionData((prev) => ({
                          ...prev,
                          agent: e.target.value,
                        }))
                      }
                    />
                  </div>
                  <div>
                    <Label htmlFor="dateHeure">Date et heure</Label>
                    <Input
                      id="dateHeure"
                      type="datetime-local"
                      value={inspectionData.dateHeure}
                      onChange={(e) =>
                        setInspectionData((prev) => ({
                          ...prev,
                          dateHeure: e.target.value,
                        }))
                      }
                    />
                  </div>
                </div>

<div>
                  <Label>Statut Final</Label>
                  <div className="mt-2">
                    <Badge
                      className={
                        calculateStatus() === "conforme" ? "bg-green-100 text-green-800" : "bg-red-100 text-red-800"
                      }
                      size="lg"
                    >
                      {calculateStatus() === "conforme" ? (
                        <CheckCircle className="w-4 h-4 mr-2" />
                      ) : (
                        <AlertTriangle className="w-4 h-4 mr-2" />
                      )}
                      {calculateStatus().toUpperCase()}
                    </Badge>
                  </div>
                </div>

<div>
                  <Label htmlFor="signature">Signature (Nom complet)</Label>
                  <Input
                    id="signature"
                    placeholder="Saisissez votre nom complet pour signature"
                    value={inspectionData.signature}
                    onChange={(e) =>
                      setInspectionData((prev) => ({
                        ...prev,
                        signature: e.target.value,
                      }))
                    }
                  />
                </div>

{/* Message de succès */}
                {saveSuccess && (
                  <div className="bg-green-50 border border-green-200 rounded-lg p-4">
                    <div className="flex items-center">
                      <CheckCircle className="w-5 h-5 text-green-600 mr-2" />
                      <span className="text-green-800 font-medium">Contrôle enregistré avec succès !</span>
                    </div>
                  </div>
                )}
              </CardContent>
            </Card>
          </div>
        )

default:
        return null
    }
  }

return (
    <div className="min-h-screen bg-gray-50">
      <header className="bg-white shadow-sm border-b">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex items-center justify-between py-4">
            <div className="flex items-center space-x-4">
              <Link href="/">
                <Button variant="ghost" size="sm">
                  <ArrowLeft className="w-4 h-4 mr-2" />
                  Retour
                </Button>
              </Link>
              <div className="flex items-center space-x-3">
                <Bus className="w-6 h-6 text-blue-600" />
                <div>
                  <h1 className="text-xl font-bold text-gray-900">Contrôle Technique</h1>
                  <p className="text-sm text-gray-500">{inspectionData.vehicleInfo.immatriculation}</p>
                </div>
              </div>
            </div>
            <div className="flex items-center space-x-2">
              <Badge variant="outline">
                Étape {currentStep + 1} sur {steps.length}
              </Badge>
            </div>
          </div>
        </div>
      </header>

<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        {/* Progress Steps */}
        <div className="mb-8">
          <div className="flex items-center justify-between">
            {steps.map((step, index) => (
              <div key={index} className="flex items-center">
                <div
                  className={`flex items-center justify-center w-8 h-8 rounded-full border-2 ${
                    index <= currentStep ? "bg-blue-600 border-blue-600 text-white" : "border-gray-300 text-gray-500"
                  }`}
                >
                  {index < currentStep ? (
                    <CheckCircle className="w-5 h-5" />
                  ) : (
                    <span className="text-sm font-medium">{index + 1}</span>
                  )}
                </div>
                <span
                  className={`ml-2 text-sm font-medium ${index <= currentStep ? "text-blue-600" : "text-gray-500"}`}
                >
                  {step}
                </span>
                {index < steps.length - 1 && (
                  <div className={`w-16 h-0.5 mx-4 ${index < currentStep ? "bg-blue-600" : "bg-gray-300"}`} />
                )}
              </div>
            ))}
          </div>
        </div>

{/* Form Content */}
        <div className="mb-8">{renderStep()}</div>

{/* Navigation Buttons */}
        <div className="flex justify-between">
          <Button
            variant="outline"
            onClick={() => setCurrentStep(Math.max(0, currentStep - 1))}
            disabled={currentStep === 0}
          >
            Précédent
          </Button>

<div className="flex space-x-2">
            {currentStep === steps.length - 1 ? (
              <div className="flex space-x-2">
                {/* Bouton Enregistrer */}
                <Button
                  onClick={saveInspection}
                  disabled={isSaving || !inspectionData.signature}
                  className="bg-green-600 hover:bg-green-700"
                >
                  {isSaving ? (
                    <>
                      <Loader2 className="w-4 h-4 mr-2 animate-spin" />
                      Enregistrement...
                    </>
                  ) : (
                    <>
                      <Save className="w-4 h-4 mr-2" />
                      Enregistrer le Contrôle
                    </>
                  )}
                </Button>

{/* Bouton Générer PDF */}
                <Button
                  onClick={generatePDF}
                  disabled={isGeneratingPDF || !inspectionData.signature || !saveSuccess}
                  variant="outline"
                >
                  {isGeneratingPDF ? (
                    <>
                      <Loader2 className="w-4 h-4 mr-2 animate-spin" />
                      Génération PDF...
                    </>
                  ) : (
                    <>
                      <Download className="w-4 h-4 mr-2" />
                      Générer PDF
                    </>
                  )}
                </Button>
              </div>
            ) : (
              <Button onClick={() => setCurrentStep(Math.min(steps.length - 1, currentStep + 1))}>Suivant</Button>
            )}
          </div>
        </div>

{/* Instructions pour l'utilisateur */}
        {currentStep === steps.length - 1 && (
          <div className="mt-6 bg-blue-50 border border-blue-200 rounded-lg p-4">
            <div className="flex items-start">
              <AlertTriangle className="w-5 h-5 text-blue-600 mr-2 mt-0.5" />
              <div>
                <h3 className="font-medium text-blue-900">Instructions de finalisation</h3>
                <ul className="mt-2 text-sm text-blue-800 space-y-1">
                  <li>1. Vérifiez que toutes les informations sont correctes</li>
                  <li>2. Saisissez votre signature complète</li>
                  <li>3. Cliquez sur "Enregistrer le Contrôle" pour sauvegarder</li>
                  <li>4. Générez le PDF après l'enregistrement réussi</li>
                </ul>
              </div>
            </div>
          </div>
        )}
      </div>
    </div>
  )
}
[V0_FILE]typescript:file="app/api/controle-documents/route.ts"
import { type NextRequest, NextResponse } from "next/server"
import { supabase } from "@/lib/supabase"

export async function POST(request: NextRequest) {
  try {
    const body = await request.json()

const { data, error } = await supabase.from("controle_documents").insert([body]).select().single()

if (error) {
      console.error("Erreur lors de l'insertion du document de contrôle:", error)
      return NextResponse.json({ error: error.message }, { status: 500 })
    }

return NextResponse.json(data)
  } catch (error) {
    console.error("Erreur serveur:", error)
    return NextResponse.json({ error: "Erreur interne du serveur" }, { status: 500 })
  }
}
[V0_FILE]typescript:file="components/SaveConfirmationModal.tsx"
"use client"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { CheckCircle, AlertTriangle, Save, X } from "lucide-react"

interface SaveConfirmationModalProps {
  isOpen: boolean
  onClose: () => void
  onConfirm: () => void
  inspectionData: any
  finalStatus: "conforme" | "non-conforme"
  isLoading: boolean
}

export function SaveConfirmationModal({
  isOpen,
  onClose,
  onConfirm,
  inspectionData,
  finalStatus,
  isLoading,
}: SaveConfirmationModalProps) {
  if (!isOpen) return null

return (
    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
      <Card className="w-full max-w-2xl max-h-[90vh] overflow-y-auto">
        <CardHeader>
          <div className="flex items-center justify-between">
            <div>
              <CardTitle className="flex items-center gap-2">
                <Save className="w-5 h-5" />
                Confirmer l'enregistrement
              </CardTitle>
              <CardDescription>Vérifiez les informations avant de sauvegarder le contrôle</CardDescription>
            </div>
            <Button variant="ghost" size="sm" onClick={onClose}>
              <X className="w-4 h-4" />
            </Button>
          </div>
        </CardHeader>
        <CardContent className="space-y-6">
          {/* Résumé du véhicule */}
          <div>
            <h3 className="font-semibold mb-3">Véhicule contrôlé</h3>
            <div className="bg-gray-50 p-4 rounded-lg">
              <div className="grid grid-cols-2 gap-4 text-sm">
                <div>
                  <span className="font-medium">Immatriculation:</span>
                  <p>{inspectionData.vehicleInfo.immatriculation}</p>
                </div>
                <div>
                  <span className="font-medium">Gérant:</span>
                  <p>{inspectionData.vehicleInfo.gerant}</p>
                </div>
                <div>
                  <span className="font-medium">Conducteur:</span>
                  <p>{inspectionData.vehicleInfo.conducteur}</p>
                </div>
                <div>
                  <span className="font-medium">Date/Heure:</span>
                  <p>{new Date(inspectionData.dateHeure).toLocaleString("fr-FR")}</p>
                </div>
              </div>
            </div>
          </div>

{/* Statut final */}
          <div>
            <h3 className="font-semibold mb-3">Résultat du contrôle</h3>
            <div className="flex items-center gap-3">
              <Badge
                className={`text-lg px-4 py-2 ${
                  finalStatus === "conforme" ? "bg-green-100 text-green-800" : "bg-red-100 text-red-800"
                }`}
              >
                {finalStatus === "conforme" ? (
                  <CheckCircle className="w-5 h-5 mr-2" />
                ) : (
                  <AlertTriangle className="w-5 h-5 mr-2" />
                )}
                {finalStatus.toUpperCase()}
              </Badge>
            </div>
          </div>

{/* Agent et signature */}
          <div>
            <h3 className="font-semibold mb-3">Validation</h3>
            <div className="bg-gray-50 p-4 rounded-lg">
              <div className="grid grid-cols-2 gap-4 text-sm">
                <div>
                  <span className="font-medium">Agent de contrôle:</span>
                  <p>{inspectionData.agent}</p>
                </div>
                <div>
                  <span className="font-medium">Signature:</span>
                  <p>{inspectionData.signature}</p>
                </div>
              </div>
            </div>
          </div>

{/* Observations */}
          {inspectionData.observations && (
            <div>
              <h3 className="font-semibold mb-3">Observations</h3>
              <div className="bg-gray-50 p-4 rounded-lg">
                <p className="text-sm">{inspectionData.observations}</p>
              </div>
            </div>
          )}

{/* Actions */}
          <div className="flex justify-end space-x-3 pt-4 border-t">
            <Button variant="outline" onClick={onClose} disabled={isLoading}>
              Annuler
            </Button>
            <Button onClick={onConfirm} disabled={isLoading} className="bg-green-600 hover:bg-green-700">
              {isLoading ? (
                <>
                  <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white mr-2"></div>
                  Enregistrement...
                </>
              ) : (
                <>
                  <Save className="w-4 h-4 mr-2" />
                  Confirmer l'enregistrement
                </>
              )}
            </Button>
          </div>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescript:file="hooks/useInspectionSave.ts"
"use client"

import { useState } from "react"
import { controleQueries, vehiculeQueries } from "@/lib/supabase"

interface InspectionData {
  vehicleInfo: any
  controleDocuments: any
  etatInterieur: any
  controleMecanique: any
  observations: string
  signature: string
  dateHeure: string
  agent: string
}

export function useInspectionSave() {
  const [isSaving, setIsSaving] = useState(false)
  const [saveSuccess, setSaveSuccess] = useState(false)
  const [saveError, setSaveError] = useState<string | null>(null)

const saveInspection = async (inspectionData: InspectionData, vehicleId: string) => {
    setIsSaving(true)
    setSaveSuccess(false)
    setSaveError(null)

try {
      // Calculer le statut final
      const finalStatus = calculateInspectionStatus(inspectionData)

// Préparer les données pour la base de données
      const controleData = {
        vehicule_id: vehicleId,
        agent_id: "550e8400-e29b-41d4-a716-446655440001", // ID de l'agent connecté
        date_controle: new Date(inspectionData.dateHeure).toISOString(),
        statut: finalStatus,

observations: inspectionData.observations,
        signature: inspectionData.signature,
      }

// Sauvegarder le contrôle principal
      const savedControle = await controleQueries.create(controleData)

// Sauvegarder les détails des documents contrôlés
      const documentsToSave = [
        // Documents de transport
        ...Object.entries(inspectionData.controleDocuments.transport).map(([key, doc]: [string, any]) => ({
          controle_id: savedControle.id,
          type_document: key,
          disponible: doc.disponible,
          validite: doc.validite,
          date_expiration: doc.dateExpiration || null,
          numero_serie: key === "carnetMetrologique" ? doc.numeroSerie : null,
        })),
        // Documents de circulation
        ...Object.entries(inspectionData.controleDocuments.circulation).map(([key, doc]: [string, any]) => ({
          controle_id: savedControle.id,
          type_document: key,
          disponible: doc.disponible,
          validite: doc.validite,
          date_expiration: doc.dateExpiration || null,
        })),
      ]

// Mettre à jour le statut du véhicule
      await vehiculeQueries.update(vehicleId, {
        statut: finalStatus,
        date_dernier_controle: new Date().toISOString().split("T")[0],
        date_prochain_controle: new Date(Date.now() + 6 * 30 * 24 * 60 * 60 * 1000).toISOString().split("T")[0], // 6 mois
      })

setSaveSuccess(true)
      return { success: true, controleId: savedControle.id }
    } catch (error) {
      console.error("Erreur lors de la sauvegarde:", error)
      setSaveError("Erreur lors de l'enregistrement du contrôle. Veuillez réessayer.")
      return { success: false, error }
    } finally {
      setIsSaving(false)
    }
  }

const calculateInspectionStatus = (inspectionData: InspectionData): "conforme" | "non-conforme" => {
    // Vérifier les documents de transport (tous obligatoires)
    const documentsTransportOK = Object.values(inspectionData.controleDocuments.transport).every(
      (doc: any) => doc.disponible && doc.validite,
    )

// Vérifier les documents de circulation (carte conducteur professionnel optionnelle)
    const documentsCirculationOK = Object.entries(inspectionData.controleDocuments.circulation).every(
      ([key, doc]: [string, any]) => {
        if (key === "carteConduireProfessionnel" && doc.optionnelle) {
          return !doc.disponible || (doc.disponible && doc.validite)
        }
        return doc.disponible && doc.validite
      },
    )

const documentsOK = documentsTransportOK && documentsCirculationOK

return documentsOK && mecanicOK ? "conforme" : "non-conforme"
  }

return {
    saveInspection,
    isSaving,
    saveSuccess,
    saveError,
    setSaveSuccess,
    setSaveError,
  }
}</article></body></html>