[V0_FILE]css:file="app/globals.css" isMerged="true" @import "tailwindcss"; @import "tw-animate-css"; @custom-variant dark (&:is(.dark *)); :root { /* Material Design 3 Fleet Management Color Tokens */ --background: #ffffff; --foreground: #475569; --card: #f1f5f9; --card-foreground: #475569; --popover: #ffffff; --popover-foreground: #475569; --primary: #059669; --primary-foreground: #ffffff; --secondary: #10b981; --secondary-foreground: #ffffff; --muted: #f1f5f9; --muted-foreground: #64748b; --accent: #10b981; --accent-foreground: #ffffff; --destructive: #ef4444; --destructive-foreground: #ffffff; --border: #e5e7eb; --input: #f9fafb; --ring: rgba(5, 150, 105, 0.3); --chart-1: #6ee7b7; --chart-2: #34d399; --chart-3: #10b981; --chart-4: #059669; --chart-5: #047857; --radius: 0.5rem; --sidebar: #f1f5f9; --sidebar-foreground: #475569; --sidebar-primary: #059669; --sidebar-primary-foreground: #ffffff; --sidebar-accent: #10b981; --sidebar-accent-foreground: #ffffff; --sidebar-border: #e5e7eb; --sidebar-ring: rgba(5, 150, 105, 0.3); } .dark { --background: #0f172a; --foreground: #f1f5f9; --card: #1e293b; --card-foreground: #f1f5f9; --popover: #1e293b; --popover-foreground: #f1f5f9; --primary: #10b981; --primary-foreground: #ffffff; --secondary: #059669; --secondary-foreground: #ffffff; --muted: #334155; --muted-foreground: #94a3b8; --accent: #10b981; --accent-foreground: #ffffff; --destructive: #ef4444; --destructive-foreground: #ffffff; --border: #334155; --input: #1e293b; --ring: rgba(16, 185, 129, 0.3); --chart-1: #6ee7b7; --chart-2: #34d399; --chart-3: #10b981; --chart-4: #059669; --chart-5: #047857; --sidebar: #1e293b; --sidebar-foreground: #f1f5f9; --sidebar-primary: #10b981; --sidebar-primary-foreground: #ffffff; --sidebar-accent: #059669; --sidebar-accent-foreground: #ffffff; --sidebar-border: #334155; --sidebar-ring: rgba(16, 185, 129, 0.3); } @theme inline { --font-sans: var(--font-geist-sans); --font-mono: var(--font-geist-mono); --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --color-chart-1: var(--chart-1); --color-chart-2: var(--chart-2); --color-chart-3: var(--chart-3); --color-chart-4: var(--chart-4); --color-chart-5: var(--chart-5); --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); } @layer base { * { @apply border-border outline-ring/50; } body { @apply bg-background text-foreground font-sans; } } [V0_FILE]typescriptreact:file="app/loading.tsx" isFixed="true" isMerged="true" export default function Loading() { return null } [V0_FILE]json:file="package.json" isMerged="true" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint" }, "dependencies": { "@hookform/resolvers": "^3.10.0", "@radix-ui/react-accordion": "1.2.2", "@radix-ui/react-alert-dialog": "1.1.4", "@radix-ui/react-aspect-ratio": "1.1.1", "@radix-ui/react-avatar": "1.1.2", "@radix-ui/react-checkbox": "1.1.3", "@radix-ui/react-collapsible": "1.1.2", "@radix-ui/react-context-menu": "2.2.4", "@radix-ui/react-dialog": "1.1.4", "@radix-ui/react-dropdown-menu": "2.1.4", "@radix-ui/react-hover-card": "1.1.4", "@radix-ui/react-label": "2.1.1", "@radix-ui/react-menubar": "1.1.4", "@radix-ui/react-navigation-menu": "1.2.3", "@radix-ui/react-popover": "1.1.4", "@radix-ui/react-progress": "1.1.1", "@radix-ui/react-radio-group": "1.2.2", "@radix-ui/react-scroll-area": "1.2.2", "@radix-ui/react-select": "2.1.4", "@radix-ui/react-separator": "1.1.1", "@radix-ui/react-slider": "1.2.2", "@radix-ui/react-slot": "1.1.1", "@radix-ui/react-switch": "1.1.2", "@radix-ui/react-tabs": "1.1.2", "@radix-ui/react-toast": "1.2.4", "@radix-ui/react-toggle": "1.1.1", "@radix-ui/react-toggle-group": "1.1.1", "@radix-ui/react-tooltip": "1.1.6", "@vercel/analytics": "1.3.1", "autoprefixer": "^10.4.20", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "1.0.4", "date-fns": "4.1.0", "embla-carousel-react": "8.5.1", "geist": "^1.3.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "14.2.35", "next-themes": "^0.4.6", "react": "^19", "react-day-picker": "9.8.0", "react-dom": "^19", "react-hook-form": "^7.60.0", "react-resizable-panels": "^2.1.7", "recharts": "2.15.4", "sonner": "^1.7.4", "tailwind-merge": "^3.3.1", "tailwindcss-animate": "^1.0.7", "vaul": "^0.9.9", "zod": "3.25.67" }, "devDependencies": { "@tailwindcss/postcss": "^4.1.9", "@types/node": "^22", "@types/react": "^18", "@types/react-dom": "^18", "postcss": "^8.5", "tailwindcss": "^4.1.9", "tw-animate-css": "1.3.3", "typescript": "^5" } } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isQuickEdit="true" "use client" import { useState } from "react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Textarea } from "@/components/ui/textarea" import { Badge } from "@/components/ui/badge" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" import { Search, Calendar, Settings, Plus, Trash2 } from "lucide-react" type OperationType = "interne" | "externe" type Vehicle = { matricule: string marque: string modele: string chassis: string type: string } type LaborItem = { code: string libelle: string heures: number prix: number } type PartsItem = { code: string gamme: string quantite: number prix: number } const mockVehicles: Vehicle[] = [ { matricule: "FL001", marque: "Renault", modele: "Master", chassis: "VF1MA000123456789", type: "Utilitaire" }, { matricule: "FL002", marque: "Peugeot", modele: "Boxer", chassis: "VF3ZCYHZF12345678", type: "Utilitaire" }, { matricule: "FL003", marque: "Mercedes", modele: "Sprinter", chassis: "WDB9066131N123456", type: "Utilitaire" }, ] const mockOperations = [ { id: "1", name: "Vidange moteur + filtres", type: "interne" as OperationType }, { id: "2", name: "Révision complète 20 000 km", type: "externe" as OperationType }, { id: "3", name: "Contrôle freinage", type: "interne" as OperationType }, ] const initialLaborData: LaborItem[] = [ { code: "MO001", libelle: "Vidange moteur", heures: 1.5, prix: 45.0 }, { code: "MO002", libelle: "Remplacement filtres", heures: 0.5, prix: 25.0 }, ] const initialPartsData: PartsItem[] = [ { code: "P001", gamme: "Huile moteur 5W30", quantite: 5, prix: 8.5 }, { code: "P002", gamme: "Filtre à huile", quantite: 1, prix: 12.0 }, { code: "P003", gamme: "Filtre à air", quantite: 1, prix: 15.0 }, ] export default function PreventiveMaintenancePage() { const [selectedVehicle, setSelectedVehicle] = useState(null) const [selectedOperation, setSelectedOperation] = useState("") const [operationType, setOperationType] = useState("interne") const [maintenanceDate, setMaintenanceDate] = useState("") const [kilometrage, setKilometrage] = useState("") const [observation, setObservation] = useState("") const [isVehicleModalOpen, setIsVehicleModalOpen] = useState(false) const [isDuplicate, setIsDuplicate] = useState(false) const [laborData, setLaborData] = useState(initialLaborData) const [partsData, setPartsData] = useState(initialPartsData) const handleVehicleSelect = (vehicle: Vehicle) => { setSelectedVehicle(vehicle) setIsVehicleModalOpen(false) } const handleOperationChange = (operationId: string) => { setSelectedOperation(operationId) } const updateLaborItem = (index: number, field: keyof LaborItem, value: string | number) => { const newData = [...laborData] newData[index] = { ...newData[index], [field]: value } setLaborData(newData) } const updatePartsItem = (index: number, field: keyof PartsItem, value: string | number) => { const newData = [...partsData] newData[index] = { ...newData[index], [field]: value } setPartsData(newData) } const addLaborItem = () => { setLaborData([...laborData, { code: "", libelle: "", heures: 0, prix: 0 }]) } const addPartsItem = () => { setPartsData([...partsData, { code: "", gamme: "", quantite: 0, prix: 0 }]) } const removeLaborItem = (index: number) => { setLaborData(laborData.filter((_, i) => i !== index)) } const removePartsItem = (index: number) => { setPartsData(partsData.filter((_, i) => i !== index)) } const calculateTotal = () => { if (operationType === "interne") return "—" const laborTotal = laborData.reduce((sum, item) => sum + item.heures * item.prix, 0) const partsTotal = partsData.reduce((sum, item) => sum + item.quantite * item.prix, 0) return `DZD ${(laborTotal + partsTotal).toFixed(2)}` } return (

{/* Top App Bar */}

Maintenance préventive

{/* Main Content */}

{/* Vehicle Selection Section */} Parc Matériel – Choisir un véhicule

Matricule

Marque/Modèle

N° Châssis

{/* Maintenance Details Section */} Maintenance – Détails

Date

setMaintenanceDate(e.target.value)} />

