[V0_FILE]typescript:file="lib/types.ts" export type UserRole = "Operateur" | "Chef d'équipe" | "Superviseur" | "Responsable" | "Manager" export type ProblemStatus = "Ouvert" | "En cours" | "Clôturé" export type StepStatus = "Non commencé" | "En cours" | "Terminé" export type ActionStatus = "Non commencé" | "En cours" | "Terminé" | "Validé" export type ProblemLevel = "Usine" | "Ligne" | "Atelier" export interface User { user_id: number nom: string role: UserRole service: string competence: string email: string password: string } export interface Team { team_id: number nom_equipe: string date_creation: string created_by: number } export interface TeamMember { team_member_id: number team_id: number user_id: number role_in_team: string } export interface Problem { problem_id: number titre: string description: string date_declaration: string declared_by: number team_id?: number status: ProblemStatus level: ProblemLevel qui?: string quoi?: string ou?: string quand?: string comment?: string combien?: string pourquoi?: string photos?: string[] } export interface Step8D { step_id: number problem_id: number step_number: number description: string assigned_to?: number date_start?: string date_end?: string status: StepStatus proof?: string[] } export interface Action { action_id: number step_id: number description: string assigned_to?: number status: ActionStatus date_due?: string proof?: string[] } export interface Notification { notification_id: number user_id: number problem_id?: number step_id?: number message: string date_created: string is_read: boolean } export interface History { history_id: number problem_id: number step_id?: number action: string performed_by: number date_performed: string } [V0_FILE]typescript:file="lib/mock-data.ts" import type { User, Problem, Team, Step8D, Action, Notification } from "./types" export const mockUsers: User[] = [ { user_id: 1, nom: "Ahmed Benali", role: "Manager", service: "Direction", competence: "Management", email: "ahmed.benali@usine.com", password: "password123", }, { user_id: 2, nom: "Fatima Zahra", role: "Responsable", service: "Qualité", competence: "Lean Management", email: "fatima.zahra@usine.com", password: "password123", }, { user_id: 3, nom: "Mohamed Alami", role: "Superviseur", service: "Production Ligne A", competence: "Supervision", email: "mohamed.alami@usine.com", password: "password123", }, { user_id: 4, nom: "Rachid Idrissi", role: "Chef d'équipe", service: "Atelier 1", competence: "Assemblage", email: "rachid.idrissi@usine.com", password: "password123", }, { user_id: 5, nom: "Karim Tazi", role: "Operateur", service: "Atelier 1", competence: "Opération", email: "karim.tazi@usine.com", password: "password123", }, ] export const mockTeams: Team[] = [ { team_id: 1, nom_equipe: "Équipe 8D - Défaut Ligne A", date_creation: "2025-01-15", created_by: 3, }, { team_id: 2, nom_equipe: "Équipe 8D - Retard Production", date_creation: "2025-01-18", created_by: 2, }, ] export const mockProblems: Problem[] = [ { problem_id: 1, titre: "Défaut de peinture sur pièces finies", description: "Présence de bulles dans la peinture sur 15% des pièces produites", date_declaration: "2025-01-15", declared_by: 4, team_id: 1, status: "En cours", level: "Ligne", qui: "Ligne A - Poste peinture", quoi: "Bulles dans la peinture", ou: "Zone de peinture automatique", quand: "15 Janvier 2025, 14h30", comment: "Application automatique par robot", combien: "15% des pièces", pourquoi: "À déterminer", photos: [], }, { problem_id: 2, titre: "Retard de production - Ligne B", description: "Retard accumulé de 2 heures sur planning quotidien", date_declaration: "2025-01-18", declared_by: 4, team_id: 2, status: "Ouvert", level: "Ligne", qui: "Ligne B - Équipe matin", quoi: "Retard de production", ou: "Ligne B complète", quand: "18 Janvier 2025, matin", comment: "Ralentissement progressif", combien: "2 heures de retard", pourquoi: "À analyser", photos: [], }, { problem_id: 3, titre: "Non-conformité dimensions pièce X34", description: "Dimensions hors tolérance sur lot de 500 pièces", date_declaration: "2025-01-20", declared_by: 5, status: "Ouvert", level: "Atelier", qui: "Atelier usinage", quoi: "Dimensions hors spécification", ou: "Machine CNC-05", quand: "20 Janvier 2025", comment: "Contrôle qualité", combien: "500 pièces", pourquoi: "À déterminer", photos: [], }, ] export const mockSteps: Step8D[] = [ { step_id: 1, problem_id: 1, step_number: 1, description: "Équipe constituée : Mohamed Alami (Leader), Rachid Idrissi, Karim Tazi", assigned_to: 3, date_start: "2025-01-15", status: "Terminé", proof: [], }, { step_id: 2, problem_id: 1, step_number: 2, description: "Problème décrit avec QQOQCCP - Photos prises", assigned_to: 4, date_start: "2025-01-15", status: "Terminé", proof: [], }, { step_id: 3, problem_id: 1, step_number: 3, description: "Action de containment : Inspection 100% des pièces avant expédition", assigned_to: 3, date_start: "2025-01-15", status: "En cours", proof: [], }, { step_id: 4, problem_id: 1, step_number: 4, description: "Analyse des causes racines en cours - Méthode 5 Pourquoi", assigned_to: 2, date_start: "2025-01-16", status: "En cours", proof: [], }, ] export const mockActions: Action[] = [ { action_id: 1, step_id: 3, description: "Mettre en place inspection visuelle systématique", assigned_to: 4, status: "En cours", date_due: "2025-01-16", proof: [], }, { action_id: 2, step_id: 3, description: "Isoler les pièces non conformes", assigned_to: 5, status: "Terminé", date_due: "2025-01-15", proof: [], }, ] export const mockNotifications: Notification[] = [ { notification_id: 1, user_id: 3, problem_id: 1, step_id: 3, message: "Nouvelle action corrective assignée", date_created: "2025-01-15T14:30:00", is_read: false, }, { notification_id: 2, user_id: 2, problem_id: 2, message: "Nouveau problème déclaré - Ligne B", date_created: "2025-01-18T09:00:00", is_read: false, }, ] // Storage keys export const STORAGE_KEYS = { CURRENT_USER: "current_user", USERS: "users", PROBLEMS: "problems", TEAMS: "teams", STEPS: "steps_8d", ACTIONS: "actions", NOTIFICATIONS: "notifications", } // Initialize localStorage with mock data export function initializeMockData() { if (typeof window === "undefined") return if (!localStorage.getItem(STORAGE_KEYS.USERS)) { localStorage.setItem(STORAGE_KEYS.USERS, JSON.stringify(mockUsers)) } if (!localStorage.getItem(STORAGE_KEYS.PROBLEMS)) { localStorage.setItem(STORAGE_KEYS.PROBLEMS, JSON.stringify(mockProblems)) } if (!localStorage.getItem(STORAGE_KEYS.TEAMS)) { localStorage.setItem(STORAGE_KEYS.TEAMS, JSON.stringify(mockTeams)) } if (!localStorage.getItem(STORAGE_KEYS.STEPS)) { localStorage.setItem(STORAGE_KEYS.STEPS, JSON.stringify(mockSteps)) } if (!localStorage.getItem(STORAGE_KEYS.ACTIONS)) { localStorage.setItem(STORAGE_KEYS.ACTIONS, JSON.stringify(mockActions)) } if (!localStorage.getItem(STORAGE_KEYS.NOTIFICATIONS)) { localStorage.setItem(STORAGE_KEYS.NOTIFICATIONS, JSON.stringify(mockNotifications)) } } [V0_FILE]typescript:file="lib/storage.ts" import type { User, Problem, Team, Step8D, Action, Notification } from "./types" import { STORAGE_KEYS } from "./mock-data" // User operations export function getCurrentUser(): User | null { if (typeof window === "undefined") return null const userStr = localStorage.getItem(STORAGE_KEYS.CURRENT_USER) return userStr ? JSON.parse(userStr) : null } export function setCurrentUser(user: User | null) { if (typeof window === "undefined") return if (user) { localStorage.setItem(STORAGE_KEYS.CURRENT_USER, JSON.stringify(user)) } else { localStorage.removeItem(STORAGE_KEYS.CURRENT_USER) } } export function getUsers(): User[] { if (typeof window === "undefined") return [] const usersStr = localStorage.getItem(STORAGE_KEYS.USERS) return usersStr ? JSON.parse(usersStr) : [] } export function saveUsers(users: User[]) { if (typeof window === "undefined") return localStorage.setItem(STORAGE_KEYS.USERS, JSON.stringify(users)) } // Problem operations export function getProblems(): Problem[] { if (typeof window === "undefined") return [] const problemsStr = localStorage.getItem(STORAGE_KEYS.PROBLEMS) return problemsStr ? JSON.parse(problemsStr) : [] } export function saveProblems(problems: Problem[]) { if (typeof window === "undefined") return localStorage.setItem(STORAGE_KEYS.PROBLEMS, JSON.stringify(problems)) } export function getProblemById(id: number): Problem | undefined { return getProblems().find((p) => p.problem_id === id) } export function addProblem(problem: Problem) { const problems = getProblems() problems.push(problem) saveProblems(problems) } export function updateProblem(id: number, updates: Partial) { const problems = getProblems() const index = problems.findIndex((p) => p.problem_id === id) if (index !== -1) { problems[index] = { ...problems[index], ...updates } saveProblems(problems) } } // Team operations export function getTeams(): Team[] { if (typeof window === "undefined") return [] const teamsStr = localStorage.getItem(STORAGE_KEYS.TEAMS) return teamsStr ? JSON.parse(teamsStr) : [] } export function saveTeams(teams: Team[]) { if (typeof window === "undefined") return localStorage.setItem(STORAGE_KEYS.TEAMS, JSON.stringify(teams)) } // Step operations export function getSteps(): Step8D[] { if (typeof window === "undefined") return [] const stepsStr = localStorage.getItem(STORAGE_KEYS.STEPS) return stepsStr ? JSON.parse(stepsStr) : [] } export function saveSteps(steps: Step8D[]) { if (typeof window === "undefined") return localStorage.setItem(STORAGE_KEYS.STEPS, JSON.stringify(steps)) } export function getStepsByProblemId(problemId: number): Step8D[] { return getSteps().filter((s) => s.problem_id === problemId) } export function addStep(step: Step8D) { const steps = getSteps() steps.push(step) saveSteps(steps) } export function updateStep(id: number, updates: Partial) { const steps = getSteps() const index = steps.findIndex((s) => s.step_id === id) if (index !== -1) { steps[index] = { ...steps[index], ...updates } saveSteps(steps) } } // Action operations export function getActions(): Action[] { if (typeof window === "undefined") return [] const actionsStr = localStorage.getItem(STORAGE_KEYS.ACTIONS) return actionsStr ? JSON.parse(actionsStr) : [] } export function saveActions(actions: Action[]) { if (typeof window === "undefined") return localStorage.setItem(STORAGE_KEYS.ACTIONS, JSON.stringify(actions)) } export function getActionsByStepId(stepId: number): Action[] { return getActions().filter((a) => a.step_id === stepId) } export function addAction(action: Action) { const actions = getActions() actions.push(action) saveActions(actions) } export function updateAction(id: number, updates: Partial) { const actions = getActions() const index = actions.findIndex((a) => a.action_id === id) if (index !== -1) { actions[index] = { ...actions[index], ...updates } saveActions(actions) } } // Notification operations export function getNotifications(): Notification[] { if (typeof window === "undefined") return [] const notificationsStr = localStorage.getItem(STORAGE_KEYS.NOTIFICATIONS) return notificationsStr ? JSON.parse(notificationsStr) : [] } export function saveNotifications(notifications: Notification[]) { if (typeof window === "undefined") return localStorage.setItem(STORAGE_KEYS.NOTIFICATIONS, JSON.stringify(notifications)) } export function getNotificationsByUserId(userId: number): Notification[] { return getNotifications().filter((n) => n.user_id === userId) } export function markNotificationAsRead(id: number) { const notifications = getNotifications() const index = notifications.findIndex((n) => n.notification_id === id) if (index !== -1) { notifications[index].is_read = true saveNotifications(notifications) } } export function addNotification(notification: Notification) { const notifications = getNotifications() notifications.push(notification) saveNotifications(notifications) } [V0_FILE]typescript:file="components/auth-provider.tsx" "use client" import { createContext, useContext, useEffect, useState, type ReactNode } from "react" import type { User } from "@/lib/types" import { getCurrentUser, setCurrentUser, getUsers } from "@/lib/storage" import { initializeMockData } from "@/lib/mock-data" interface AuthContextType { user: User | null login: (email: string, password: string) => boolean logout: () => void isLoading: boolean } const AuthContext = createContext(undefined) export function AuthProvider({ children }: { children: ReactNode }) { const [user, setUser] = useState(null) const [isLoading, setIsLoading] = useState(true) useEffect(() => { initializeMockData() const currentUser = getCurrentUser() setUser(currentUser) setIsLoading(false) }, []) const login = (email: string, password: string): boolean => { const users = getUsers() const foundUser = users.find((u) => u.email === email && u.password === password) if (foundUser) { setUser(foundUser) setCurrentUser(foundUser) return true } return false } const logout = () => { setUser(null) setCurrentUser(null) } return {children} } export function useAuth() { const context = useContext(AuthContext) if (context === undefined) { throw new Error("useAuth must be used within an AuthProvider") } return context } [V0_FILE]typescriptreact:file="app/dashboard/layout.tsx" "use client" import type React from "react" import { useEffect } from "react" import { useRouter } from "next/navigation" import { useAuth } from "@/components/auth-provider" import { DashboardHeader } from "@/components/dashboard-header" import { Sidebar } from "@/components/sidebar" export default function DashboardLayout({ children, }: { children: React.ReactNode }) { const router = useRouter() const { user, isLoading } = useAuth() useEffect(() => { if (!isLoading && !user) { router.push("/") } }, [user, isLoading, router]) if (isLoading) { return (

Chargement...

) } if (!user) return null return (

{children}

) } [V0_FILE]typescriptreact:file="app/dashboard/problems/loading.tsx" isFixed="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/dashboard/problems/new/page.tsx" "use client" import type React from "react" import { useState } from "react" import { useRouter } from "next/navigation" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" 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 { useAuth } from "@/components/auth-provider" import { addProblem, getProblems } from "@/lib/storage" import type { Problem, ProblemLevel } from "@/lib/types" import { ArrowLeft } from "lucide-react" import Link from "next/link" export default function NewProblemPage() { const router = useRouter() const { user } = useAuth() const [formData, setFormData] = useState({ titre: "", description: "", level: "Atelier" as ProblemLevel, qui: "", quoi: "", ou: "", quand: "", comment: "", combien: "", pourquoi: "", }) const handleSubmit = (e: React.FormEvent) => { e.preventDefault() if (!user) return const problems = getProblems() const newProblem: Problem = { problem_id: problems.length > 0 ? Math.max(...problems.map((p) => p.problem_id)) + 1 : 1, titre: formData.titre, description: formData.description, date_declaration: new Date().toISOString().split("T")[0], declared_by: user.user_id, status: "Ouvert", level: formData.level, qui: formData.qui, quoi: formData.quoi, ou: formData.ou, quand: formData.quand, comment: formData.comment, combien: formData.combien, pourquoi: formData.pourquoi, photos: [], } addProblem(newProblem) router.push("/dashboard/problems") } if (!user) return null return (

Nouveau problème

Déclarez un nouveau problème selon la méthode QQOQCCP

Informations générales Décrivez le problème de manière concise

Titre du problème * setFormData({ ...formData, titre: e.target.value })} placeholder="Ex: Défaut de peinture sur pièces finies" required />

Description *

setFormData({ ...formData, description: e.target.value })}
                placeholder="Décrivez le problème en détail..."
                rows={4}
                required
              />
            </div>