Kilométrage setKilometrage(e.target.value)} />

{isDuplicate ? ( Maintenance existe déjà ) : ( Nouvelle )}

{/* Operation Assignment Section */} Opération affectée

Sélectionner une opération

Operations list is filtered by the selected vehicle

Type d'opération

{selectedOperation && (

{operationType === "externe" ? "Externe" : "Interne"}

)}

Observation

setObservation(e.target.value)}
                  rows={3}
                />
              </div>
            </div>
          </CardContent>
        </Card>

{/* Labor Table */}
        <Card className="shadow-sm">
          <CardHeader className="flex flex-row items-center justify-between">
            <CardTitle className="text-xl font-semibold text-foreground">Main d'œuvre</CardTitle>
            {selectedOperation && (
              <Button variant="outline" size="sm" onClick={addLaborItem}>
                <Plus className="w-4 h-4 mr-2" />
                Ajouter
              </Button>
            )}
          </CardHeader>
          <CardContent>
            {selectedOperation ? (
              <Table>
                <TableHeader>
                  <TableRow>
                    <TableHead className="w-12">#</TableHead>
                    <TableHead>Code</TableHead>
                    <TableHead>Libellé</TableHead>
                    <TableHead>Nbre d'heure</TableHead>
                    {operationType === "externe" && <TableHead>Prix</TableHead>}
                    {operationType === "externe" && <TableHead>Valeur</TableHead>}
                    <TableHead className="w-12">Action</TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {laborData.map((item, index) => (
                    <TableRow key={index}>
                      <TableCell>{index + 1}</TableCell>
                      <TableCell>
                        <Input
                          value={item.code}
                          onChange={(e) => updateLaborItem(index, "code", e.target.value)}
                          className="w-full"
                        />
                      </TableCell>
                      <TableCell>
                        <Input
                          value={item.libelle}
                          onChange={(e) => updateLaborItem(index, "libelle", e.target.value)}
                          className="w-full"
                        />
                      </TableCell>
                      <TableCell>
                        <Input
                          type="number"
                          step="0.1"
                          value={item.heures}
                          onChange={(e) => updateLaborItem(index, "heures", Number.parseFloat(e.target.value) || 0)}
                          className="w-full"
                        />
                      </TableCell>
                      {operationType === "externe" && (
                        <TableCell>
                          <Input
                            type="number"
                            step="0.01"
                            value={item.prix}
                            onChange={(e) => updateLaborItem(index, "prix", Number.parseFloat(e.target.value) || 0)}
                            className="w-full"
                          />
                        </TableCell>
                      )}
                      {operationType === "externe" && <TableCell>DZD {(item.heures * item.prix).toFixed(2)}</TableCell>}
                      <TableCell>
                        <Button
                          variant="ghost"
                          size="sm"
                          onClick={() => removeLaborItem(index)}
                          className="text-destructive hover:text-destructive"
                        >
                          <Trash2 className="w-4 h-4" />
                        </Button>
                      </TableCell>
                    </TableRow>
                  ))}
                </TableBody>
              </Table>
            ) : (
              <div className="text-center py-8 text-muted-foreground">
                Sélectionnez une opération pour voir les détails de la main d'œuvre
              </div>
            )}
            {operationType === "externe" && selectedOperation && (
              <p className="text-sm text-muted-foreground mt-2">
                Prix/Valeur columns are conditionally visible (EXTERNE only)
              </p>
            )}
          </CardContent>
        </Card>