<div className="space-y-2">
              <Label htmlFor="level">Niveau *</Label>
              <Select
                value={formData.level}
                onValueChange={(value) => setFormData({ ...formData, level: value as ProblemLevel })}
              >
                <SelectTrigger id="level">
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="Usine">Usine</SelectItem>
                  <SelectItem value="Ligne">Ligne</SelectItem>
                  <SelectItem value="Atelier">Atelier</SelectItem>
                </SelectContent>
              </Select>
            </div>
          </CardContent>
        </Card>

<Card>
          <CardHeader>
            <CardTitle>Analyse QQOQCCP</CardTitle>
            <CardDescription>Qui, Quoi, Où, Quand, Comment, Combien, Pourquoi</CardDescription>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="grid gap-4 md:grid-cols-2">
              <div className="space-y-2">
                <Label htmlFor="qui">Qui ?</Label>
                <Input
                  id="qui"
                  value={formData.qui}
                  onChange={(e) => setFormData({ ...formData, qui: e.target.value })}
                  placeholder="Qui est concerné ?"
                />
              </div>

<div className="space-y-2">
                <Label htmlFor="quoi">Quoi ?</Label>
                <Input
                  id="quoi"
                  value={formData.quoi}
                  onChange={(e) => setFormData({ ...formData, quoi: e.target.value })}
                  placeholder="De quoi s'agit-il ?"
                />
              </div>

<div className="space-y-2">
                <Label htmlFor="ou">Où ?</Label>
                <Input
                  id="ou"
                  value={formData.ou}
                  onChange={(e) => setFormData({ ...formData, ou: e.target.value })}
                  placeholder="Où cela se produit-il ?"
                />
              </div>

<div className="space-y-2">
                <Label htmlFor="quand">Quand ?</Label>
                <Input
                  id="quand"
                  value={formData.quand}
                  onChange={(e) => setFormData({ ...formData, quand: e.target.value })}
                  placeholder="Quand cela arrive-t-il ?"
                />
              </div>

<div className="space-y-2">
                <Label htmlFor="comment">Comment ?</Label>
                <Input
                  id="comment"
                  value={formData.comment}
                  onChange={(e) => setFormData({ ...formData, comment: e.target.value })}
                  placeholder="Comment cela se manifeste ?"
                />
              </div>

<div className="space-y-2">
                <Label htmlFor="combien">Combien ?</Label>
                <Input
                  id="combien"
                  value={formData.combien}
                  onChange={(e) => setFormData({ ...formData, combien: e.target.value })}
                  placeholder="Combien d'occurrences ?"
                />
              </div>
            </div>

<div className="space-y-2">
              <Label htmlFor="pourquoi">Pourquoi ?</Label>
              <Textarea
                id="pourquoi"
                value={formData.pourquoi}
                onChange={(e) => setFormData({ ...formData, pourquoi: e.target.value })}
                placeholder="Pourquoi cela se produit-il ?"
                rows={3}
              />
            </div>
          </CardContent>
        </Card>

<div className="flex justify-end gap-4">
          <Link href="/dashboard/problems">
            <Button type="button" variant="outline">
              Annuler
            </Button>
          </Link>
          <Button type="submit">Créer le problème</Button>
        </div>
      </form>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/dashboard/problems/[id]/page.tsx"
"use client"

import { useEffect, useState } from "react"
import { useParams, useRouter } from "next/navigation"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { useAuth } from "@/components/auth-provider"
import { getProblemById, getStepsByProblemId, getUsers, updateProblem, addStep, getSteps } from "@/lib/storage"
import type { Problem, Step8D, User } from "@/lib/types"
import { ArrowLeft, Users, Calendar, MapPin, CheckCircle, Clock, XCircle } from "lucide-react"
import Link from "next/link"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"

const STEP_8D_TITLES = [
  { number: 1, title: "D1 - Constituer l'équipe", description: "Former l'équipe multidisciplinaire" },
  { number: 2, title: "D2 - Décrire le problème", description: "Utiliser QQOQCCP pour décrire" },
  { number: 3, title: "D3 - Actions de containment", description: "Protéger le client immédiatement" },
  { number: 4, title: "D4 - Identifier les causes racines", description: "5 Pourquoi, Ishikawa, Pareto" },
  { number: 5, title: "D5 - Actions correctives permanentes", description: "Choisir et vérifier les solutions" },
  { number: 6, title: "D6 - Mettre en œuvre", description: "Déployer les actions correctives" },
  { number: 7, title: "D7 - Prévenir la récurrence", description: "Standardiser et documenter" },
  { number: 8, title: "D8 - Féliciter l'équipe", description: "Reconnaître et capitaliser" },
]

export default function ProblemDetailPage() {
  const params = useParams()
  const router = useRouter()
  const { user } = useAuth()
  const [problem, setProblem] = useState<Problem | null>(null)
  const [steps, setSteps] = useState<Step8D[]>([])
  const [users, setUsers] = useState<User[]>([])

useEffect(() => {
    if (params.id) {
      const problemData = getProblemById(Number(params.id))
      if (problemData) {
        setProblem(problemData)
        const stepsData = getStepsByProblemId(Number(params.id))
        setSteps(stepsData)
      }
      setUsers(getUsers())
    }
  }, [params.id])

const getUserById = (userId: number) => {
    return users.find((u) => u.user_id === userId)
  }

const getStepStatus = (stepNumber: number) => {
    const step = steps.find((s) => s.step_number === stepNumber)
    return step?.status || "Non commencé"
  }

const handleInitializeSteps = () => {
    if (!problem || !user) return

const allSteps = getSteps()
    const maxStepId = allSteps.length > 0 ? Math.max(...allSteps.map((s) => s.step_id)) : 0

STEP_8D_TITLES.forEach((stepInfo, index) => {
      const existingStep = steps.find((s) => s.step_number === stepInfo.number)
      if (!existingStep) {
        const newStep: Step8D = {
          step_id: maxStepId + index + 1,
          problem_id: problem.problem_id,
          step_number: stepInfo.number,
          description: stepInfo.description,
          status: "Non commencé",
          proof: [],
        }
        addStep(newStep)
      }
    })

updateProblem(problem.problem_id, { status: "En cours" })

const stepsData = getStepsByProblemId(problem.problem_id)
    setSteps(stepsData)

const updatedProblem = getProblemById(problem.problem_id)
    if (updatedProblem) {
      setProblem(updatedProblem)
    }
  }

if (!problem || !user) {
    return (
      <div className="flex items-center justify-center min-h-[400px]">
        <div className="text-center">
          <p className="text-muted-foreground">Problème non trouvé</p>
          <Link href="/dashboard/problems">
            <Button className="mt-4">Retour aux problèmes</Button>
          </Link>
        </div>
      </div>
    )
  }

const declaredBy = getUserById(problem.declared_by)

return (
    <div className="space-y-6">
      <div className="flex items-center gap-4">
        <Link href="/dashboard/problems">
          <Button variant="ghost" size="icon">
            <ArrowLeft className="h-5 w-5" />
          </Button>
        </Link>
        <div className="flex-1">
          <div className="flex items-center gap-3 mb-1">
            <h1 className="text-3xl font-bold text-foreground">{problem.titre}</h1>
            <Badge
              className={
                problem.status === "Ouvert"
                  ? "bg-primary/10 text-primary hover:bg-primary/20"
                  : problem.status === "En cours"
                    ? "bg-accent/10 text-accent hover:bg-accent/20"
                    : "bg-green-500/10 text-green-500 hover:bg-green-500/20"
              }
            >
              {problem.status}
            </Badge>
            <Badge variant="outline">{problem.level}</Badge>
          </div>
          <p className="text-muted-foreground">
            Déclaré par {declaredBy?.nom} le {new Date(problem.date_declaration).toLocaleDateString("fr-FR")}
          </p>
        </div>
        {problem.status === "Ouvert" && steps.length === 0 && (
          <Button onClick={handleInitializeSteps}>Démarrer la résolution 8D</Button>
        )}
      </div>

<Tabs defaultValue="overview" className="space-y-6">
        <TabsList>
          <TabsTrigger value="overview">Vue d'ensemble</TabsTrigger>
          <TabsTrigger value="8d">Démarche 8D</TabsTrigger>
          <TabsTrigger value="qqoqccp">QQOQCCP</TabsTrigger>
        </TabsList>

<TabsContent value="overview" className="space-y-6">
          <Card>
            <CardHeader>
              <CardTitle>Description du problème</CardTitle>
            </CardHeader>
            <CardContent>
              <p className="text-foreground leading-relaxed">{problem.description}</p>
            </CardContent>
          </Card>

<div className="grid gap-6 md:grid-cols-2">
            <Card>
              <CardHeader>
                <CardTitle className="text-lg">Informations</CardTitle>
              </CardHeader>
              <CardContent className="space-y-3">
                <div className="flex items-start gap-3">
                  <Calendar className="h-5 w-5 text-muted-foreground mt-0.5" />
                  <div>
                    <p className="text-sm font-medium text-foreground">Date de déclaration</p>
                    <p className="text-sm text-muted-foreground">
                      {new Date(problem.date_declaration).toLocaleDateString("fr-FR", {
                        day: "numeric",
                        month: "long",
                        year: "numeric",
                      })}
                    </p>
                  </div>
                </div>

<div className="flex items-start gap-3">
                  <MapPin className="h-5 w-5 text-muted-foreground mt-0.5" />
                  <div>
                    <p className="text-sm font-medium text-foreground">Niveau</p>
                    <p className="text-sm text-muted-foreground">{problem.level}</p>
                  </div>
                </div>

<div className="flex items-start gap-3">
                  <Users className="h-5 w-5 text-muted-foreground mt-0.5" />
                  <div>
                    <p className="text-sm font-medium text-foreground">Déclaré par</p>
                    <p className="text-sm text-muted-foreground">
                      {declaredBy?.nom} - {declaredBy?.role}
                    </p>
                  </div>
                </div>
              </CardContent>
            </Card>

<Card>
              <CardHeader>
                <CardTitle className="text-lg">Progression</CardTitle>
              </CardHeader>
              <CardContent>
                {steps.length === 0 ? (
                  <div className="text-center py-8">
                    <p className="text-sm text-muted-foreground">La démarche 8D n'a pas encore été démarrée</p>
                    <Button onClick={handleInitializeSteps} className="mt-4">
                      Démarrer maintenant
                    </Button>
                  </div>
                ) : (
                  <div className="space-y-2">
                    {STEP_8D_TITLES.map((stepInfo) => {
                      const status = getStepStatus(stepInfo.number)
                      return (
                        <div key={stepInfo.number} className="flex items-center gap-3 p-2 rounded hover:bg-muted/50">
                          {status === "Terminé" ? (
                            <CheckCircle className="h-5 w-5 text-green-500" />
                          ) : status === "En cours" ? (
                            <Clock className="h-5 w-5 text-accent" />
                          ) : (
                            <XCircle className="h-5 w-5 text-muted-foreground" />
                          )}
                          <div className="flex-1">
                            <p className="text-sm font-medium text-foreground">{stepInfo.title}</p>
                          </div>
                          <Badge variant="outline" className="text-xs">
                            {status}
                          </Badge>
                        </div>
                      )
                    })}
                  </div>
                )}
              </CardContent>
            </Card>
          </div>
        </TabsContent>

<TabsContent value="8d" className="space-y-4">
          {steps.length === 0 ? (
            <Card>
              <CardContent className="py-12 text-center">
                <p className="text-muted-foreground mb-4">La démarche 8D n'a pas encore été initialisée</p>
                <Button onClick={handleInitializeSteps}>Initialiser les 8 disciplines</Button>
              </CardContent>
            </Card>
          ) : (
            STEP_8D_TITLES.map((stepInfo) => {
              const step = steps.find((s) => s.step_number === stepInfo.number)
              return (
                <Card key={stepInfo.number}>
                  <CardHeader>
                    <div className="flex items-center justify-between">
                      <div>
                        <CardTitle className="flex items-center gap-3">
                          {stepInfo.title}
                          {step && (
                            <Badge
                              className={
                                step.status === "Terminé"
                                  ? "bg-green-500/10 text-green-500 hover:bg-green-500/20"
                                  : step.status === "En cours"
                                    ? "bg-accent/10 text-accent hover:bg-accent/20"
                                    : "bg-muted text-muted-foreground"
                              }
                            >
                              {step.status}
                            </Badge>
                          )}
                        </CardTitle>
                        <CardDescription>{stepInfo.description}</CardDescription>
                      </div>
                    </div>
                  </CardHeader>
                  <CardContent>
                    {step ? (
                      <div className="space-y-4">
                        <p className="text-sm text-foreground">{step.description}</p>
                        {step.assigned_to && (
                          <div className="text-sm text-muted-foreground">
                            Responsable: {getUserById(step.assigned_to)?.nom}
                          </div>
                        )}
                        {step.date_start && (
                          <div className="text-sm text-muted-foreground">
                            Début: {new Date(step.date_start).toLocaleDateString("fr-FR")}
                          </div>
                        )}
                      </div>
                    ) : (
                      <p className="text-sm text-muted-foreground">Cette étape n'a pas encore été initialisée</p>
                    )}
                  </CardContent>
                </Card>
              )
            })
          )}
        </TabsContent>

<TabsContent value="qqoqccp" className="space-y-6">
          <Card>
            <CardHeader>
              <CardTitle>Analyse QQOQCCP</CardTitle>
              <CardDescription>Qui, Quoi, Où, Quand, Comment, Combien, Pourquoi</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="grid gap-6 md:grid-cols-2">
                <div className="space-y-2">
                  <h3 className="text-sm font-medium text-primary">Qui ?</h3>
                  <p className="text-sm text-foreground">{problem.qui || "Non renseigné"}</p>
                </div>

<div className="space-y-2">
                  <h3 className="text-sm font-medium text-primary">Quoi ?</h3>
                  <p className="text-sm text-foreground">{problem.quoi || "Non renseigné"}</p>
                </div>

<div className="space-y-2">
                  <h3 className="text-sm font-medium text-primary">Où ?</h3>
                  <p className="text-sm text-foreground">{problem.ou || "Non renseigné"}</p>
                </div>

<div className="space-y-2">
                  <h3 className="text-sm font-medium text-primary">Quand ?</h3>
                  <p className="text-sm text-foreground">{problem.quand || "Non renseigné"}</p>
                </div>

<div className="space-y-2">
                  <h3 className="text-sm font-medium text-primary">Comment ?</h3>
                  <p className="text-sm text-foreground">{problem.comment || "Non renseigné"}</p>
                </div>

<div className="space-y-2">
                  <h3 className="text-sm font-medium text-primary">Combien ?</h3>
                  <p className="text-sm text-foreground">{problem.combien || "Non renseigné"}</p>
                </div>

<div className="space-y-2 md:col-span-2">
                  <h3 className="text-sm font-medium text-primary">Pourquoi ?</h3>
                  <p className="text-sm text-foreground">{problem.pourquoi || "Non renseigné"}</p>
                </div>
              </div>
            </CardContent>
          </Card>
        </TabsContent>
      </Tabs>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/dashboard/reports/page.tsx"
"use client"

import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { useAuth } from "@/components/auth-provider"

export default function ReportsPage() {
  const { user } = useAuth()

if (!user) return null

return (
    <div className="space-y-6">
      <div>
        <h1 className="text-3xl font-bold text-foreground">Rapports</h1>
        <p className="text-muted-foreground mt-1">Rapports et documentation</p>
      </div>

<Card>
        <CardHeader>
          <CardTitle>Rapports 8D</CardTitle>
        </CardHeader>
        <CardContent>
          <div className="text-center py-12">
            <p className="text-muted-foreground">Fonctionnalité en cours de développement</p>
          </div>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/dashboard/knowledge/page.tsx"
"use client"

import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { useAuth } from "@/components/auth-provider"

export default function KnowledgePage() {
  const { user } = useAuth()

if (!user) return null

return (
    <div className="space-y-6">
      <div>
        <h1 className="text-3xl font-bold text-foreground">Base de connaissances</h1>
        <p className="text-muted-foreground mt-1">Historique et solutions des problèmes résolus</p>
      </div>

<Card>
        <CardHeader>
          <CardTitle>Problèmes résolus</CardTitle>
        </CardHeader>
        <CardContent>
          <div className="text-center py-12">
            <p className="text-muted-foreground">Fonctionnalité en cours de développement</p>
          </div>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/dashboard/settings/page.tsx"
"use client"

import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { useAuth } from "@/components/auth-provider"

export default function SettingsPage() {
  const { user } = useAuth()

if (!user || user.role !== "Manager") {
    return (
      <div className="space-y-6">
        <Card>
          <CardContent className="py-12 text-center">
            <p className="text-muted-foreground">Accès non autorisé</p>
          </CardContent>
        </Card>
      </div>
    )
  }

return (
    <div className="space-y-6">
      <div>
        <h1 className="text-3xl font-bold text-foreground">Paramètres</h1>
        <p className="text-muted-foreground mt-1">Configuration système et gestion des utilisateurs</p>
      </div>

<Card>
        <CardHeader>
          <CardTitle>Gestion des utilisateurs</CardTitle>
        </CardHeader>
        <CardContent>
          <div className="text-center py-12">
            <p className="text-muted-foreground">Fonctionnalité en cours de développement</p>
          </div>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]json:file="package.json"
{
  "name": "my-v0-project",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "eslint ."
  },
  "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",
    "input-otp": "1.4.1",
    "lucide-react": "^0.454.0",
    "next": "16.0.10",
    "next-themes": "^0.4.6",
    "react": "19.2.0",
    "react-day-picker": "9.8.0",
    "react-dom": "19.2.0",
    "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": "^1.1.2",
    "zod": "3.25.76"
  },
  "devDependencies": {
    "@tailwindcss/postcss": "^4.1.9",
    "@types/node": "^22",
    "@types/react": "^19",
    "@types/react-dom": "^19",
    "postcss": "^8.5",
    "tailwindcss": "^4.1.9",
    "tw-animate-css": "1.3.3",
    "typescript": "^5"
  }
}
[V0_FILE]typescriptreact:file="app/layout.tsx"
import type React from "react"
import type { Metadata } from "next"
import { Geist, Geist_Mono } from "next/font/google"
import { Analytics } from "@vercel/analytics/next"
import "./globals.css"
import { AuthProvider } from "@/components/auth-provider"

const _geist = Geist({ subsets: ["latin"] })
const _geistMono = Geist_Mono({ subsets: ["latin"] })

export const metadata: Metadata = {
  title: "8D Problem Solver - Résolution de problèmes industriels",
  description: "Application de digitalisation de la résolution de problèmes selon la méthodologie 8D et PDCA",
  generator: "v0.app",
  icons: {
    icon: [
      {
        url: "/icon-light-32x32.png",
        media: "(prefers-color-scheme: light)",
      },
      {
        url: "/icon-dark-32x32.png",
        media: "(prefers-color-scheme: dark)",
      },
      {
        url: "/icon.svg",
        type: "image/svg+xml",
      },
    ],
    apple: "/apple-icon.png",
  },
}

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode
}>) {
  return (
    <html lang="fr" className="dark">
      <body className={`font-sans antialiased`}>
        <AuthProvider>{children}</AuthProvider>
        <Analytics />
      </body>
    </html>
  )
}
[V0_FILE]typescriptreact:file="app/dashboard/manager/validation/page.tsx"
"use client"

import { useState, useEffect } from "react"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { useAuth } from "@/components/auth-provider"
import { getProblems, updateProblem, getStepsByProblemId } from "@/lib/storage"
import type { Problem } from "@/lib/types"
import { CheckCircle, XCircle, Eye } from "lucide-react"
import Link from "next/link"
import { Badge } from "@/components/ui/badge"

export default function ManagerValidationPage() {
  const { user } = useAuth()
  const [problems, setProblems] = useState<Problem[]>([])

useEffect(() => {
    const allProblems = getProblems()
    // Filter problems that are "En cours" and need manager validation
    setProblems(allProblems.filter((p) => p.status === "En cours"))
  }, [])

const handleValidate = (problemId: number) => {
    const steps = getStepsByProblemId(problemId)
    const allStepsCompleted = steps.every((s) => s.status === "Terminé")

if (allStepsCompleted) {
      updateProblem(problemId, { status: "Clôturé" })
      setProblems(problems.filter((p) => p.problem_id !== problemId))
      alert("Rapport 8D validé et clôturé avec succès!")
    } else {
      alert("Toutes les étapes 8D doivent être complétées avant validation")
    }
  }

const handleReject = (problemId: number) => {
    if (confirm("Êtes-vous sûr de vouloir rejeter ce rapport 8D?")) {
      updateProblem(problemId, { status: "Ouvert" })
      setProblems(problems.filter((p) => p.problem_id !== problemId))
      alert("Rapport 8D renvoyé pour révision")
    }
  }

if (!user || user.role !== "Manager") {
    return (
      <div className="text-center py-12">
        <p className="text-muted-foreground">Accès réservé aux Managers</p>
      </div>
    )
  }

return (
    <div className="space-y-6">
      <div>
        <h1 className="text-3xl font-bold text-foreground">Validation des Rapports 8D</h1>
        <p className="text-muted-foreground mt-1">Validez ou rejetez les rapports 8D complétés</p>
      </div>

<Card>
        <CardHeader>
          <CardTitle>Rapports 8D en attente de validation</CardTitle>
          <CardDescription>Vérifiez et validez les démarches 8D avant clôture définitive</CardDescription>
        </CardHeader>
        <CardContent>
          {problems.length === 0 ? (
            <div className="text-center py-12">
              <p className="text-muted-foreground">Aucun rapport en attente de validation</p>
            </div>
          ) : (
            <div className="overflow-x-auto">
              <table className="w-full border-collapse">
                <thead>
                  <tr className="bg-primary/10 border-b border-border">
                    <th className="p-3 text-left text-sm font-semibold text-foreground">ID</th>
                    <th className="p-3 text-left text-sm font-semibold text-foreground">Titre</th>
                    <th className="p-3 text-left text-sm font-semibold text-foreground">Niveau</th>
                    <th className="p-3 text-left text-sm font-semibold text-foreground">Date</th>
                    <th className="p-3 text-left text-sm font-semibold text-foreground">Statut</th>
                    <th className="p-3 text-left text-sm font-semibold text-foreground">Progression</th>
                    <th className="p-3 text-left text-sm font-semibold text-foreground">Actions</th>
                  </tr>
                </thead>
                <tbody>
                  {problems.map((problem) => {
                    const steps = getStepsByProblemId(problem.problem_id)
                    const completedSteps = steps.filter((s) => s.status === "Terminé").length
                    const totalSteps = 8
                    const progressPercentage = (completedSteps / totalSteps) * 100

return (
                      <tr key={problem.problem_id} className="border-b border-border hover:bg-muted/50">
                        <td className="p-3 text-sm font-medium">#{problem.problem_id}</td>
                        <td className="p-3 text-sm">{problem.titre}</td>
                        <td className="p-3 text-sm">
                          <Badge variant="outline">{problem.level}</Badge>
                        </td>
                        <td className="p-3 text-sm">
                          {new Date(problem.date_declaration).toLocaleDateString("fr-FR")}
                        </td>
                        <td className="p-3 text-sm">
                          <span className="inline-flex items-center rounded-full bg-accent/10 px-2 py-1 text-xs font-medium text-accent">
                            {problem.status}
                          </span>
                        </td>
                        <td className="p-3 text-sm">
                          <div className="space-y-1">
                            <div className="text-xs text-muted-foreground">
                              {completedSteps}/{totalSteps} étapes
                            </div>
                            <div className="w-full bg-muted rounded-full h-2">
                              <div
                                className="bg-primary h-2 rounded-full transition-all"
                                style={{ width: `${progressPercentage}%` }}
                              />
                            </div>
                          </div>
                        </td>
                        <td className="p-3">
                          <div className="flex items-center gap-2">
                            <Link href={`/dashboard/problems/${problem.problem_id}`}>
                              <Button size="sm" variant="outline">
                                <Eye className="h-4 w-4 mr-1" />
                                Voir
                              </Button>
                            </Link>
                            <Button
                              size="sm"
                              variant="default"
                              onClick={() => handleValidate(problem.problem_id)}
                              disabled={completedSteps < totalSteps}
                            >
                              <CheckCircle className="h-4 w-4 mr-1" />
                              Valider
                            </Button>
                            <Button size="sm" variant="destructive" onClick={() => handleReject(problem.problem_id)}>
                              <XCircle className="h-4 w-4 mr-1" />
                              Rejeter
                            </Button>
                          </div>
                        </td>
                      </tr>
                    )
                  })}
                </tbody>
              </table>
            </div>
          )}
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/dashboard/teams/page.tsx"
"use client"

import { useState, useEffect } from "react"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { useAuth } from "@/components/auth-provider"
import { getTeams, saveTeams, getUsers } from "@/lib/storage"
import type { Team, User } from "@/lib/types"
import { Plus, UsersIcon, Trash2 } from "lucide-react"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"

export default function TeamsPage() {
  const { user } = useAuth()
  const [teams, setTeams] = useState<Team[]>([])
  const [users, setUsers] = useState<User[]>([])
  const [isDialogOpen, setIsDialogOpen] = useState(false)
  const [newTeam, setNewTeam] = useState({
    nom_equipe: "",
    members: [] as number[],
  })

useEffect(() => {
    setTeams(getTeams())
    setUsers(getUsers())
  }, [])

const handleCreateTeam = () => {
    if (!user) return

const allTeams = getTeams()
    const team: Team = {
      team_id: allTeams.length > 0 ? Math.max(...allTeams.map((t) => t.team_id)) + 1 : 1,
      nom_equipe: newTeam.nom_equipe,
      date_creation: new Date().toISOString().split("T")[0],
      created_by: user.user_id,
    }

allTeams.push(team)
    saveTeams(allTeams)
    setTeams(allTeams)
    setIsDialogOpen(false)
    setNewTeam({ nom_equipe: "", members: [] })
  }

const handleDeleteTeam = (teamId: number) => {
    if (confirm("Êtes-vous sûr de vouloir supprimer cette équipe?")) {
      const updatedTeams = teams.filter((t) => t.team_id !== teamId)
      saveTeams(updatedTeams)
      setTeams(updatedTeams)
    }
  }

if (!user) return null

const canManageTeams = ["Manager", "Responsable", "Superviseur"].includes(user.role)

return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-3xl font-bold text-foreground">Gestion des Équipes</h1>
          <p className="text-muted-foreground mt-1">Créez et gérez les équipes 8D pour la résolution de problèmes</p>
        </div>
        {canManageTeams && (
          <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
            <DialogTrigger asChild>
              <Button>
                <Plus className="h-4 w-4 mr-2" />
                Nouvelle équipe
              </Button>
            </DialogTrigger>
            <DialogContent>
              <DialogHeader>
                <DialogTitle>Créer une nouvelle équipe 8D</DialogTitle>
                <DialogDescription>Définissez le nom et les membres de l'équipe</DialogDescription>
              </DialogHeader>
              <div className="space-y-4 py-4">
                <div className="space-y-2">
                  <Label htmlFor="team-name">Nom de l'équipe</Label>
                  <Input
                    id="team-name"
                    value={newTeam.nom_equipe}
                    onChange={(e) => setNewTeam({ ...newTeam, nom_equipe: e.target.value })}
                    placeholder="Ex: Équipe 8D - Ligne A"
                  />
                </div>
                <div className="space-y-2">
                  <Label>Membres de l'équipe</Label>
                  <Select>
                    <SelectTrigger>
                      <SelectValue placeholder="Sélectionner des membres" />
                    </SelectTrigger>
                    <SelectContent>
                      {users.map((u) => (
                        <SelectItem key={u.user_id} value={u.user_id.toString()}>
                          {u.nom} - {u.role}
                        </SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                </div>
              </div>
              <div className="flex justify-end gap-2">
                <Button variant="outline" onClick={() => setIsDialogOpen(false)}>
                  Annuler
                </Button>
                <Button onClick={handleCreateTeam} disabled={!newTeam.nom_equipe}>
                  Créer
                </Button>
              </div>
            </DialogContent>
          </Dialog>
        )}
      </div>

<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
        {teams.map((team) => {
          const creator = users.find((u) => u.user_id === team.created_by)
          return (
            <Card key={team.team_id}>
              <CardHeader>
                <div className="flex items-start justify-between">
                  <div className="flex items-center gap-2">
                    <UsersIcon className="h-5 w-5 text-primary" />
                    <CardTitle className="text-lg">{team.nom_equipe}</CardTitle>
                  </div>
                  {canManageTeams && (
                    <Button
                      variant="ghost"
                      size="icon"
                      onClick={() => handleDeleteTeam(team.team_id)}
                      className="h-8 w-8"
                    >
                      <Trash2 className="h-4 w-4 text-destructive" />
                    </Button>
                  )}
                </div>
                <CardDescription>Créée le {new Date(team.date_creation).toLocaleDateString("fr-FR")}</CardDescription>
              </CardHeader>
              <CardContent>
                <div className="space-y-2">
                  <div className="text-sm text-muted-foreground">
                    <span className="font-medium">Créée par:</span> {creator?.nom || "Inconnu"}
                  </div>
                  <div className="text-sm text-muted-foreground">
                    <span className="font-medium">Rôle:</span> {creator?.role || "N/A"}
                  </div>
                </div>
              </CardContent>
            </Card>
          )
        })}

{teams.length === 0 && (
          <Card className="col-span-full">
            <CardContent className="text-center py-12">
              <UsersIcon className="h-12 w-12 text-muted-foreground mx-auto mb-4" />
              <p className="text-muted-foreground">Aucune équipe créée</p>
              {canManageTeams && <p className="text-sm text-muted-foreground mt-2">Créez votre première équipe 8D</p>}
            </CardContent>
          </Card>
        )}
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/sidebar.tsx"
"use client"

import { cn } from "@/lib/utils"
import {
  LayoutDashboard,
  AlertCircle,
  Users,
  FileText,
  BarChart3,
  Settings,
  ClipboardCheck,
  UserCog,
  FileCheck,
  Bell,
} from "lucide-react"
import Link from "next/link"
import { usePathname } from "next/navigation"
import { useAuth } from "@/components/auth-provider"

const navigation = [
  { name: "Tableau de bord", href: "/dashboard", icon: LayoutDashboard, roles: ["all"] },
  { name: "Problèmes", href: "/dashboard/problems", icon: AlertCircle, roles: ["all"] },
  { name: "Signalement", href: "/dashboard/operateur", icon: Bell, roles: ["Opérateur"] },
  { name: "Formulaire Superviseur", href: "/dashboard/superviseur", icon: ClipboardCheck, roles: ["Superviseur"] },
  { name: "Formulaire Chef Équipe", href: "/dashboard/chef-equipe", icon: UserCog, roles: ["Chef d'équipe"] },
  { name: "Formulaire Responsable", href: "/dashboard/responsable", icon: FileCheck, roles: ["Responsable"] },
  { name: "Validation 8D", href: "/dashboard/manager/validation", icon: FileText, roles: ["Manager"] },
  { name: "Équipes", href: "/dashboard/teams", icon: Users, roles: ["Manager"] },
  { name: "Rapports", href: "/dashboard/reports", icon: FileText, roles: ["Responsable", "Manager"] },
  { name: "Analytics", href: "/dashboard/analytics", icon: BarChart3, roles: ["Responsable", "Manager"] },
  { name: "Paramètres", href: "/dashboard/settings", icon: Settings, roles: ["Manager"] },
]

export function Sidebar() {
  const pathname = usePathname()
  const { user } = useAuth()

const filteredNavigation = navigation.filter(
    (item) => item.roles.includes("all") || (user && item.roles.includes(user.role)),
  )

return (
    <aside className="fixed left-0 top-16 z-40 h-[calc(100vh-4rem)] w-64 border-r border-border bg-sidebar overflow-y-auto">
      <nav className="flex flex-col gap-1 p-4">
        {filteredNavigation.map((item) => {
          const isActive = pathname === item.href
          return (
            <Link
              key={item.name}
              href={item.href}
              className={cn(
                "flex items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium transition-all duration-200",
                isActive
                  ? "bg-primary text-primary-foreground shadow-lg shadow-primary/20"
                  : "text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:translate-x-1",
              )}
            >
              <item.icon className="h-5 w-5" />
              {item.name}
            </Link>
          )
        })}
      </nav>
    </aside>
  )
}
[V0_FILE]typescriptreact:file="components/dashboard-header.tsx"
"use client"

import { Bell, LogOut, UserIcon } from "lucide-react"
import { Button } from "@/components/ui/button"
import { useAuth } from "@/components/auth-provider"
import { Badge } from "@/components/ui/badge"
import { getNotificationsByUserId } from "@/lib/storage"
import { useState, useEffect } from "react"

export function DashboardHeader() {
  const { user, logout } = useAuth()
  const [unreadCount, setUnreadCount] = useState(0)

useEffect(() => {
    if (user) {
      const notifications = getNotificationsByUserId(user.user_id)
      const unread = notifications.filter((n) => !n.is_read).length
      setUnreadCount(unread)
    }
  }, [user])

if (!user) return null

return (
    <header className="sticky top-0 z-50 w-full border-b border-border gradient-card">
      <div className="flex h-16 items-center justify-between px-6">
        <div className="flex items-center gap-4">
          <div className="flex items-center gap-3">
            <div className="h-10 w-10 rounded-lg bg-white/10 backdrop-blur-sm flex items-center justify-center">
              <span className="text-xl font-bold text-white">8D</span>
            </div>
            <div>
              <h1 className="text-xl font-bold text-white">8D Problem Solver</h1>
              <p className="text-xs text-white/70">Résolution de problèmes industriels</p>
            </div>
          </div>
        </div>

<div className="flex items-center gap-4">
          <Button variant="ghost" size="icon" className="relative text-white hover:bg-white/10">
            <Bell className="h-5 w-5" />
            {unreadCount > 0 && (
              <Badge className="absolute -right-1 -top-1 h-5 w-5 rounded-full p-0 flex items-center justify-center text-xs bg-destructive border-0">
                {unreadCount}
              </Badge>
            )}
          </Button>

<Button variant="ghost" size="icon" onClick={logout} className="text-white hover:bg-white/10">
            <LogOut className="h-5 w-5" />
          </Button>
        </div>
      </div>
    </header>
  )
}
[V0_FILE]typescriptreact:file="app/dashboard/analytics/page.tsx"
"use client"

import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { useAuth } from "@/components/auth-provider"
import { getProblems } from "@/lib/storage"
import { useEffect, useState } from "react"
import type { Problem } from "@/lib/types"
import { BarChart3, TrendingUp, Clock, AlertTriangle } from "lucide-react"
import {
  Bar,
  BarChart,
  CartesianGrid,
  XAxis,
  YAxis,
  Tooltip,
  ResponsiveContainer,
  Line,
  LineChart,
  Pie,
  PieChart,
  Cell,
  Legend,
} from "recharts"

const COLORS = {
  primary: "#226d68",
  secondary: "#2d8a83",
  accent: "#3da89f",
  warning: "#f59e0b",
  success: "#10b981",
  danger: "#ef4444",
  purple: "#8b5cf6",
}

const CATEGORY_COLORS = [
  "#226d68", // Teal primary
  "#3da89f", // Teal accent
  "#2d8a83", // Teal secondary
  "#f59e0b", // Orange
  "#8b5cf6", // Purple
]

export default function AnalyticsPage() {
  const { user } = useAuth()
  const [problems, setProblems] = useState<Problem[]>([])
  const [selectedUsine, setSelectedUsine] = useState("all")
  const [selectedAtelier, setSelectedAtelier] = useState("all")
  const [selectedLigne, setSelectedLigne] = useState("all")

const monthlyData = [
    { month: "Jan", count: 4 },
    { month: "Fév", count: 5 },
    { month: "Mar", count: 3 },
    { month: "Avr", count: 6 },
    { month: "May", count: 2 },
    { month: "Jun", count: 7 },
    { month: "Jul", count: 4 },
    { month: "Aoû", count: 5 },
    { month: "Sep", count: 6 },
    { month: "Oct", count: 5 },
    { month: "Nov", count: 8 },
    { month: "Déc", count: 3 },
  ]

const categoryData = [
    { name: "Qualité produit", value: 35, count: 7 },
    { name: "Fluctuation client", value: 25, count: 5 },
    { name: "Maintenance", value: 20, count: 4 },
    { name: "Qualité fournisseur", value: 15, count: 3 },
    { name: "Sécurité", value: 5, count: 1 },
  ]

const performanceData = [
    { line: "Ligne 1", problems: 12, resolved: 10 },
    { line: "Ligne 2", problems: 15, resolved: 13 },
    { line: "Ligne 3", problems: 8, resolved: 7 },
    { line: "Magasin", problems: 6, resolved: 5 },
  ]

const resolutionRate = [
    { day: "S1", rate: 65 },
    { day: "S2", rate: 70 },
    { day: "S3", rate: 68 },
    { day: "S4", rate: 75 },
    { day: "S5", rate: 82 },
    { day: "S6", rate: 85 },
  ]

const principalCauses = [
    { cause: "Paramètre machine", percentage: "35%", occurrences: 7 },
    { cause: "Matière première", percentage: "27%", occurrences: 5 },
    { cause: "Formation opérateur", percentage: "19%", occurrences: 4 },
    { cause: "Outillage usé", percentage: "12%", occurrences: 2 },
    { cause: "Autre", percentage: "7%", occurrences: 1 },
  ]

useEffect(() => {
    const allProblems = getProblems()
    setProblems(allProblems)
  }, [])

if (!user) return null

return (
    <div className="space-y-6">
      <div className="gradient-card rounded-lg p-6 text-white">
        <div className="flex items-center gap-3">
          <BarChart3 className="h-10 w-10" />
          <div>
            <h1 className="text-3xl font-bold">Analytics</h1>
            <p className="text-white/90 mt-1">Tableau de bord des indicateurs de performance</p>
          </div>
        </div>
      </div>

<div className="grid md:grid-cols-3 gap-4">
        <div className="space-y-2">
          <label className="text-sm font-medium text-foreground">Toutes les usines</label>
          <Select value={selectedUsine} onValueChange={setSelectedUsine}>
            <SelectTrigger className="h-11 bg-card border-primary/30">
              <SelectValue />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="all">Toutes les usines</SelectItem>
              <SelectItem value="usine1">Usine 1</SelectItem>
              <SelectItem value="usine2">Usine 2</SelectItem>
            </SelectContent>
          </Select>
        </div>

<div className="space-y-2">
          <label className="text-sm font-medium text-foreground">Tous les ateliers</label>
          <Select value={selectedAtelier} onValueChange={setSelectedAtelier}>
            <SelectTrigger className="h-11 bg-card border-primary/30">
              <SelectValue />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="all">Tous les ateliers</SelectItem>
              <SelectItem value="atelier1">Atelier A</SelectItem>
              <SelectItem value="atelier2">Atelier B</SelectItem>
            </SelectContent>
          </Select>
        </div>

<div className="space-y-2">
          <label className="text-sm font-medium text-foreground">Toutes les lignes</label>
          <Select value={selectedLigne} onValueChange={setSelectedLigne}>
            <SelectTrigger className="h-11 bg-card border-primary/30">
              <SelectValue />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="all">Toutes les lignes</SelectItem>
              <SelectItem value="ligne1">Ligne 1</SelectItem>
              <SelectItem value="ligne2">Ligne 2</SelectItem>
            </SelectContent>
          </Select>
        </div>
      </div>

<div className="grid gap-6 md:grid-cols-4">
        <Card className="border-l-4 border-l-primary bg-gradient-to-br from-card to-primary/5">
          <CardContent className="p-6">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm font-medium text-muted-foreground">Problèmes ouverts</p>
                <p className="text-4xl font-bold text-primary mt-2">9</p>
              </div>
              <AlertTriangle className="h-10 w-10 text-primary opacity-20" />
            </div>
          </CardContent>
        </Card>

<Card className="border-l-4 border-l-accent bg-gradient-to-br from-card to-accent/5">
          <CardContent className="p-6">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm font-medium text-muted-foreground">Sans date de clôture</p>
                <p className="text-4xl font-bold text-accent mt-2">9</p>
              </div>
              <Clock className="h-10 w-10 text-accent opacity-20" />
            </div>
          </CardContent>
        </Card>

<Card className="border-l-4 border-l-[#f59e0b] bg-gradient-to-br from-card to-orange-500/5">
          <CardContent className="p-6">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm font-medium text-muted-foreground">Aucun pilote affecté</p>
                <p className="text-4xl font-bold text-[#f59e0b] mt-2">12</p>
              </div>
              <TrendingUp className="h-10 w-10 text-[#f59e0b] opacity-20" />
            </div>
          </CardContent>
        </Card>

<Card className="border-l-4 border-l-[#8b5cf6] bg-gradient-to-br from-card to-purple-500/5">
          <CardContent className="p-6">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm font-medium text-muted-foreground">Temps de fermeture moyen</p>
                <p className="text-4xl font-bold text-[#8b5cf6] mt-2">40</p>
              </div>
              <BarChart3 className="h-10 w-10 text-[#8b5cf6] opacity-20" />
            </div>
          </CardContent>
        </Card>
      </div>

<div className="grid md:grid-cols-2 gap-6">
        <Card className="border-primary/20">
          <CardHeader className="bg-card/50">
            <CardTitle className="flex items-center gap-2">
              <TrendingUp className="h-5 w-5 text-primary" />
              Tendance mensuelle
            </CardTitle>
          </CardHeader>
          <CardContent className="pt-6">
            <ResponsiveContainer width="100%" height={250}>
              <BarChart data={monthlyData}>
                <CartesianGrid strokeDasharray="3 3" stroke="#1e2d2a" />
                <XAxis dataKey="month" stroke="#9ca8a4" />
                <YAxis stroke="#9ca8a4" />
                <Tooltip
                  contentStyle={{
                    backgroundColor: "#121716",
                    border: "1px solid #226d68",
                    borderRadius: "8px",
                  }}
                />
                <Bar dataKey="count" fill="#f59e0b" radius={[8, 8, 0, 0]} />
                <Bar dataKey="count" fill="#10b981" radius={[8, 8, 0, 0]} />
              </BarChart>
            </ResponsiveContainer>
          </CardContent>
        </Card>

<Card className="border-primary/20">
          <CardHeader className="bg-card/50">
            <CardTitle className="flex items-center gap-2">
              <BarChart3 className="h-5 w-5 text-accent" />
              Répartition par catégorie
            </CardTitle>
          </CardHeader>
          <CardContent className="pt-6">
            <ResponsiveContainer width="100%" height={250}>
              <PieChart>
                <Pie
                  data={categoryData}
                  cx="50%"
                  cy="50%"
                  innerRadius={60}
                  outerRadius={90}
                  paddingAngle={5}
                  dataKey="value"
                >
                  {categoryData.map((entry, index) => (
                    <Cell key={`cell-${index}`} fill={CATEGORY_COLORS[index % CATEGORY_COLORS.length]} />
                  ))}
                </Pie>
                <Tooltip
                  contentStyle={{
                    backgroundColor: "#121716",
                    border: "1px solid #226d68",
                    borderRadius: "8px",
                  }}
                />
                <Legend />
              </PieChart>
            </ResponsiveContainer>
          </CardContent>
        </Card>
      </div>

<Card className="border-primary/20">
        <CardHeader className="bg-card/50">
          <CardTitle className="flex items-center gap-2">
            <Clock className="h-5 w-5 text-[#8b5cf6]" />
            Taux de résolution (6 dernières semaines)
          </CardTitle>
        </CardHeader>
        <CardContent className="pt-6">
          <ResponsiveContainer width="100%" height={250}>
            <LineChart data={resolutionRate}>
              <CartesianGrid strokeDasharray="3 3" stroke="#1e2d2a" />
              <XAxis dataKey="day" stroke="#9ca8a4" />
              <YAxis stroke="#9ca8a4" />
              <Tooltip
                contentStyle={{
                  backgroundColor: "#121716",
                  border: "1px solid #226d68",
                  borderRadius: "8px",
                }}
              />
              <Line
                type="monotone"
                dataKey="rate"
                stroke="#3da89f"
                strokeWidth={3}
                dot={{ fill: "#226d68", r: 6 }}
                activeDot={{ r: 8 }}
              />
            </LineChart>
          </ResponsiveContainer>
        </CardContent>
      </Card>

<Card className="border-primary/20">
        <CardHeader className="bg-card/50">
          <CardTitle className="flex items-center gap-2">
            <BarChart3 className="h-5 w-5 text-[#10b981]" />
            Performance par ligne
          </CardTitle>
        </CardHeader>
        <CardContent className="pt-6">
          <ResponsiveContainer width="100%" height={250}>
            <BarChart data={performanceData} layout="vertical">
              <CartesianGrid strokeDasharray="3 3" stroke="#1e2d2a" />
              <XAxis type="number" stroke="#9ca8a4" />
              <YAxis dataKey="line" type="category" stroke="#9ca8a4" width={100} />
              <Tooltip
                contentStyle={{
                  backgroundColor: "#121716",
                  border: "1px solid #226d68",
                  borderRadius: "8px",
                }}
              />
              <Legend />
              <Bar dataKey="problems" fill="#ef4444" name="Problèmes" radius={[0, 8, 8, 0]} />
              <Bar dataKey="resolved" fill="#10b981" name="Résolus" radius={[0, 8, 8, 0]} />
            </BarChart>
          </ResponsiveContainer>
        </CardContent>
      </Card>

<Card className="border-primary/20">
        <CardHeader className="bg-card/50">
          <CardTitle className="flex items-center gap-2">
            <AlertTriangle className="h-5 w-5 text-[#f59e0b]" />
            Analyse Pareto - Causes principales
          </CardTitle>
        </CardHeader>
        <CardContent className="pt-6">
          <div className="space-y-4">
            {principalCauses.map((item, index) => (
              <div key={index} className="space-y-2">
                <div className="flex items-center justify-between text-sm">
                  <span className="font-medium text-foreground">{item.cause}</span>
                  <div className="flex items-center gap-3">
                    <span className="text-muted-foreground">{item.occurrences} occurrences</span>
                    <span className="font-bold text-primary">{item.percentage}</span>
                  </div>
                </div>
                <div className="h-3 bg-muted rounded-full overflow-hidden">
                  <div
                    className="h-full rounded-full transition-all duration-500"
                    style={{
                      width: item.percentage,
                      background: CATEGORY_COLORS[index % CATEGORY_COLORS.length],
                    }}
                  />
                </div>
              </div>
            ))}
          </div>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/dashboard/chef-equipe/page.tsx" isQuickEdit="true"
"use client"

import type React from "react"
import { useState, useEffect } from "react"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import { useAuth } from "@/components/auth-provider"
import { addProblem, getProblems, getNotifications, markNotificationAsRead } from "@/lib/storage"
import type { Problem } from "@/lib/types"
import { Upload, FileVideo, X, Bell, ClipboardCheck } from "lucide-react"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Badge } from "@/components/ui/badge"

export default function ChefEquipePage() {
  const { user } = useAuth()
  const [notifications, setNotifications] = useState<any[]>([])
  const [formData, setFormData] = useState({
    dateSignalement: new Date().toISOString().split("T")[0],
    numeroPoste: "",
    idOperateur: "",
    descriptionProbleme: "",
    methodeDetection: "",
    quantiteImpactee: "",
    importanceProbleme: "",
  })

const [uploadedFiles, setUploadedFiles] = useState<Array<{ name: string; type: string; preview: string }>>([])

useEffect(() => {
    if (user) {
      const allNotifications = getNotifications().filter((n) => n.user_id === user.user_id)
      setNotifications(allNotifications)
    }
  }, [user])

const unreadCount = notifications.filter((n) => !n.is_read).length

const handleFileUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
    const files = e.target.files
    if (!files) return

Array.from(files).forEach((file) => {
      const reader = new FileReader()
      reader.onloadend = () => {
        setUploadedFiles((prev) => [
          ...prev,
          {
            name: file.name,
            type: file.type.startsWith("image/") ? "image" : "video",
            preview: reader.result as string,
          },
        ])
      }
      reader.readAsDataURL(file)
    })
  }

const removeFile = (index: number) => {
    setUploadedFiles((prev) => prev.filter((_, i) => i !== index))
  }

const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    if (!user) return

const problems = getProblems()
    const newProblem: Problem = {
      problem_id: problems.length > 0 ? Math.max(...problems.map((p) => p.problem_id)) + 1 : 1,
      titre: `Problème poste ${formData.numeroPoste}`,
      description: formData.descriptionProbleme,
      date_declaration: formData.dateSignalement,
      declared_by: user.user_id,
      status: "Ouvert",
      level: "Atelier",
      qui: `Opérateur ${formData.idOperateur}`,
      quoi: formData.descriptionProbleme,
      ou: `Poste ${formData.numeroPoste}`,
      quand: formData.dateSignalement,
      comment: formData.methodeDetection,
      combien: formData.quantiteImpactee,
      pourquoi: formData.importanceProbleme,
      photos: uploadedFiles.map((f) => f.preview),
    }

addProblem(newProblem)
    alert("Problème signalé avec succès!")

// Reset form
    setFormData({
      dateSignalement: new Date().toISOString().split("T")[0],
      numeroPoste: "",
      idOperateur: "",
      descriptionProbleme: "",
      methodeDetection: "",
      quantiteImpactee: "",
      importanceProbleme: "",
    })
    setUploadedFiles([])
  }

const handleMarkAsRead = (notifId: number) => {
    markNotificationAsRead(notifId)
    setNotifications((prev) => prev.map((n) => (n.notification_id === notifId ? { ...n, is_read: true } : n)))
  }

return (
    <div className="space-y-6">
      <div className="gradient-card rounded-lg p-6 text-white">
        <div className="flex items-center justify-between">
          <div>
            <h1 className="text-3xl font-bold">Interface Chef d'Équipe</h1>
            <p className="text-white/90 mt-1">Signalement et réponse aux problèmes</p>
          </div>
          <div className="flex items-center gap-3 bg-white/10 rounded-lg px-4 py-2">
            <Bell className="h-6 w-6" />
            <div className="text-right">
              <div className="text-2xl font-bold">{unreadCount}</div>
              <div className="text-sm opacity-90">Nouveaux</div>
            </div>
          </div>
        </div>
      </div>

<Tabs defaultValue="formulaire" className="w-full">
        <TabsList className="grid w-full grid-cols-2 h-12">
          <TabsTrigger value="formulaire" className="text-base">
            <ClipboardCheck className="mr-2 h-5 w-5" />
            Formulaire
          </TabsTrigger>
          <TabsTrigger value="notifications" className="text-base">
            <Bell className="mr-2 h-5 w-5" />
            Notifications {unreadCount > 0 && <Badge className="ml-2">{unreadCount}</Badge>}
          </TabsTrigger>
        </TabsList>

<TabsContent value="formulaire" className="mt-6">
          <Card className="border-2 border-primary/30">
            <CardHeader className="bg-gradient-to-r from-primary/10 to-accent/10 border-b border-primary/20">
              <CardTitle className="text-xl text-primary">Formulaire de signalement et réponse aux problèmes</CardTitle>
              <CardDescription className="text-base">
                Déclarez les problèmes détectés au niveau poste de travail
              </CardDescription>
            </CardHeader>
            <CardContent className="pt-8">
              <form onSubmit={handleSubmit} className="space-y-6">
                <div className="grid md:grid-cols-2 gap-6">
                  <div className="space-y-2">
                    <Label htmlFor="dateSignalement" className="text-base font-semibold">
                      Signalement de Problème - Date
                    </Label>
                    <Input
                      id="dateSignalement"
                      type="date"
                      value={formData.dateSignalement}
                      onChange={(e) => setFormData({ ...formData, dateSignalement: e.target.value })}
                      className="h-12 border-2 border-primary/30 bg-card"
                      required
                    />
                  </div>

<div className="space-y-2">
                    <Label htmlFor="numeroPoste" className="text-base font-semibold">
                      Numéro du poste de travail
                    </Label>
                    <Input
                      id="numeroPoste"
                      value={formData.numeroPoste}
                      onChange={(e) => setFormData({ ...formData, numeroPoste: e.target.value })}
                      placeholder="Ex: PT-001"
                      className="h-12 border-2 border-primary/30 bg-card"
                      required
                    />
                  </div>
                </div>

<div className="space-y-2">
                  <Label htmlFor="idOperateur" className="text-base font-semibold">
                    ID de l'opérateur
                  </Label>
                  <Input
                    id="idOperateur"
                    value={formData.idOperateur}
                    onChange={(e) => setFormData({ ...formData, idOperateur: e.target.value })}
                    placeholder="Ex: OP-123"
                    className="h-12 border-2 border-primary/30 bg-card"
                    required
                  />
                </div>

<div className="space-y-2">
                  <Label htmlFor="descriptionProbleme" className="text-base font-semibold">
                    Description du problème
                  </Label>
                  <Textarea
                    id="descriptionProbleme"
                    value={formData.descriptionProbleme}
                    onChange={(e) => setFormData({ ...formData, descriptionProbleme: e.target.value })}
                    placeholder="Expliquer clairement l'anomalie observée..."
                    rows={5}
                    className="border-2 border-primary/30 bg-card"
                    required
                  />
                </div>

<div className="space-y-2">
                  <Label htmlFor="methodeDetection" className="text-base font-semibold">
                    Méthode de détection
                  </Label>
                  <Input
                    id="methodeDetection"
                    value={formData.methodeDetection}
                    onChange={(e) => setFormData({ ...formData, methodeDetection: e.target.value })}
                    placeholder="Contrôle visuel, mesure, alerte machine, opérateur..."
                    className="h-12 border-2 border-primary/30 bg-card"
                    required
                  />
                </div>

<div className="grid md:grid-cols-2 gap-6">
                  <div className="space-y-2">
                    <Label htmlFor="quantiteImpactee" className="text-base font-semibold">
                      Quantité impactée
                    </Label>
                    <Input
                      id="quantiteImpactee"
                      value={formData.quantiteImpactee}
                      onChange={(e) => setFormData({ ...formData, quantiteImpactee: e.target.value })}
                      placeholder="Nombre de pièces/unités"
                      className="h-12 border-2 border-primary/30 bg-card"
                      required
                    />
                  </div>
                </div>

<div className="space-y-2">
                  <Label htmlFor="importanceProbleme" className="text-base font-semibold">
                    Importance du problème
                  </Label>
                  <Textarea
                    id="importanceProbleme"
                    value={formData.importanceProbleme}
                    onChange={(e) => setFormData({ ...formData, importanceProbleme: e.target.value })}
                    placeholder="Pourquoi ce problème est critique : impact qualité, sécurité, production..."
                    rows={4}
                    className="border-2 border-primary/30 bg-card"
                    required
                  />
                </div>

<div className="space-y-3">
                  <Label className="text-base font-semibold">Pièces jointes (photos/vidéos)</Label>
                  <div className="border-2 border-dashed border-primary/30 rounded-lg p-6 hover:border-primary/50 transition-colors bg-card/50">
                    <input
                      type="file"
                      id="fileUpload"
                      className="hidden"
                      accept="image/*,video/*"
                      multiple
                      onChange={handleFileUpload}
                    />
                    <label htmlFor="fileUpload" className="flex flex-col items-center justify-center cursor-pointer">
                      <Upload className="h-12 w-12 text-primary mb-3" />
                      <p className="text-base font-medium text-foreground">Cliquez pour ajouter des fichiers</p>
                      <p className="text-sm text-muted-foreground mt-2">
                        Photos ou vidéos du problème (JPEG, PNG, MP4, etc.)
                      </p>
                    </label>
                  </div>

{uploadedFiles.length > 0 && (
                    <div className="grid grid-cols-2 md:grid-cols-3 gap-4 mt-4">
                      {uploadedFiles.map((file, index) => (
                        <div key={index} className="relative group">
                          <div className="border-2 border-primary/30 rounded-lg overflow-hidden bg-card">
                            {file.type === "image" ? (
                              <img
                                src={file.preview || "/placeholder.svg"}
                                alt={file.name}
                                className="w-full h-32 object-cover"
                              />
                            ) : (
                              <div className="w-full h-32 flex items-center justify-center">
                                <FileVideo className="h-12 w-12 text-primary" />
                              </div>
                            )}
                          </div>
                          <button
                            type="button"
                            onClick={() => removeFile(index)}
                            className="absolute -top-2 -right-2 bg-destructive text-white rounded-full p-1.5 opacity-0 group-hover:opacity-100 transition-opacity shadow-lg"
                          >
                            <X className="h-4 w-4" />
                          </button>
                          <p className="text-xs text-muted-foreground mt-1 truncate">{file.name}</p>
                        </div>
                      ))}
                    </div>
                  )}
                </div>

<div className="flex justify-center pt-6">
                  <Button type="submit" size="lg" className="px-16 h-14 text-lg gradient-card hover:opacity-90">
                    Soumettre le problème
                  </Button>
                </div>
              </form>
            </CardContent>
          </Card>
        </TabsContent>

<TabsContent value="notifications" className="mt-6">
          <Card className="border-2 border-accent/30">
            <CardHeader className="bg-gradient-to-r from-accent/10 to-primary/10 border-b border-accent/20">
              <CardTitle className="text-xl text-accent">Notifications des Opérateurs</CardTitle>
              <CardDescription className="text-base">Problèmes signalés nécessitant votre attention</CardDescription>
            </CardHeader>
            <CardContent className="pt-6">
              {notifications.length === 0 ? (
                <div className="text-center py-12">
                  <Bell className="h-16 w-16 mx-auto text-muted-foreground opacity-30 mb-4" />
                  <p className="text-lg text-muted-foreground">Aucune notification pour le moment</p>
                </div>
              ) : (
                <div className="space-y-4">
                  {notifications.map((notif) => (
                    <Card
                      key={notif.notification_id}
                      className={`${notif.is_read ? "opacity-60" : "border-2 border-accent"}`}
                    >
                      <CardContent className="p-4">
                        <div className="flex items-start justify-between gap-4">
                          <div className="flex-1">
                            <p className="text-base font-medium text-foreground">{notif.message}</p>
                            <p className="text-sm text-muted-foreground mt-1">
                              {new Date(notif.date_created).toLocaleString("fr-FR")}
                            </p>
                          </div>
                          {!notif.is_read && (
                            <Button
                              size="sm"
                              onClick={() => handleMarkAsRead(notif.notification_id)}
                              className="gradient-card"
                            >
                              Marquer comme lu
                            </Button>
                          )}
                        </div>
                      </CardContent>
                    </Card>
                  ))}
                </div>
              )}
            </CardContent>
          </Card>
        </TabsContent>
      </Tabs>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/dashboard/responsable/page.tsx"
"use client"

import type React from "react"
import { useState, useEffect } from "react"
import { Card, CardContent } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Textarea } from "@/components/ui/textarea"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { useAuth } from "@/components/auth-provider"
import { useRouter } from "next/navigation"
import { Upload, Bell, CheckCircle } from "lucide-react"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { getNotifications, markNotificationAsRead } from "@/lib/storage"
import { Badge } from "@/components/ui/badge"

export default function ResponsableFormPage() {
  const { user } = useAuth()
  const router = useRouter()
  const [notifications, setNotifications] = useState<any[]>([])
  const [formData, setFormData] = useState({
    causesRacines: "",
    diagrammePareto: null as File | null,
    diagrammeIshikawa: null as File | null,
    actionsCorrectives: "",
  })

useEffect(() => {
    if (user) {
      const allNotifications = getNotifications().filter(
        (n) => n.user_id === user.user_id && n.message.includes("Manager"),
      )
      setNotifications(allNotifications)
    }
  }, [user])

const unreadCount = notifications.filter((n) => !n.is_read).length

const handleFileChange = (field: string, file: File | null) => {
    setFormData((prev) => ({ ...prev, [field]: file }))
  }

const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    alert("Analyse validée avec succès!")
    setFormData({
      causesRacines: "",
      diagrammePareto: null,
      diagrammeIshikawa: null,
      actionsCorrectives: "",
    })
  }

const handleMarkAsRead = (notifId: number) => {
    markNotificationAsRead(notifId)
    setNotifications((prev) => prev.map((n) => (n.notification_id === notifId ? { ...n, is_read: true } : n)))
  }

if (!user || user.role !== "Responsable") {
    return <div>Accès réservé aux Responsables</div>
  }

return (
    <div className="space-y-6">
      <div className="gradient-card rounded-lg p-6 text-white">
        <div className="flex items-center justify-between">
          <div>
            <h1 className="text-3xl font-bold">Hello Mr Responsable 👋</h1>
            <p className="text-white/90 mt-1">Analyse du problème & actions correctives</p>
          </div>
          <div className="flex items-center gap-3 bg-white/10 rounded-lg px-4 py-2">
            <Bell className="h-6 w-6" />
            <div className="text-right">
              <div className="text-2xl font-bold">{unreadCount}</div>
              <div className="text-sm opacity-90">Confirmations</div>
            </div>
          </div>
        </div>
      </div>

<Tabs defaultValue="formulaire" className="w-full">
        <TabsList className="grid w-full grid-cols-2 h-12">
          <TabsTrigger value="formulaire" className="text-base">
            <CheckCircle className="mr-2 h-5 w-5" />
            Formulaire
          </TabsTrigger>
          <TabsTrigger value="notifications" className="text-base">
            <Bell className="mr-2 h-5 w-5" />
            Notifications {unreadCount > 0 && <Badge className="ml-2">{unreadCount}</Badge>}
          </TabsTrigger>
        </TabsList>

<TabsContent value="formulaire" className="mt-6">
          <Card className="border-2 border-[#226d68]/40 shadow-lg">
            <CardContent className="p-10">
              <form onSubmit={handleSubmit} className="space-y-8">
                <div className="space-y-3">
                  <Label htmlFor="causesRacines" className="text-lg font-bold" style={{ color: "#18534f" }}>
                    Analyse des causes racines
                  </Label>
                  <Textarea
                    id="causesRacines"
                    placeholder="Décrivez ici les causes principales du problème..."
                    value={formData.causesRacines}
                    onChange={(e) => setFormData((prev) => ({ ...prev, causesRacines: e.target.value }))}
                    className="min-h-[140px] resize-none border-2 border-[#226d68]/40 focus:border-[#226d68] text-base"
                    style={{ backgroundColor: "#ECF8F6" }}
                    required
                  />
                </div>

<div className="space-y-3">
                  <Label htmlFor="pareto" className="text-lg font-bold" style={{ color: "#18534f" }}>
                    Diagramme de Pareto
                  </Label>
                  <div
                    className="border-2 border-dashed rounded-lg p-8 text-center hover:border-[#226d68] transition-colors cursor-pointer"
                    style={{ borderColor: "#226d68", backgroundColor: "#ECF8F6" }}
                  >
                    <Input
                      id="pareto"
                      type="file"
                      accept="image/*,.pdf"
                      onChange={(e) => handleFileChange("diagrammePareto", e.target.files?.[0] || null)}
                      className="hidden"
                    />
                    <label htmlFor="pareto" className="cursor-pointer flex flex-col items-center gap-3">
                      <Upload className="h-12 w-12" style={{ color: "#226d68" }} />
                      <span className="text-base font-medium" style={{ color: "#18534f" }}>
                        {formData.diagrammePareto ? formData.diagrammePareto.name : "Choisir un fichier"}
                      </span>
                      <span className="text-sm text-muted-foreground">
                        {formData.diagrammePareto ? "" : "Aucun fichier choisi"}
                      </span>
                    </label>
                  </div>
                </div>

<div className="space-y-3">
                  <Label htmlFor="ishikawa" className="text-lg font-bold" style={{ color: "#18534f" }}>
                    Diagramme d'Ishikawa
                  </Label>
                  <div
                    className="border-2 border-dashed rounded-lg p-8 text-center hover:border-[#226d68] transition-colors cursor-pointer"
                    style={{ borderColor: "#226d68", backgroundColor: "#ECF8F6" }}
                  >
                    <Input
                      id="ishikawa"
                      type="file"
                      accept="image/*,.pdf"
                      onChange={(e) => handleFileChange("diagrammeIshikawa", e.target.files?.[0] || null)}
                      className="hidden"
                    />
                    <label htmlFor="ishikawa" className="cursor-pointer flex flex-col items-center gap-3">
                      <Upload className="h-12 w-12" style={{ color: "#226d68" }} />
                      <span className="text-base font-medium" style={{ color: "#18534f" }}>
                        {formData.diagrammeIshikawa ? formData.diagrammeIshikawa.name : "Choisir un fichier"}
                      </span>
                      <span className="text-sm text-muted-foreground">
                        {formData.diagrammeIshikawa ? "" : "Aucun fichier choisi"}
                      </span>
                    </label>
                  </div>
                </div>

<div className="space-y-3">
                  <Label htmlFor="actionsCorrectives" className="text-lg font-bold" style={{ color: "#18534f" }}>
                    Actions correctives
                  </Label>
                  <Textarea
                    id="actionsCorrectives"
                    placeholder="Définissez les actions correctives à mettre en place..."
                    value={formData.actionsCorrectives}
                    onChange={(e) => setFormData((prev) => ({ ...prev, actionsCorrectives: e.target.value }))}
                    className="min-h-[140px] resize-none border-2 border-[#226d68]/40 focus:border-[#226d68] text-base"
                    style={{ backgroundColor: "#ECF8F6" }}
                    required
                  />
                </div>

<Button
                  type="submit"
                  className="w-full py-7 text-lg font-bold"
                  style={{ background: "linear-gradient(135deg, #18534f 0%, #226d68 100%)" }}
                >
                  Valider l'analyse
                </Button>
              </form>
            </CardContent>
          </Card>
        </TabsContent>

<TabsContent value="notifications" className="mt-6">
          <Card className="border-2 border-[#2d8a83]/40">
            <CardContent className="pt-6">
              {notifications.length === 0 ? (
                <div className="text-center py-12">
                  <Bell className="h-16 w-16 mx-auto text-muted-foreground opacity-30 mb-4" />
                  <p className="text-lg text-muted-foreground">Aucune notification pour le moment</p>
                </div>
              ) : (
                <div className="space-y-4">
                  {notifications.map((notif) => (
                    <Card
                      key={notif.notification_id}
                      className={`${notif.is_read ? "opacity-60" : "border-2"}`}
                      style={{ borderColor: notif.is_read ? undefined : "#226d68" }}
                    >
                      <CardContent className="p-4">
                        <div className="flex items-start justify-between gap-4">
                          <div className="flex-1">
                            <p className="text-base font-medium text-foreground">{notif.message}</p>
                            <p className="text-sm text-muted-foreground mt-1">
                              {new Date(notif.date_created).toLocaleString("fr-FR")}
                            </p>
                          </div>
                          {!notif.is_read && (
                            <Button
                              size="sm"
                              onClick={() => handleMarkAsRead(notif.notification_id)}
                              style={{ background: "linear-gradient(135deg, #18534f 0%, #226d68 100%)" }}
                            >
                              Marquer comme lu
                            </Button>
                          )}
                        </div>
                      </CardContent>
                    </Card>
                  ))}
                </div>
              )}
            </CardContent>
          </Card>
        </TabsContent>
      </Tabs>
    </div>
  )
}
[V0_FILE]css:file="app/globals.css"
@import "tailwindcss";
@import "tw-animate-css";

@custom-variant dark (&:is(.dark *));

:root {
  --background: oklch(1 0 0);
  --foreground: oklch(0.145 0 0);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.145 0 0);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.145 0 0);
  --primary: oklch(0.205 0 0);
  --primary-foreground: oklch(0.985 0 0);
  --secondary: oklch(0.97 0 0);
  --secondary-foreground: oklch(0.205 0 0);
  --muted: oklch(0.97 0 0);
  --muted-foreground: oklch(0.556 0 0);
  --accent: oklch(0.97 0 0);
  --accent-foreground: oklch(0.205 0 0);
  --destructive: oklch(0.577 0.245 27.325);
  --destructive-foreground: oklch(0.577 0.245 27.325);
  --border: oklch(0.922 0 0);
  --input: oklch(0.922 0 0);
  --ring: oklch(0.708 0 0);
  --chart-1: oklch(0.646 0.222 41.116);
  --chart-2: oklch(0.6 0.118 184.704);
  --chart-3: oklch(0.398 0.07 227.392);
  --chart-4: oklch(0.828 0.189 84.429);
  --chart-5: oklch(0.769 0.188 70.08);
  --radius: 0.625rem;
  --sidebar: oklch(0.985 0 0);
  --sidebar-foreground: oklch(0.145 0 0);
  --sidebar-primary: oklch(0.205 0 0);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.97 0 0);
  --sidebar-accent-foreground: oklch(0.205 0 0);
  --sidebar-border: oklch(0.922 0 0);
  --sidebar-ring: oklch(0.708 0 0);
}

/* Nouvelles couleurs teal/turquoise attirantes inspirées de l'image */
.dark {
  --background: #f0faf9;
  --foreground: #1a4d4a;
  --card: #ffffff;
  --card-foreground: #1a4d4a;
  --popover: #ffffff;
  --popover-foreground: #1a4d4a;
  --primary: #5a9e9a;
  --primary-foreground: #ffffff;
  --secondary: #74b5af;
  --secondary-foreground: #ffffff;
  --muted: #e0f2f1;
  --muted-foreground: #4a7a75;
  --accent: #4a9089;
  --accent-foreground: #ffffff;
  --destructive: #ef4444;
  --destructive-foreground: #ffffff;
  --border: #b2d8d4;
  --input: #e0f2f1;
  --ring: #5a9e9a;
  --chart-1: #5a9e9a;
  --chart-2: #74b5af;
  --chart-3: #4a9089;
  --chart-4: #8eccc5;
  --chart-5: #a5ddd7;
  --sidebar: #f0faf9;
  --sidebar-foreground: #1a4d4a;
  --sidebar-primary: #5a9e9a;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #74b5af;
  --sidebar-accent-foreground: #ffffff;
  --sidebar-border: #b2d8d4;
  --sidebar-ring: #5a9e9a;
}

@theme inline {
  --font-sans: "Geist", "Geist Fallback";
  --font-mono: "Geist Mono", "Geist Mono Fallback";
  --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;
  }
}

/* Nouveaux gradients teal/turquoise */
.gradient-teal {
  background: linear-gradient(135deg, #5a9e9a 0%, #74b5af 100%);
}

.gradient-card {
  background: linear-gradient(135deg, #4a9089 0%, #5a9e9a 100%);
}

.gradient-accent {
  background: linear-gradient(135deg, #74b5af 0%, #8eccc5 100%);
}

/* Backgrounds décoratifs */
.bg-teal-pattern {
  background-color: #74b5af;
  background-image: radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(255, 255, 255, 0.08) 0%, transparent 50%);
}
[V0_FILE]typescriptreact:file="app/dashboard/operateur/page.tsx"
"use client"
import { useState } from "react"
import { Card, CardContent } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
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 { useAuth } from "@/components/auth-provider"
import { addNotification, getUsers } from "@/lib/storage"
import { AlertCircle, Send, CheckCircle } from "lucide-react"

export default function OperateurPage() {
  const { user } = useAuth()
  const [formData, setFormData] = useState({
    numeroPoste: "",
    descriptionProbleme: "",
    urgence: "Moyen",
  })
  const [showSuccess, setShowSuccess] = useState(false)

const handleNotify = () => {
    if (!user) return
    if (!formData.numeroPoste || !formData.descriptionProbleme) {
      alert("Veuillez remplir tous les champs requis")
      return
    }

const users = getUsers()
    const teamLeaders = users.filter((u) => u.role === "Chef d'équipe")

teamLeaders.forEach((tl) => {
      addNotification({
        notification_id: Date.now() + Math.random(),
        user_id: tl.user_id,
        message: `Problème signalé au poste ${formData.numeroPoste} par ${user.nom} - Urgence: ${formData.urgence} - ${formData.descriptionProbleme.substring(0, 50)}...`,
        problem_id: null,
        step_id: null,
        date_created: new Date().toISOString(),
        is_read: false,
      })
    })

setShowSuccess(true)
    setTimeout(() => setShowSuccess(false), 3000)

setFormData({
      numeroPoste: "",
      descriptionProbleme: "",
      urgence: "Moyen",
    })
  }

return (
    <div className="min-h-screen" style={{ background: "linear-gradient(to bottom, #f0faf9 0%, #e0f2f1 100%)" }}>
      <div className="max-w-4xl mx-auto space-y-8 p-6">
        <div
          className="bg-teal-pattern rounded-2xl p-10 text-white text-center shadow-2xl"
          style={{ background: "linear-gradient(135deg, #5a9e9a 0%, #74b5af 100%)" }}
        >
          <div className="bg-white/20 w-20 h-20 rounded-full flex items-center justify-center mx-auto mb-6">
            <AlertCircle className="h-12 w-12" />
          </div>
          <h1 className="text-5xl font-bold mb-3">Interface Opérateur</h1>
          <p className="text-2xl text-white/95">Signaler un problème à votre Team Leader</p>
        </div>

{showSuccess && (
          <Card className="border-4 border-green-500 bg-green-50 animate-in fade-in slide-in-from-top-5 shadow-lg">
            <CardContent className="py-6">
              <div className="flex items-center gap-4 text-green-600">
                <CheckCircle className="h-8 w-8" />
                <p className="font-bold text-xl">Signalement envoyé avec succès au Team Leader!</p>
              </div>
            </CardContent>
          </Card>
        )}

<Card className="border-4 shadow-2xl" style={{ borderColor: "#5a9e9a" }}>
          <CardContent className="pt-12 pb-12 px-10">
            <div className="space-y-10">
              <div className="space-y-4">
                <Label htmlFor="numeroPoste" className="text-xl font-bold text-[#1a4d4a]">
                  Numéro du poste de travail <span className="text-red-500 text-2xl">*</span>
                </Label>
                <Input
                  id="numeroPoste"
                  value={formData.numeroPoste}
                  onChange={(e) => setFormData({ ...formData, numeroPoste: e.target.value })}
                  placeholder="Ex: PT-001, Ligne A - Poste 3"
                  className="h-16 text-lg font-medium border-4 focus:border-[#4a9089] shadow-sm"
                  style={{ backgroundColor: "white", borderColor: "#b2d8d4" }}
                  required
                />
              </div>

<div className="space-y-4">
                <Label htmlFor="descriptionProbleme" className="text-xl font-bold text-[#1a4d4a]">
                  Description du problème <span className="text-red-500 text-2xl">*</span>
                </Label>
                <Textarea
                  id="descriptionProbleme"
                  value={formData.descriptionProbleme}
                  onChange={(e) => setFormData({ ...formData, descriptionProbleme: e.target.value })}
                  placeholder="Décrivez le problème observé : défaut qualité, panne machine, manque de pièces..."
                  rows={8}
                  className="resize-none text-lg font-medium border-4 focus:border-[#4a9089] shadow-sm"
                  style={{ backgroundColor: "white", borderColor: "#b2d8d4" }}
                  required
                />
              </div>

<div className="space-y-4">
                <Label htmlFor="urgence" className="text-xl font-bold text-[#1a4d4a]">
                  Niveau d'urgence <span className="text-red-500 text-2xl">*</span>
                </Label>
                <Select
                  value={formData.urgence}
                  onValueChange={(value) => setFormData({ ...formData, urgence: value })}
                >
                  <SelectTrigger
                    className="h-16 text-lg font-medium border-4 shadow-sm"
                    style={{ backgroundColor: "white", borderColor: "#b2d8d4" }}
                  >
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="Faible" className="text-lg py-3">
                      Faible - Peut attendre
                    </SelectItem>
                    <SelectItem value="Moyen" className="text-lg py-3">
                      Moyen - À traiter bientôt
                    </SelectItem>
                    <SelectItem value="Élevé" className="text-lg py-3">
                      Élevé - Urgent
                    </SelectItem>
                    <SelectItem value="Critique" className="text-lg py-3">
                      Critique - Arrêt production
                    </SelectItem>
                  </SelectContent>
                </Select>
              </div>

<div className="pt-6">
                <Button
                  onClick={handleNotify}
                  size="lg"
                  className="w-full h-20 text-2xl font-bold hover:opacity-90 transition-all shadow-xl"
                  style={{ background: "linear-gradient(135deg, #4a9089 0%, #5a9e9a 100%)" }}
                >
                  <Send className="mr-4 h-8 w-8" />
                  Notifier le Team Leader
                </Button>
              </div>
            </div>
          </CardContent>
        </Card>

<Card className="border-4 shadow-lg" style={{ borderColor: "#74b5af", backgroundColor: "#f0faf9" }}>
          <CardContent className="py-8">
            <div className="flex items-start gap-6">
              <div
                className="w-14 h-14 rounded-full flex items-center justify-center flex-shrink-0"
                style={{ backgroundColor: "#5a9e9a" }}
              >
                <AlertCircle className="h-8 w-8 text-white" />
              </div>
              <div className="space-y-3">
                <p className="font-bold text-2xl text-[#1a4d4a]">Information importante</p>
                <p className="text-lg text-[#4a7a75] leading-relaxed">
                  Une fois votre signalement envoyé, votre Team Leader sera immédiatement notifié et viendra inspecter
                  le poste pour remplir le formulaire détaillé et lancer la démarche 8D si nécessaire.
                </p>
              </div>
            </div>
          </CardContent>
        </Card>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/dashboard/superviseur/page.tsx" isQuickEdit="true"
"use client"

import type React from "react"
import { useState, useEffect } from "react"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import { Checkbox } from "@/components/ui/checkbox"
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
import { useAuth } from "@/components/auth-provider"
import { addProblem, getProblems, getNotifications, markNotificationAsRead } from "@/lib/storage"
import type { Problem } from "@/lib/types"
import { Bell, ClipboardCheck, AlertCircle } from "lucide-react"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Badge } from "@/components/ui/badge"

export default function SuperviseurPage() {
  const { user } = useAuth()
  const [notifications, setNotifications] = useState<any[]>([])
  const [formData, setFormData] = useState({
    nomSuperviseur: user?.nom || "",
    descriptionProbleme: "",
    actionsCorrectices: "",
    fichierPDF: "",
    processusContinue: "Oui",
    risquePersonnel: "Non",
    risqueEquipement: "Non",
    typeNonConformite: [] as string[],
    responsables: [] as string[],
  })

useEffect(() => {
    if (user) {
      const allNotifications = getNotifications().filter(
        (n) => n.user_id === user.user_id && n.message.includes("validation"),
      )
      setNotifications(allNotifications)
    }
  }, [user])

const unreadCount = notifications.filter((n) => !n.is_read).length

const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    if (!user) return

const problems = getProblems()
    const newProblem: Problem = {
      problem_id: problems.length > 0 ? Math.max(...problems.map((p) => p.problem_id)) + 1 : 1,
      titre: `Problème superviseur - ${formData.nomSuperviseur}`,
      description: formData.descriptionProbleme,
      date_declaration: new Date().toISOString().split("T")[0],
      declared_by: user.user_id,
      status: "Ouvert",
      level: "Ligne",
      photos: [],
    }

addProblem(newProblem)
    alert("Problème soumis avec succès!")

setFormData({
      ...formData,
      descriptionProbleme: "",
      actionsCorrectices: "",
      fichierPDF: "",
    })
  }

const handleMarkAsRead = (notifId: number) => {
    markNotificationAsRead(notifId)
    setNotifications((prev) => prev.map((n) => (n.notification_id === notifId ? { ...n, is_read: true } : n)))
  }

return (
    <div className="space-y-6">
      <div
        className="rounded-2xl p-8 text-white shadow-2xl"
        style={{ background: "linear-gradient(135deg, #5a9e9a 0%, #74b5af 100%)" }}
      >
        <div className="flex items-center justify-between">
          <div>
            <h1 className="text-4xl font-bold">Dashboard Superviseur</h1>
            <p className="text-xl text-white/95 mt-2">Gestion des problèmes au niveau ligne</p>
          </div>
          <div className="flex items-center gap-4 bg-white/20 rounded-xl px-6 py-4">
            <Bell className="h-8 w-8" />
            <div className="text-right">
              <div className="text-3xl font-bold">{unreadCount}</div>
              <div className="text-base opacity-95">Nouveaux problèmes TL à traiter</div>
            </div>
          </div>
        </div>
      </div>

<Tabs defaultValue="formulaire" className="w-full">
        <TabsList className="grid w-full grid-cols-2 h-14 p-1" style={{ backgroundColor: "#e0f2f1" }}>
          <TabsTrigger
            value="formulaire"
            className="text-lg font-semibold data-[state=active]:bg-white data-[state=active]:text-[#1a4d4a]"
            style={{ color: "#4a7a75" }}
          >
            <ClipboardCheck className="mr-2 h-6 w-6" />
            Formulaire
          </TabsTrigger>
          <TabsTrigger
            value="notifications"
            className="text-lg font-semibold data-[state=active]:bg-white data-[state=active]:text-[#1a4d4a]"
            style={{ color: "#4a7a75" }}
          >
            <Bell className="mr-2 h-6 w-6" />
            Notifications {unreadCount > 0 && <Badge className="ml-2 bg-[#5a9e9a]">{unreadCount}</Badge>}
          </TabsTrigger>
        </TabsList>

<TabsContent value="formulaire" className="mt-6">
          <Card className="border-4 shadow-2xl" style={{ borderColor: "#5a9e9a" }}>
            <CardHeader
              className="border-b-4"
              style={{ background: "linear-gradient(to right, white, #f0faf9)", borderColor: "#b2d8d4" }}
            >
              <CardTitle className="text-3xl font-bold text-[#1a4d4a]">Formulaire Superviseur</CardTitle>
              <CardDescription className="text-lg text-[#4a7a75]">
                Déclaration et gestion des problèmes de ligne
              </CardDescription>
            </CardHeader>
            <CardContent className="pt-10 pb-10 px-8" style={{ backgroundColor: "#fafffe" }}>
              <form onSubmit={handleSubmit} className="space-y-8">
                <div className="space-y-3">
                  <Label htmlFor="nomSuperviseur" className="text-lg font-bold text-[#1a4d4a]">
                    Nom du superviseur :
                  </Label>
                  <Input
                    id="nomSuperviseur"
                    value={formData.nomSuperviseur}
                    onChange={(e) => setFormData({ ...formData, nomSuperviseur: e.target.value })}
                    placeholder="Nom complet"
                    className="h-14 border-3 text-lg font-medium shadow-sm focus:border-[#4a9089]"
                    style={{ backgroundColor: "white", borderColor: "#b2d8d4", borderWidth: "3px" }}
                    required
                  />
                </div>

<div className="space-y-3">
                  <Label htmlFor="descriptionProbleme" className="text-lg font-bold text-[#1a4d4a]">
                    Description du problème :
                  </Label>
                  <Textarea
                    id="descriptionProbleme"
                    value={formData.descriptionProbleme}
                    onChange={(e) => setFormData({ ...formData, descriptionProbleme: e.target.value })}
                    placeholder="Décris ici le problème rencontré..."
                    rows={6}
                    className="border-3 text-lg font-medium shadow-sm focus:border-[#4a9089]"
                    style={{ backgroundColor: "white", borderColor: "#b2d8d4", borderWidth: "3px" }}
                    required
                  />
                </div>

<div className="space-y-3">
                  <Label htmlFor="actionsCorrectices" className="text-lg font-bold text-[#1a4d4a]">
                    Actions correctives :
                  </Label>
                  <Textarea
                    id="actionsCorrectices"
                    value={formData.actionsCorrectices}
                    onChange={(e) => setFormData({ ...formData, actionsCorrectices: e.target.value })}
                    placeholder="Indiquez les actions correctives prévues..."
                    rows={5}
                    className="border-3 text-lg font-medium shadow-sm focus:border-[#4a9089]"
                    style={{ backgroundColor: "white", borderColor: "#b2d8d4", borderWidth: "3px" }}
                  />
                </div>

<div className="space-y-3">
                  <Label htmlFor="fichierPDF" className="text-lg font-bold text-[#1a4d4a]">
                    Joindre un fichier PDF :
                  </Label>
                  <Input
                    id="fichierPDF"
                    type="text"
                    value={formData.fichierPDF}
                    onChange={(e) => setFormData({ ...formData, fichierPDF: e.target.value })}
                    placeholder="Choisir fichier / Aucun fichier choisi"
                    className="h-14 border-3 text-lg font-medium shadow-sm"
                    style={{ backgroundColor: "white", borderColor: "#b2d8d4", borderWidth: "3px" }}
                  />
                </div>

<div
                  className="space-y-5 rounded-xl border-3 p-6"
                  style={{ backgroundColor: "white", borderColor: "#b2d8d4", borderWidth: "3px" }}
                >
                  <Label className="text-lg font-bold text-[#1a4d4a]">Le processus peut-il continuer ?</Label>
                  <RadioGroup
                    value={formData.processusContinue}
                    onValueChange={(value) => setFormData({ ...formData, processusContinue: value })}
                    className="flex gap-10"
                  >
                    <div className="flex items-center space-x-3">
                      <RadioGroupItem value="Oui" id="processus-oui" className="w-5 h-5" />
                      <Label htmlFor="processus-oui" className="font-semibold cursor-pointer text-lg text-[#1a4d4a]">
                        Oui
                      </Label>
                    </div>
                    <div className="flex items-center space-x-3">
                      <RadioGroupItem value="Non" id="processus-non" className="w-5 h-5" />
                      <Label htmlFor="processus-non" className="font-semibold cursor-pointer text-lg text-[#1a4d4a]">
                        Non
                      </Label>
                    </div>
                  </RadioGroup>
                </div>

<div
                  className="space-y-5 rounded-xl border-3 p-6"
                  style={{ backgroundColor: "white", borderColor: "#b2d8d4", borderWidth: "3px" }}
                >
                  <Label className="text-lg font-bold text-[#1a4d4a]">Risque pour le personnel :</Label>
                  <RadioGroup
                    value={formData.risquePersonnel}
                    onValueChange={(value) => setFormData({ ...formData, risquePersonnel: value })}
                    className="flex gap-10"
                  >
                    <div className="flex items-center space-x-3">
                      <RadioGroupItem value="Oui" id="risque-personnel-oui" className="w-5 h-5" />
                      <Label
                        htmlFor="risque-personnel-oui"
                        className="font-semibold cursor-pointer text-lg text-[#1a4d4a]"
                      >
                        Oui
                      </Label>
                    </div>
                    <div className="flex items-center space-x-3">
                      <RadioGroupItem value="Non" id="risque-personnel-non" className="w-5 h-5" />
                      <Label
                        htmlFor="risque-personnel-non"
                        className="font-semibold cursor-pointer text-lg text-[#1a4d4a]"
                      >
                        Non
                      </Label>
                    </div>
                  </RadioGroup>
                </div>

<div
                  className="space-y-5 rounded-xl border-3 p-6"
                  style={{ backgroundColor: "white", borderColor: "#b2d8d4", borderWidth: "3px" }}
                >
                  <Label className="text-lg font-bold text-[#1a4d4a]">Risque pour les équipements :</Label>
                  <RadioGroup
                    value={formData.risqueEquipement}
                    onValueChange={(value) => setFormData({ ...formData, risqueEquipement: value })}
                    className="flex gap-10"
                  >
                    <div className="flex items-center space-x-3">
                      <RadioGroupItem value="Oui" id="risque-equipement-oui" className="w-5 h-5" />
                      <Label
                        htmlFor="risque-equipement-oui"
                        className="font-semibold cursor-pointer text-lg text-[#1a4d4a]"
                      >
                        Oui
                      </Label>
                    </div>
                    <div className="flex items-center space-x-3">
                      <RadioGroupItem value="Non" id="risque-equipement-non" className="w-5 h-5" />
                      <Label
                        htmlFor="risque-equipement-non"
                        className="font-semibold cursor-pointer text-lg text-[#1a4d4a]"
                      >
                        Non
                      </Label>
                    </div>
                  </RadioGroup>
                </div>

<div
                  className="space-y-5 rounded-xl border-3 p-6"
                  style={{ backgroundColor: "white", borderColor: "#b2d8d4", borderWidth: "3px" }}
                >
                  <Label className="text-lg font-bold text-[#1a4d4a]">Type de non-conformité :</Label>
                  <div className="grid grid-cols-2 gap-5">
                    {["Produit", "Processus", "Documentation", "Matière première"].map((type) => (
                      <div key={type} className="flex items-center space-x-3">
                        <Checkbox
                          id={`type-${type}`}
                          checked={formData.typeNonConformite.includes(type)}
                          onCheckedChange={(checked) => {
                            if (checked) {
                              setFormData({
                                ...formData,
                                typeNonConformite: [...formData.typeNonConformite, type],
                              })
                            } else {
                              setFormData({
                                ...formData,
                                typeNonConformite: formData.typeNonConformite.filter((t) => t !== type),
                              })
                            }
                          }}
                          className="w-5 h-5"
                        />
                        <Label htmlFor={`type-${type}`} className="font-semibold cursor-pointer text-lg text-[#1a4d4a]">
                          {type}
                        </Label>
                      </div>
                    ))}
                  </div>
                </div>

<div
                  className="space-y-5 rounded-xl border-3 p-6"
                  style={{ backgroundColor: "white", borderColor: "#b2d8d4", borderWidth: "3px" }}
                >
                  <Label className="text-lg font-bold text-[#1a4d4a]">Responsables concernés :</Label>
                  <div className="grid grid-cols-2 gap-5">
                    {["Respo Qualité", "Respo Lean", "Respo HSE", "Respo Maintenance", "Respo Logistique"].map(
                      (resp) => (
                        <div key={resp} className="flex items-center space-x-3">
                          <Checkbox
                            id={`resp-${resp}`}
                            checked={formData.responsables.includes(resp)}
                            onCheckedChange={(checked) => {
                              if (checked) {
                                setFormData({
                                  ...formData,
                                  responsables: [...formData.responsables, resp],
                                })
                              } else {
                                setFormData({
                                  ...formData,
                                  responsables: formData.responsables.filter((r) => r !== resp),
                                })
                              }
                            }}
                            className="w-5 h-5"
                          />
                          <Label
                            htmlFor={`resp-${resp}`}
                            className="font-semibold cursor-pointer text-lg text-[#1a4d4a]"
                          >
                            {resp}
                          </Label>
                        </div>
                      ),
                    )}
                  </div>
                </div>

<div className="flex justify-center pt-6">
                  <Button
                    type="submit"
                    size="lg"
                    className="px-20 h-16 text-xl font-bold shadow-xl hover:opacity-90"
                    style={{ background: "linear-gradient(135deg, #4a9089 0%, #5a9e9a 100%)" }}
                  >
                    Soumettre
                  </Button>
                </div>
              </form>
            </CardContent>
          </Card>
        </TabsContent>

<TabsContent value="notifications" className="mt-6">
          <Card className="border-2 border-[#2d8a83]/40">
            <CardHeader
              className="border-b border-[#2d8a83]/30"
              style={{ background: "linear-gradient(to right, #ECF8F6, rgba(45, 138, 131, 0.1))" }}
            >
              <CardTitle className="text-xl flex items-center gap-2" style={{ color: "#18534f" }}>
                <AlertCircle className="h-6 w-6" style={{ color: "#226d68" }} />
                Notifications de validation
              </CardTitle>
              <CardDescription className="text-base">
                Demandes de validation des actions immédiates par le Responsable
              </CardDescription>
            </CardHeader>
            <CardContent className="pt-6">
              {notifications.length === 0 ? (
                <div className="text-center py-12">
                  <Bell className="h-16 w-16 mx-auto text-muted-foreground opacity-30 mb-4" />
                  <p className="text-lg text-muted-foreground">Aucune notification pour le moment</p>
                </div>
              ) : (
                <div className="space-y-4">
                  {notifications.map((notif) => (
                    <Card
                      key={notif.notification_id}
                      className={`${notif.is_read ? "opacity-60" : "border-2"}`}
                      style={{ borderColor: notif.is_read ? undefined : "#226d68" }}
                    >
                      <CardContent className="p-4">
                        <div className="flex items-start justify-between gap-4">
                          <div className="flex-1">
                            <p className="text-base font-medium text-foreground">{notif.message}</p>
                            <p className="text-sm text-muted-foreground mt-1">
                              {new Date(notif.date_created).toLocaleString("fr-FR")}
                            </p>
                          </div>
                          {!notif.is_read && (
                            <Button
                              size="sm"
                              onClick={() => handleMarkAsRead(notif.notification_id)}
                              style={{ background: "linear-gradient(135deg, #18534f 0%, #226d68 100%)" }}
                            >
                              Marquer comme lu
                            </Button>
                          )}
                        </div>
                      </CardContent>
                    </Card>
                  ))}
                </div>
              )}
            </CardContent>
          </Card>
        </TabsContent>
      </Tabs>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/page.tsx" isQuickEdit="true"
"use client"

import type React from "react"

import { useEffect } from "react"
import { useRouter } from "next/navigation"
import { useAuth } from "@/components/auth-provider"
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 { useState } from "react"
import { AlertCircle } from "lucide-react"

export default function LoginPage() {
  const router = useRouter()
  const { user, login, isLoading } = useAuth()
  const [email, setEmail] = useState("")
  const [password, setPassword] = useState("")
  const [error, setError] = useState("")

useEffect(() => {
    if (!isLoading && user) {
      router.push("/dashboard")
    }
  }, [user, isLoading, router])

const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    setError("")

const success = login(email, password)
    if (success) {
      router.push("/dashboard")
    } else {
      setError("Email ou mot de passe incorrect")
    }
  }

if (isLoading) {
    return (
      <div className="flex min-h-screen items-center justify-center bg-background">
        <div className="text-center">
          <div className="h-8 w-8 animate-spin rounded-full border-4 border-primary border-t-transparent mx-auto" />
          <p className="mt-4 text-muted-foreground">Chargement...</p>
        </div>
      </div>
    )
  }

return (
    <div
      className="min-h-screen flex items-center justify-center p-4"
      style={{ background: "linear-gradient(135deg, #74b5af 0%, #5a9e9a 50%, #226d68 100%)" }}
    >
      <div className="w-full max-w-md">
        <div className="mb-8 text-center">
          <div
            className="mx-auto h-20 w-20 rounded-2xl flex items-center justify-center mb-4 shadow-2xl"
            style={{ background: "white" }}
          >
            <span className="text-3xl font-bold" style={{ color: "#226d68" }}>
              8D
            </span>
          </div>
          <h1 className="text-4xl font-bold text-white mb-2">8D Problem Solver</h1>
          <p className="text-white/90 text-lg">Résolution de problèmes industriels</p>
        </div>

<Card className="border-0 shadow-2xl">
          <CardHeader
            className="space-y-1 pb-4"
            style={{ background: "linear-gradient(135deg, #ECF8F6 0%, #ffffff 100%)" }}
          >
            <CardTitle className="text-2xl text-center" style={{ color: "#18534f" }}>
              Connexion
            </CardTitle>
            <CardDescription className="text-center text-base">Connectez-vous à votre compte</CardDescription>
          </CardHeader>
          <CardContent className="pt-6" style={{ backgroundColor: "#ffffff" }}>
            <form onSubmit={handleSubmit} className="space-y-5">
              <div className="space-y-2">
                <Label htmlFor="email" className="text-base font-semibold" style={{ color: "#18534f" }}>
                  Email
                </Label>
                <Input
                  id="email"
                  type="email"
                  placeholder="votre.email@usine.com"
                  value={email}
                  onChange={(e) => setEmail(e.target.value)}
                  className="h-12 border-2 text-base"
                  style={{ borderColor: "#74b5af", backgroundColor: "#ECF8F6" }}
                  required
                />
              </div>

<div className="space-y-2">
                <Label htmlFor="password" className="text-base font-semibold" style={{ color: "#18534f" }}>
                  Mot de passe
                </Label>
                <Input
                  id="password"
                  type="password"
                  placeholder="••••••••"
                  value={password}
                  onChange={(e) => setPassword(e.target.value)}
                  className="h-12 border-2 text-base"
                  style={{ borderColor: "#74b5af", backgroundColor: "#ECF8F6" }}
                  required
                />
              </div>

{error && (
                <div
                  className="flex items-center gap-2 rounded-lg p-4 text-sm border-2"
                  style={{ backgroundColor: "#fef2f2", borderColor: "#ef4444", color: "#dc2626" }}
                >
                  <AlertCircle className="h-5 w-5" />
                  <span className="font-medium">{error}</span>
                </div>
              )}

<Button
                type="submit"
                className="w-full h-12 text-base font-bold shadow-lg hover:shadow-xl transition-all"
                style={{ background: "linear-gradient(135deg, #18534f 0%, #226d68 100%)" }}
              >
                Se connecter
              </Button>
            </form>

<div
              className="mt-6 rounded-xl p-5 border-2"
              style={{ backgroundColor: "#ECF8F6", borderColor: "#74b5af" }}
            >
              <p className="text-sm font-bold mb-3" style={{ color: "#18534f" }}>
                Comptes de démonstration :
              </p>
              <ul className="space-y-1.5 text-sm" style={{ color: "#226d68" }}>
                <li>
                  <span className="font-semibold">Manager:</span> ahmed.benali@usine.com
                </li>
                <li>
                  <span className="font-semibold">Responsable:</span> fatima.zahra@usine.com
                </li>
                <li>
                  <span className="font-semibold">Superviseur:</span> mohamed.alami@usine.com
                </li>
                <li>
                  <span className="font-semibold">Chef d'équipe:</span> rachid.idrissi@usine.com
                </li>
                <li>
                  <span className="font-semibold">Opérateur:</span> karim.tazi@usine.com
                </li>
                <li className="pt-2 font-bold" style={{ color: "#18534f" }}>
                  Mot de passe: password123
                </li>
              </ul>
            </div>
          </CardContent>
        </Card>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/dashboard/page.tsx" isQuickEdit="true"
"use client"

import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { useAuth } from "@/components/auth-provider"
import { getProblems } from "@/lib/storage"
import { useEffect, useState } from "react"
import type { Problem } from "@/lib/types"
import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from "recharts"
import { Label } from "@/components/ui/label"

export default function DashboardPage() {
  const { user } = useAuth()
  const [problems, setProblems] = useState<Problem[]>([])
  const [selectedUsine, setSelectedUsine] = useState("all")
  const [selectedAtelier, setSelectedAtelier] = useState("all")
  const [selectedLigne, setSelectedLigne] = useState("all")

useEffect(() => {
    const allProblems = getProblems()
    setProblems(allProblems)
  }, [])

const problemesOuverts = problems.filter((p) => p.status === "Ouvert").length
  const sansDateCloture = problems.filter((p) => p.status !== "Clôturé").length
  const aucunPiloteAffecte = problems.filter((p) => !p.team_id).length
  const tempsFermetureMoyen = 40 // Valeur fictive pour l'instant

const chartData = [
    { name: "Jan", value: 4 },
    { name: "Fév", value: 5 },
    { name: "Mar", value: 3 },
    { name: "Apr", value: 6 },
    { name: "May", value: 2 },
    { name: "Jun", value: 7 },
    { name: "Jul", value: 4 },
    { name: "Aug", value: 5 },
    { name: "Sep", value: 6 },
    { name: "Oct", value: 5 },
    { name: "Nov", value: 8 },
    { name: "Déc", value: 3 },
  ]

if (!user) return null

return (
    <div className="space-y-6">
      <div
        className="rounded-xl p-8 text-white shadow-xl"
        style={{ background: "linear-gradient(135deg, #18534f 0%, #226d68 50%, #2d8a83 100%)" }}
      >
        <h1 className="text-4xl font-bold mb-2">Dashboard Résolution de Problèmes</h1>
        <p className="text-white/90 text-lg">Vue d'ensemble des indicateurs de performance</p>
      </div>

<Card className="border-2 shadow-lg" style={{ borderColor: "#74b5af", backgroundColor: "#ECF8F6" }}>
        <CardContent className="pt-6">
          <div className="flex gap-4">
            <div className="flex-1">
              <Label className="text-sm font-bold mb-2 block" style={{ color: "#18534f" }}>
                Toutes les usines
              </Label>
              <Select value={selectedUsine} onValueChange={setSelectedUsine}>
                <SelectTrigger className="h-12 border-2" style={{ borderColor: "#74b5af", backgroundColor: "white" }}>
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="all">Toutes les usines</SelectItem>
                  <SelectItem value="usine1">Usine 1</SelectItem>
                  <SelectItem value="usine2">Usine 2</SelectItem>
                </SelectContent>
              </Select>
            </div>

<div className="flex-1">
              <Label className="text-sm font-bold mb-2 block" style={{ color: "#18534f" }}>
                Tous les ateliers
              </Label>
              <Select value={selectedAtelier} onValueChange={setSelectedAtelier}>
                <SelectTrigger className="h-12 border-2" style={{ borderColor: "#74b5af", backgroundColor: "white" }}>
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="all">Tous les ateliers</SelectItem>
                  <SelectItem value="atelier1">Atelier 1</SelectItem>
                  <SelectItem value="atelier2">Atelier 2</SelectItem>
                </SelectContent>
              </Select>
            </div>

<div className="flex-1">
              <Label className="text-sm font-bold mb-2 block" style={{ color: "#18534f" }}>
                Toutes les lignes
              </Label>
              <Select value={selectedLigne} onValueChange={setSelectedLigne}>
                <SelectTrigger className="h-12 border-2" style={{ borderColor: "#74b5af", backgroundColor: "white" }}>
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="all">Toutes les lignes</SelectItem>
                  <SelectItem value="ligne1">Ligne 1</SelectItem>
                  <SelectItem value="ligne2">Ligne 2</SelectItem>
                </SelectContent>
              </Select>
            </div>
          </div>
        </CardContent>
      </Card>

<div className="grid gap-6 md:grid-cols-4">
        <Card
          className="border-l-8 shadow-lg hover:shadow-xl transition-shadow"
          style={{ borderLeftColor: "#226d68", backgroundColor: "white" }}
        >
          <CardHeader className="pb-3">
            <CardTitle className="text-base font-bold" style={{ color: "#18534f" }}>
              Problèmes ouverts
            </CardTitle>
          </CardHeader>
          <CardContent>
            <div className="text-5xl font-bold" style={{ color: "#226d68" }}>
              {problemesOuverts}
            </div>
          </CardContent>
        </Card>

<Card
          className="border-l-8 shadow-lg hover:shadow-xl transition-shadow"
          style={{ borderLeftColor: "#2d8a83", backgroundColor: "white" }}
        >
          <CardHeader className="pb-3">
            <CardTitle className="text-base font-bold" style={{ color: "#18534f" }}>
              Sans date de clôture
            </CardTitle>
          </CardHeader>
          <CardContent>
            <div className="text-5xl font-bold" style={{ color: "#2d8a83" }}>
              {sansDateCloture}
            </div>
          </CardContent>
        </Card>

<Card
          className="border-l-8 shadow-lg hover:shadow-xl transition-shadow"
          style={{ borderLeftColor: "#f59e0b", backgroundColor: "white" }}
        >
          <CardHeader className="pb-3">
            <CardTitle className="text-base font-bold" style={{ color: "#18534f" }}>
              Aucun pilote affecté
            </CardTitle>
          </CardHeader>
          <CardContent>
            <div className="text-5xl font-bold" style={{ color: "#f59e0b" }}>
              {aucunPiloteAffecte}
            </div>
          </CardContent>
        </Card>

<Card
          className="border-l-8 shadow-lg hover:shadow-xl transition-shadow"
          style={{ borderLeftColor: "#8b5cf6", backgroundColor: "white" }}
        >
          <CardHeader className="pb-3">
            <CardTitle className="text-base font-bold" style={{ color: "#18534f" }}>
              Temps de fermeture moyen
            </CardTitle>
          </CardHeader>
          <CardContent>
            <div className="text-5xl font-bold" style={{ color: "#8b5cf6" }}>
              {tempsFermetureMoyen}
            </div>
          </CardContent>
        </Card>
      </div>

<Card className="border-2 shadow-lg" style={{ borderColor: "#74b5af" }}>
        <CardHeader style={{ background: "linear-gradient(135deg, #ECF8F6 0%, #ffffff 100%)" }}>
          <CardTitle className="text-xl font-bold" style={{ color: "#18534f" }}>
            Évolution mensuelle des problèmes
          </CardTitle>
        </CardHeader>
        <CardContent className="pt-6">
          <ResponsiveContainer width="100%" height={350}>
            <BarChart data={chartData}>
              <CartesianGrid strokeDasharray="3 3" stroke="#d1d5db" />
              <XAxis dataKey="name" stroke="#4b5563" />
              <YAxis stroke="#4b5563" />
              <Tooltip
                contentStyle={{
                  backgroundColor: "#ffffff",
                  border: "2px solid #74b5af",
                  borderRadius: "12px",
                  boxShadow: "0 4px 6px rgba(0,0,0,0.1)",
                }}
              />
              <Bar dataKey="value" fill="#226d68" radius={[8, 8, 0, 0]} />
            </BarChart>
          </ResponsiveContainer>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/dashboard/problems/page.tsx" isQuickEdit="true"
"use client"

import { Card, CardContent, CardHeader } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { useAuth } from "@/components/auth-provider"
import { getProblems } from "@/lib/storage"
import { Plus, Search } from "lucide-react"
import { useEffect, useState } from "react"
import type { Problem } from "@/lib/types"
import Link from "next/link"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"

export default function ProblemsPage() {
  const { user } = useAuth()
  const [problems, setProblems] = useState<Problem[]>([])
  const [filteredProblems, setFilteredProblems] = useState<Problem[]>([])
  const [searchTerm, setSearchTerm] = useState("")
  const [statusFilter, setStatusFilter] = useState<string>("all")
  const [levelFilter, setLevelFilter] = useState<string>("all")

useEffect(() => {
    const allProblems = getProblems()
    setProblems(allProblems)
    setFilteredProblems(allProblems)
  }, [])

useEffect(() => {
    let filtered = problems

if (searchTerm) {
      filtered = filtered.filter(
        (p) =>
          p.titre.toLowerCase().includes(searchTerm.toLowerCase()) ||
          p.description.toLowerCase().includes(searchTerm.toLowerCase()),
      )
    }

if (statusFilter !== "all") {
      filtered = filtered.filter((p) => p.status === statusFilter)
    }

if (levelFilter !== "all") {
      filtered = filtered.filter((p) => p.level === levelFilter)
    }

setFilteredProblems(filtered)
  }, [searchTerm, statusFilter, levelFilter, problems])

if (!user) return null

return (
    <div className="space-y-6">
      <div
        className="flex items-center justify-between rounded-xl p-6 text-white shadow-xl"
        style={{ background: "linear-gradient(135deg, #18534f 0%, #226d68 100%)" }}
      >
        <div>
          <h1 className="text-3xl font-bold">Problèmes</h1>
          <p className="text-white/90 mt-1 text-base">Gestion des problèmes selon la méthodologie 8D</p>
        </div>
        <Link href="/dashboard/problems/new">
          <Button className="h-11 px-6 font-bold shadow-lg" style={{ background: "white", color: "#226d68" }}>
            <Plus className="h-5 w-5 mr-2" />
            Nouveau problème
          </Button>
        </Link>
      </div>

<Card className="border-2 shadow-lg" style={{ borderColor: "#74b5af" }}>
        <CardHeader style={{ backgroundColor: "#ECF8F6" }}>
          <div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
            <div className="relative flex-1">
              <Search className="absolute left-3 top-1/2 h-5 w-5 -translate-y-1/2" style={{ color: "#226d68" }} />
              <Input
                placeholder="Rechercher un problème..."
                value={searchTerm}
                onChange={(e) => setSearchTerm(e.target.value)}
                className="pl-11 h-12 border-2 text-base"
                style={{ borderColor: "#74b5af", backgroundColor: "white" }}
              />
            </div>
            <div className="flex gap-3">
              <Select value={statusFilter} onValueChange={setStatusFilter}>
                <SelectTrigger
                  className="w-[170px] h-12 border-2"
                  style={{ borderColor: "#74b5af", backgroundColor: "white" }}
                >
                  <SelectValue placeholder="Statut" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="all">Tous les statuts</SelectItem>
                  <SelectItem value="Ouvert">Ouvert</SelectItem>
                  <SelectItem value="En cours">En cours</SelectItem>
                  <SelectItem value="Clôturé">Clôturé</SelectItem>
                </SelectContent>
              </Select>

<Select value={levelFilter} onValueChange={setLevelFilter}>
                <SelectTrigger
                  className="w-[170px] h-12 border-2"
                  style={{ borderColor: "#74b5af", backgroundColor: "white" }}
                >
                  <SelectValue placeholder="Niveau" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="all">Tous les niveaux</SelectItem>
                  <SelectItem value="Usine">Usine</SelectItem>
                  <SelectItem value="Ligne">Ligne</SelectItem>
                  <SelectItem value="Atelier">Atelier</SelectItem>
                </SelectContent>
              </Select>
            </div>
          </div>
        </CardHeader>
        <CardContent className="pt-6">
          <div className="space-y-3">
            {filteredProblems.length === 0 ? (
              <div className="text-center py-12">
                <p className="text-muted-foreground">Aucun problème trouvé</p>
              </div>
            ) : (
              filteredProblems.map((problem) => (
                <Link key={problem.problem_id} href={`/dashboard/problems/${problem.problem_id}`} className="block">
                  <div
                    className="flex items-center justify-between rounded-xl border-2 p-5 hover:shadow-lg transition-all"
                    style={{ borderColor: "#74b5af", backgroundColor: "#ECF8F6" }}
                  >
                    <div className="flex-1">
                      <div className="flex items-center gap-3 mb-2">
                        <h3 className="font-medium text-foreground">{problem.titre}</h3>
                        <span
                          className={`inline-flex items-center rounded-full px-3 py-1 text-xs font-bold`}
                          style={{
                            backgroundColor:
                              problem.status === "Ouvert"
                                ? "#226d68"
                                : problem.status === "En cours"
                                  ? "#f59e0b"
                                  : "#10b981",
                            color:
                              problem.status === "Ouvert" ? "white" : problem.status === "En cours" ? "white" : "white",
                          }}
                        >
                          {problem.status}
                        </span>
                        <span className="text-xs text-muted-foreground border border-border rounded px-2 py-0.5">
                          {problem.level}
                        </span>
                      </div>
                      <p className="text-sm text-muted-foreground line-clamp-2">{problem.description}</p>
                      <div className="flex items-center gap-4 mt-2 text-xs text-muted-foreground">
                        <span>Déclaré le: {new Date(problem.date_declaration).toLocaleDateString("fr-FR")}</span>
                        {problem.qui && <span>Qui: {problem.qui}</span>}
                      </div>
                    </div>
                    <Button variant="ghost" size="sm" className="font-semibold" style={{ color: "#226d68" }}>
                      Voir détails
                    </Button>
                  </div>
                </Link>
              ))
            )}
          </div>
        </CardContent>
      </Card>
    </div>
  )
}</article></body></html>