{/* Parts Table */}
        <Card className="shadow-sm">
          <CardHeader className="flex flex-row items-center justify-between">
            <CardTitle className="text-xl font-semibold text-foreground">Pièces de rechange</CardTitle>
            {selectedOperation && (
              <Button variant="outline" size="sm" onClick={addPartsItem}>
                <Plus className="w-4 h-4 mr-2" />
                Ajouter
              </Button>
            )}
          </CardHeader>
          <CardContent>
            {selectedOperation ? (
              <Table>
                <TableHeader>
                  <TableRow>
                    <TableHead className="w-12">#</TableHead>
                    <TableHead>Code</TableHead>
                    <TableHead>Gamme</TableHead>
                    <TableHead>Quantité</TableHead>
                    {operationType === "externe" && <TableHead>Prix</TableHead>}
                    {operationType === "externe" && <TableHead>Valeur</TableHead>}
                    <TableHead className="w-12">Action</TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {partsData.map((item, index) => (
                    <TableRow key={index}>
                      <TableCell>{index + 1}</TableCell>
                      <TableCell>
                        <Input
                          value={item.code}
                          onChange={(e) => updatePartsItem(index, "code", e.target.value)}
                          className="w-full"
                        />
                      </TableCell>
                      <TableCell>
                        <Input
                          value={item.gamme}
                          onChange={(e) => updatePartsItem(index, "gamme", e.target.value)}
                          className="w-full"
                        />
                      </TableCell>
                      <TableCell>
                        <Input
                          type="number"
                          value={item.quantite}
                          onChange={(e) => updatePartsItem(index, "quantite", Number.parseInt(e.target.value) || 0)}
                          className="w-full"
                        />
                      </TableCell>
                      {operationType === "externe" && (
                        <TableCell>
                          <Input
                            type="number"
                            step="0.01"
                            value={item.prix}
                            onChange={(e) => updatePartsItem(index, "prix", Number.parseFloat(e.target.value) || 0)}
                            className="w-full"
                          />
                        </TableCell>
                      )}
                      {operationType === "externe" && (
                        <TableCell>DZD {(item.quantite * item.prix).toFixed(2)}</TableCell>
                      )}
                      <TableCell>
                        <Button
                          variant="ghost"
                          size="sm"
                          onClick={() => removePartsItem(index)}
                          className="text-destructive hover:text-destructive"
                        >
                          <Trash2 className="w-4 h-4" />
                        </Button>
                      </TableCell>
                    </TableRow>
                  ))}
                </TableBody>
              </Table>
            ) : (
              <div className="text-center py-8 text-muted-foreground">
                Sélectionnez une opération pour voir les pièces de rechange
              </div>
            )}
            {selectedOperation && (
              <p className="text-sm text-muted-foreground mt-2">
                Lines in tables are prefilled from the selected operation
              </p>
            )}
          </CardContent>
        </Card>

{/* Footer Actions */}
        <Card className="shadow-sm">
          <CardContent className="pt-6">
            <div className="flex flex-col sm:flex-row items-center justify-between gap-4">
              <div className="flex flex-wrap items-center gap-3">
                <Button variant="outline">Nouveau</Button>
                <Button>Enregistrer</Button>
                <Button variant="outline">Supprimer</Button>
                <Button variant="ghost">Fermer</Button>
              </div>

<Badge variant="outline" className="text-lg px-4 py-2 bg-card border-border">
                Total: {calculateTotal()}
              </Badge>
            </div>
          </CardContent>
        </Card>
      </main>
    </div>
  )
}</article></body></html>