[V0_FILE]sql:file="scripts/01-create-tables.sql" isMerged="true" -- NC (Non-Conformity) Management System Database Schema -- Table for NC records CREATE TABLE IF NOT EXISTS ncs ( id UUID PRIMARY KEY DEFAULT gen_random_uuid(), nc_number VARCHAR(50) UNIQUE NOT NULL, title VARCHAR(255) NOT NULL, description TEXT NOT NULL, severity VARCHAR(20) CHECK (severity IN ('low', 'medium', 'high', 'critical')) NOT NULL, status VARCHAR(30) CHECK (status IN ('registered', 'immediate_action', 'action_plan', 'root_cause', 'corrective_action', 'effectiveness', 'closed')) NOT NULL DEFAULT 'registered', category VARCHAR(100) NOT NULL, location VARCHAR(255), responsible_person VARCHAR(255), registered_by VARCHAR(255) NOT NULL, registered_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(), closed_at TIMESTAMP WITH TIME ZONE, created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(), updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW() ); -- Table for immediate actions CREATE TABLE IF NOT EXISTS immediate_actions ( id UUID PRIMARY KEY DEFAULT gen_random_uuid(), nc_id UUID REFERENCES ncs(id) ON DELETE CASCADE, action_description TEXT NOT NULL, responsible VARCHAR(255) NOT NULL, deadline DATE NOT NULL, status VARCHAR(20) CHECK (status IN ('pending', 'in_progress', 'completed')) NOT NULL DEFAULT 'pending', completion_date DATE, evidence_url TEXT, notes TEXT, created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(), updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW() ); -- Table for action plans CREATE TABLE IF NOT EXISTS action_plans ( id UUID PRIMARY KEY DEFAULT gen_random_uuid(), nc_id UUID REFERENCES ncs(id) ON DELETE CASCADE, action_description TEXT NOT NULL, responsible VARCHAR(255) NOT NULL, deadline DATE NOT NULL, status VARCHAR(20) CHECK (status IN ('pending', 'in_progress', 'completed')) NOT NULL DEFAULT 'pending', completion_date DATE, evidence_url TEXT, notes TEXT, created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(), updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW() ); -- Table for root cause analysis (5 Whys) CREATE TABLE IF NOT EXISTS root_causes ( id UUID PRIMARY KEY DEFAULT gen_random_uuid(), nc_id UUID REFERENCES ncs(id) ON DELETE CASCADE, why_number INTEGER CHECK (why_number BETWEEN 1 AND 5) NOT NULL, question TEXT NOT NULL, answer TEXT NOT NULL, created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(), updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW() ); -- Table for corrective actions (5W2H) CREATE TABLE IF NOT EXISTS corrective_actions ( id UUID PRIMARY KEY DEFAULT gen_random_uuid(), nc_id UUID REFERENCES ncs(id) ON DELETE CASCADE, what TEXT NOT NULL, why TEXT NOT NULL, who VARCHAR(255) NOT NULL, when_date DATE NOT NULL, where_location VARCHAR(255) NOT NULL, how TEXT NOT NULL, how_much DECIMAL(10, 2), status VARCHAR(20) CHECK (status IN ('pending', 'in_progress', 'completed')) NOT NULL DEFAULT 'pending', completion_date DATE, evidence_url TEXT, notes TEXT, created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(), updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW() ); -- Table for effectiveness evaluation CREATE TABLE IF NOT EXISTS effectiveness_evaluations ( id UUID PRIMARY KEY DEFAULT gen_random_uuid(), nc_id UUID REFERENCES ncs(id) ON DELETE CASCADE, evaluation_date DATE NOT NULL, evaluator VARCHAR(255) NOT NULL, is_effective BOOLEAN NOT NULL, findings TEXT NOT NULL, evidence_url TEXT, recommendations TEXT, created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(), updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW() ); -- Table for attachments/evidence CREATE TABLE IF NOT EXISTS attachments ( id UUID PRIMARY KEY DEFAULT gen_random_uuid(), nc_id UUID REFERENCES ncs(id) ON DELETE CASCADE, file_name VARCHAR(255) NOT NULL, file_url TEXT NOT NULL, file_type VARCHAR(50), uploaded_by VARCHAR(255) NOT NULL, uploaded_at TIMESTAMP WITH TIME ZONE DEFAULT NOW() ); -- Indexes for performance CREATE INDEX IF NOT EXISTS idx_ncs_status ON ncs(status); CREATE INDEX IF NOT EXISTS idx_ncs_severity ON ncs(severity); CREATE INDEX IF NOT EXISTS idx_ncs_registered_at ON ncs(registered_at DESC); CREATE INDEX IF NOT EXISTS idx_immediate_actions_nc_id ON immediate_actions(nc_id); CREATE INDEX IF NOT EXISTS idx_action_plans_nc_id ON action_plans(nc_id); CREATE INDEX IF NOT EXISTS idx_root_causes_nc_id ON root_causes(nc_id); CREATE INDEX IF NOT EXISTS idx_corrective_actions_nc_id ON corrective_actions(nc_id); CREATE INDEX IF NOT EXISTS idx_effectiveness_evaluations_nc_id ON effectiveness_evaluations(nc_id); CREATE INDEX IF NOT EXISTS idx_attachments_nc_id ON attachments(nc_id); [V0_FILE]json:file="package.json" isMerged="true" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "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="components/immediate-actions-module.tsx" isMerged="true" "use client" import type React from "react" import { useState } from "react" 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 { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Badge } from "@/components/ui/badge" import { Plus, CheckCircle2, Clock, AlertCircle, Upload, X } from "lucide-react" import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger, } from "@/components/ui/alert-dialog" import type { ImmediateAction, ActionStatus } from "@/lib/types" interface ImmediateActionsModuleProps { ncId: string actions: ImmediateAction[] onAddAction: (action: Omit) => void onUpdateAction: (id: string, updates: Partial) => void onDeleteAction?: (id: string) => void } const statusConfig: Record = { pending: { label: "Pendente", color: "bg-yellow-500/10 text-yellow-700 border-yellow-200", icon: , }, in_progress: { label: "Em Andamento", color: "bg-blue-500/10 text-blue-700 border-blue-200", icon: , }, completed: { label: "Concluída", color: "bg-green-500/10 text-green-700 border-green-200", icon: , }, } export function ImmediateActionsModule({ ncId, actions, onAddAction, onUpdateAction, onDeleteAction }: ImmediateActionsModuleProps) { const [isAddingAction, setIsAddingAction] = useState(false) const [formData, setFormData] = useState({ actionDescription: "", responsible: "", deadline: "", notes: "", }) const handleSubmit = (e: React.FormEvent) => { e.preventDefault() onAddAction({ ncId, actionDescription: formData.actionDescription, responsible: formData.responsible, deadline: formData.deadline, status: "pending", notes: formData.notes, }) setFormData({ actionDescription: "", responsible: "", deadline: "", notes: "" }) setIsAddingAction(false) } const updateField = (field: string, value: string) => { setFormData((prev) => ({ ...prev, [field]: value })) } return (

Ações Imediatas

Ações tomadas imediatamente após identificação da NC

{!isAddingAction && ( )}

{isAddingAction && ( Nova Ação Imediata Registre a ação tomada imediatamente para conter o problema

Descrição da Ação *

updateField("actionDescription", e.target.value)}
                  placeholder="Descreva a ação imediata tomada..."
                  rows={3}
                  required
                />
              </div>

<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div className="space-y-2">
                  <Label htmlFor="responsible">Responsável *</Label>
                  <Input
                    id="responsible"
                    value={formData.responsible}
                    onChange={(e) => updateField("responsible", e.target.value)}
                    placeholder="Nome do responsável"
                    required
                  />
                </div>

<div className="space-y-2">
                  <Label htmlFor="deadline">Prazo *</Label>
                  <Input
                    id="deadline"
                    type="date"
                    value={formData.deadline}
                    onChange={(e) => updateField("deadline", e.target.value)}
                    required
                  />
                </div>
              </div>

<div className="space-y-2">
                <Label htmlFor="notes">Observações</Label>
                <Textarea
                  id="notes"
                  value={formData.notes}
                  onChange={(e) => updateField("notes", e.target.value)}
                  placeholder="Observações adicionais..."
                  rows={2}
                />
              </div>

<div className="flex gap-2 justify-end">
                <Button type="button" variant="outline" onClick={() => setIsAddingAction(false)}>
                  Cancelar
                </Button>
                <Button type="submit">Salvar Ação</Button>
              </div>
            </form>
          </CardContent>
        </Card>
      )}

<div className="space-y-3">
        {actions.length === 0 ? (
          <Card>
            <CardContent className="py-8 text-center text-sm text-muted-foreground">
              Nenhuma ação imediata registrada ainda
            </CardContent>
          </Card>
        ) : (
          actions.map((action) => <ImmediateActionCard key={action.id} action={action} onUpdate={onUpdateAction} onDelete={onDeleteAction} />)
        )}
      </div>
    </div>
  )
}

function ImmediateActionCard({
  action,
  onUpdate,
  onDelete,
}: {
  action: ImmediateAction
  onUpdate: (id: string, updates: Partial<ImmediateAction>) => void
  onDelete?: (id: string) => void
}) {
  const statusInfo = statusConfig[action.status]

const handleStatusChange = (newStatus: ActionStatus) => {
    const updates: Partial<ImmediateAction> = { status: newStatus }
    if (newStatus === "completed") {
      updates.completionDate = new Date().toISOString().split("T")[0]
    }
    onUpdate(action.id, updates)
  }

const deadlineDate = new Date(action.deadline)
  const today = new Date()
  const isOverdue = action.status !== "completed" && deadlineDate < today
  const diffDays = Math.ceil((deadlineDate.getTime() - today.getTime()) / (1000 * 60 * 60 * 24))

return (
    <Card className={`${isOverdue ? "border-red-300" : ""} relative`}>
      {onDelete && (
        <AlertDialog>
          <AlertDialogTrigger asChild>
            <Button
              variant="ghost"
              size="icon"
              className="absolute top-2 right-2 h-6 w-6 text-muted-foreground hover:text-destructive"
            >
              <X className="h-4 w-4" />
            </Button>
          </AlertDialogTrigger>
          <AlertDialogContent>
            <AlertDialogHeader>
              <AlertDialogTitle>Confirmar Exclusao</AlertDialogTitle>
              <AlertDialogDescription>
                Tem certeza que deseja excluir esta acao imediata? Esta acao nao pode ser desfeita.
              </AlertDialogDescription>
            </AlertDialogHeader>
            <AlertDialogFooter>
              <AlertDialogCancel>Cancelar</AlertDialogCancel>
              <AlertDialogAction onClick={() => onDelete(action.id)} className="bg-destructive text-destructive-foreground hover:bg-destructive/90">
                Excluir
              </AlertDialogAction>
            </AlertDialogFooter>
          </AlertDialogContent>
        </AlertDialog>
      )}
      <CardHeader className="pb-3">
        <div className="flex items-start justify-between gap-4">
          <div className="flex-1 space-y-2">
            <div className="flex items-center gap-2 flex-wrap">
              <Badge className={statusInfo.color}>
                {statusInfo.icon}
                <span className="ml-1">{statusInfo.label}</span>
              </Badge>
              {isOverdue && (
                <Badge variant="destructive" className="text-xs">
                  Atrasada ha {Math.abs(diffDays)} dias
                </Badge>
              )}
              {!isOverdue && action.status !== "completed" && diffDays >= 0 && (
                <Badge variant="outline" className="text-xs text-orange-600 border-orange-300">
                  Vence em {diffDays} dias
                </Badge>
              )}
            </div>
            <CardDescription className="text-sm leading-relaxed">{action.actionDescription}</CardDescription>
          </div>
        </div>
      </CardHeader>
      <CardContent className="space-y-3">
        <div className="grid grid-cols-2 gap-4 text-sm">
          <div>
            <span className="text-muted-foreground">Responsável:</span>
            <p className="font-medium">{action.responsible}</p>
          </div>
          <div>
            <span className="text-muted-foreground">Prazo:</span>
            <p className="font-medium">{new Date(action.deadline).toLocaleDateString("pt-BR")}</p>
          </div>
        </div>

{action.completionDate && (
          <div className="text-sm">
            <span className="text-muted-foreground">Concluída em:</span>
            <p className="font-medium text-green-600">{new Date(action.completionDate).toLocaleDateString("pt-BR")}</p>
          </div>
        )}

{action.notes && (
          <div className="pt-2 border-t">
            <p className="text-xs text-muted-foreground">Observações:</p>
            <p className="text-sm">{action.notes}</p>
          </div>
        )}

<div className="flex gap-2 pt-2">
          <Select value={action.status} onValueChange={(value: ActionStatus) => handleStatusChange(value)}>
            <SelectTrigger className="w-full">
              <SelectValue />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="pending">Marcar como Pendente</SelectItem>
              <SelectItem value="in_progress">Marcar como Em Andamento</SelectItem>
              <SelectItem value="completed">Marcar como Concluída</SelectItem>
            </SelectContent>
          </Select>
          <Button variant="outline" size="sm">
            <Upload className="h-4 w-4" />
          </Button>
        </div>
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescript:file="components/action-plans-module.tsx" isMerged="true"
"use client"

import type React from "react"

interface ActionPlansModuleProps {
  ncId: string
  plans: ActionPlan[]
  onAddPlan: (plan: Omit<ActionPlan, "id" | "createdAt" | "updatedAt">) => void
  onUpdatePlan: (id: string, updates: Partial<ActionPlan>) => void
}

const statusConfig: Record<ActionStatus, { label: string; color: string; icon: React.ReactNode }> = {
  pending: {
    label: "Pendente",
    color: "bg-yellow-500/10 text-yellow-700 border-yellow-200",
    icon: <Clock className="h-3 w-3" />,
  },
  in_progress: {
    label: "Em Andamento",
    color: "bg-blue-500/10 text-blue-700 border-blue-200",
    icon: <AlertCircle className="h-3 w-3" />,
  },
  completed: {
    label: "Concluída",
    color: "bg-green-500/10 text-green-700 border-green-200",
    icon: <CheckCircle2 className="h-3 w-3" />,
  },
}

export function ActionPlansModule({ ncId, plans, onAddPlan, onUpdatePlan }: ActionPlansModuleProps) {
  const [isAddingPlan, setIsAddingPlan] = useState(false)
  const [formData, setFormData] = useState({
    actionDescription: "",
    responsible: "",
    deadline: "",
    notes: "",
  })

const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    onAddPlan({
      ncId,
      actionDescription: formData.actionDescription,
      responsible: formData.responsible,
      deadline: formData.deadline,
      status: "pending",
      notes: formData.notes,
    })
    setFormData({ actionDescription: "", responsible: "", deadline: "", notes: "" })
    setIsAddingPlan(false)
  }

const updateField = (field: string, value: string) => {
    setFormData((prev) => ({ ...prev, [field]: value }))
  }

const completedCount = plans.filter((p) => p.status === "completed").length

return (
    <div className="space-y-4">
      <div className="flex items-center justify-between">
        <div>
          <div className="flex items-center gap-3">
            <h3 className="text-lg font-semibold">Plano de Ação</h3>
            {plans.length > 0 && (
              <Badge variant="secondary" className="gap-1">
                <ListChecks className="h-3 w-3" />
                {completedCount}/{plans.length} concluídas
              </Badge>
            )}
          </div>
          <p className="text-sm text-muted-foreground">Ações planejadas para resolver a não conformidade</p>
        </div>
        {!isAddingPlan && (
          <Button onClick={() => setIsAddingPlan(true)} size="sm">
            <Plus className="mr-2 h-4 w-4" />
            Adicionar Ação
          </Button>
        )}
      </div>

{isAddingPlan && (
        <Card className="border-2 border-primary">
          <CardHeader>
            <CardTitle className="text-base">Nova Ação do Plano</CardTitle>
            <CardDescription>Registre uma ação planejada para resolver a não conformidade</CardDescription>
          </CardHeader>
          <CardContent>
            <form onSubmit={handleSubmit} className="space-y-4">
              <div className="space-y-2">
                <Label htmlFor="actionDescription">Descrição da Ação *</Label>
                <Textarea
                  id="actionDescription"
                  value={formData.actionDescription}
                  onChange={(e) => updateField("actionDescription", e.target.value)}
                  placeholder="Descreva a ação planejada..."
                  rows={3}
                  required
                />
              </div>

<div className="flex gap-2 justify-end">
                <Button type="button" variant="outline" onClick={() => setIsAddingPlan(false)}>
                  Cancelar
                </Button>
                <Button type="submit">Salvar Ação</Button>
              </div>
            </form>
          </CardContent>
        </Card>
      )}

<div className="space-y-3">
        {plans.length === 0 ? (
          <Card>
            <CardContent className="py-8 text-center text-sm text-muted-foreground">
              Nenhuma ação planejada ainda
            </CardContent>
          </Card>
        ) : (
          plans.map((plan, index) => (
            <ActionPlanCard key={plan.id} plan={plan} index={index + 1} onUpdate={onUpdatePlan} />
          ))
        )}
      </div>
    </div>
  )
}

function ActionPlanCard({
  plan,
  index,
  onUpdate,
}: {
  plan: ActionPlan
  index: number
  onUpdate: (id: string, updates: Partial<ActionPlan>) => void
}) {
  const statusInfo = statusConfig[plan.status]

const handleStatusChange = (newStatus: ActionStatus) => {
    const updates: Partial<ActionPlan> = { status: newStatus }
    if (newStatus === "completed") {
      updates.completionDate = new Date().toISOString().split("T")[0]
    }
    onUpdate(plan.id, updates)
  }

const isOverdue = plan.status !== "completed" && new Date(plan.deadline) < new Date()

return (
    <Card className={isOverdue ? "border-red-300" : ""}>
      <CardHeader className="pb-3">
        <div className="flex items-start justify-between gap-4">
          <div className="flex gap-3 flex-1">
            <div className="flex-shrink-0 w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center">
              <span className="text-sm font-semibold text-primary">{index}</span>
            </div>
            <div className="flex-1 space-y-2">
              <div className="flex items-center gap-2 flex-wrap">
                <Badge className={statusInfo.color}>
                  {statusInfo.icon}
                  <span className="ml-1">{statusInfo.label}</span>
                </Badge>
                {isOverdue && (
                  <Badge variant="destructive" className="text-xs">
                    Atrasada
                  </Badge>
                )}
              </div>
              <CardDescription className="text-sm leading-relaxed">{plan.actionDescription}</CardDescription>
            </div>
          </div>
        </div>
      </CardHeader>
      <CardContent className="space-y-3">
        <div className="grid grid-cols-2 gap-4 text-sm">
          <div>
            <span className="text-muted-foreground">Responsável:</span>
            <p className="font-medium">{plan.responsible}</p>
          </div>
          <div>
            <span className="text-muted-foreground">Prazo:</span>
            <p className="font-medium">{new Date(plan.deadline).toLocaleDateString("pt-BR")}</p>
          </div>
        </div>

{plan.completionDate && (
          <div className="text-sm">
            <span className="text-muted-foreground">Concluída em:</span>
            <p className="font-medium text-green-600">{new Date(plan.completionDate).toLocaleDateString("pt-BR")}</p>
          </div>
        )}

{plan.notes && (
          <div className="pt-2 border-t">
            <p className="text-xs text-muted-foreground">Observações:</p>
            <p className="text-sm">{plan.notes}</p>
          </div>
        )}

<div className="flex gap-2 pt-2">
          <Select value={plan.status} onValueChange={(value: ActionStatus) => handleStatusChange(value)}>
            <SelectTrigger className="w-full">
              <SelectValue />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="pending">Marcar como Pendente</SelectItem>
              <SelectItem value="in_progress">Marcar como Em Andamento</SelectItem>
              <SelectItem value="completed">Marcar como Concluída</SelectItem>
            </SelectContent>
          </Select>
          <Button variant="outline" size="sm">
            <Upload className="h-4 w-4" />
          </Button>
        </div>
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescript:file="app/globals.css" isEdit="true" isMerged="true"
@import "tailwindcss";
@import "tw-animate-css";

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

:root {
  --background: oklch(0.98 0.005 240);
  --foreground: oklch(0.15 0.01 240);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.15 0.01 240);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.15 0.01 240);
  --primary: oklch(0.35 0.08 240);
  --primary-foreground: oklch(0.98 0.005 240);
  --secondary: oklch(0.96 0.01 240);
  --secondary-foreground: oklch(0.15 0.01 240);
  --muted: oklch(0.96 0.01 240);
  --muted-foreground: oklch(0.5 0.015 240);
  --accent: oklch(0.94 0.02 240);
  --accent-foreground: oklch(0.15 0.01 240);
  --destructive: oklch(0.577 0.245 27.325);
  --destructive-foreground: oklch(0.98 0.005 240);
  --border: oklch(0.9 0.01 240);
  --input: oklch(0.9 0.01 240);
  --ring: oklch(0.35 0.08 240);
  --chart-1: oklch(0.6 0.2 30);
  --chart-2: oklch(0.6 0.15 200);
  --chart-3: oklch(0.55 0.15 270);
  --chart-4: oklch(0.65 0.18 150);
  --chart-5: oklch(0.7 0.18 60);
  --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);
}

.dark {
  --background: oklch(0.145 0 0);
  --foreground: oklch(0.985 0 0);
  --card: oklch(0.145 0 0);
  --card-foreground: oklch(0.985 0 0);
  --popover: oklch(0.145 0 0);
  --popover-foreground: oklch(0.985 0 0);
  --primary: oklch(0.985 0 0);
  --primary-foreground: oklch(0.205 0 0);
  --secondary: oklch(0.269 0 0);
  --secondary-foreground: oklch(0.985 0 0);
  --muted: oklch(0.269 0 0);
  --muted-foreground: oklch(0.708 0 0);
  --accent: oklch(0.269 0 0);
  --accent-foreground: oklch(0.985 0 0);
  --destructive: oklch(0.396 0.141 25.723);
  --destructive-foreground: oklch(0.637 0.237 25.331);
  --border: oklch(0.269 0 0);
  --input: oklch(0.269 0 0);
  --ring: oklch(0.439 0 0);
  --chart-1: oklch(0.488 0.243 264.376);
  --chart-2: oklch(0.696 0.17 162.48);
  --chart-3: oklch(0.769 0.188 70.08);
  --chart-4: oklch(0.627 0.265 303.9);
  --chart-5: oklch(0.645 0.246 16.439);
  --sidebar: oklch(0.205 0 0);
  --sidebar-foreground: oklch(0.985 0 0);
  --sidebar-primary: oklch(0.488 0.243 264.376);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.269 0 0);
  --sidebar-accent-foreground: oklch(0.985 0 0);
  --sidebar-border: oklch(0.269 0 0);
  --sidebar-ring: oklch(0.439 0 0);
}

@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;
  }
}
[V0_FILE]typescript:file="components/root-cause-module.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { AlertCircle, Lightbulb, Edit2, Check, X } from "lucide-react"
import type { RootCause } from "@/lib/types"

interface RootCauseModuleProps {
  ncId: string
  causes: RootCause[]
  onSaveCauses: (causes: Omit<RootCause, "id" | "createdAt" | "updatedAt">[]) => void
}

const WHY_LABELS = ["1º Por quê?", "2º Por quê?", "3º Por quê?", "4º Por quê?", "5º Por quê?"]

export function RootCauseModule({ ncId, causes, onSaveCauses }: RootCauseModuleProps) {
  const [isEditing, setIsEditing] = useState(causes.length === 0)
  const [whyAnswers, setWhyAnswers] = useState<string[]>(() => {
    if (causes.length > 0) {
      return causes.sort((a, b) => a.whyNumber - b.whyNumber).map((c) => c.answer)
    }
    return Array(5).fill("")
  })

const updateAnswer = (index: number, value: string) => {
    const newAnswers = [...whyAnswers]
    newAnswers[index] = value
    setWhyAnswers(newAnswers)
  }

const handleSave = () => {
    const filledAnswers = whyAnswers.filter((answer) => answer.trim())
    if (filledAnswers.length === 0) return

const causesToSave = filledAnswers.map((answer, index) => ({
      ncId,
      whyNumber: index + 1,
      question: "Por quê?",
      answer: answer,
    }))

onSaveCauses(causesToSave)
    setIsEditing(false)
  }

const handleCancel = () => {
    if (causes.length > 0) {
      setWhyAnswers(causes.sort((a, b) => a.whyNumber - b.whyNumber).map((c) => c.answer))
      setIsEditing(false)
    }
  }

const filledCount = whyAnswers.filter((answer) => answer.trim()).length
  const hasData = causes.length > 0

return (
    <div className="space-y-4">
      <div className="flex items-center justify-between">
        <div>
          <div className="flex items-center gap-3">
            <h3 className="text-lg font-semibold">Identificação da Causa Raiz</h3>
            {hasData && (
              <Badge variant="secondary" className="gap-1">
                <Lightbulb className="h-3 w-3" />
                Método 5 Porquês
              </Badge>
            )}
          </div>
          <p className="text-sm text-muted-foreground">Use o método dos 5 porquês para identificar a causa raiz</p>
        </div>
        {hasData && !isEditing && (
          <Button onClick={() => setIsEditing(true)} size="sm" variant="outline">
            <Edit2 className="mr-2 h-4 w-4" />
            Editar Análise
          </Button>
        )}
      </div>

{isEditing ? (
        <Card className="border-2 border-primary">
          <CardHeader>
            <CardTitle className="text-base flex items-center gap-2">
              <AlertCircle className="h-5 w-5 text-primary" />
              Análise dos 5 Porquês
            </CardTitle>
            <CardDescription>
              Responda "por quê?" sucessivamente até chegar à causa raiz. Preencha ao menos os 3 primeiros porquês.
            </CardDescription>
          </CardHeader>
          <CardContent>
            <div className="space-y-2 flex flex-col items-center">
              {whyAnswers.map((answer, index) => {
                const widthPercentage = 100 - index * 10
                return (
                  <div
                    key={index}
                    className="w-full flex flex-col items-center"
                    style={{ maxWidth: `${widthPercentage}%` }}
                  >
                    <div className="w-full space-y-2 bg-purple-50 dark:bg-purple-900/10 p-4 rounded-lg border-2 border-purple-200 dark:border-purple-800">
                      <div className="flex items-center justify-between">
                        <Label className="text-sm font-semibold text-purple-900 dark:text-purple-100">
                          {WHY_LABELS[index]}
                        </Label>
                        <div className="flex-shrink-0 w-8 h-8 rounded-full bg-purple-500 text-white flex items-center justify-center text-sm font-bold">
                          {index + 1}
                        </div>
                      </div>
                      <Textarea
                        value={answer}
                        onChange={(e) => updateAnswer(index, e.target.value)}
                        placeholder={
                          index === 0
                            ? "Por que a não conformidade ocorreu?"
                            : "Por que isso aconteceu? (baseado na resposta anterior)"
                        }
                        rows={2}
                        className="resize-none"
                      />
                    </div>
                    {index < 4 && (
                      <div className="my-2">
                        <div className="w-0.5 h-6 bg-purple-300 dark:bg-purple-700"></div>
                      </div>
                    )}
                  </div>
                )
              })}
            </div>

<div className="flex gap-2 justify-end pt-6 border-t mt-6">
              {hasData && (
                <Button type="button" variant="outline" onClick={handleCancel}>
                  <X className="mr-2 h-4 w-4" />
                  Cancelar
                </Button>
              )}
              <Button onClick={handleSave} disabled={filledCount < 1}>
                <Check className="mr-2 h-4 w-4" />
                Salvar Análise ({filledCount}/5)
              </Button>
            </div>
          </CardContent>
        </Card>
      ) : hasData ? (
        <Card>
          <CardContent className="pt-6">
            <div className="space-y-2 flex flex-col items-center">
              {causes
                .sort((a, b) => a.whyNumber - b.whyNumber)
                .map((cause, index) => {
                  const widthPercentage = 100 - index * 10
                  return (
                    <div
                      key={cause.id}
                      className="w-full flex flex-col items-center"
                      style={{ maxWidth: `${widthPercentage}%` }}
                    >
                      <div className="w-full bg-purple-50 dark:bg-purple-900/10 p-4 rounded-lg border-2 border-purple-200 dark:border-purple-800">
                        <div className="flex items-center justify-between mb-2">
                          <p className="text-sm font-semibold text-purple-900 dark:text-purple-100">
                            {WHY_LABELS[cause.whyNumber - 1]}
                          </p>
                          <div className="flex-shrink-0 w-8 h-8 rounded-full bg-purple-500 text-white flex items-center justify-center text-sm font-bold">
                            {cause.whyNumber}
                          </div>
                        </div>
                        <p className="text-sm leading-relaxed">{cause.answer}</p>
                      </div>
                      {index < causes.length - 1 && (
                        <div className="my-2">
                          <div className="w-0.5 h-6 bg-purple-300 dark:bg-purple-700"></div>
                        </div>
                      )}
                    </div>
                  )
                })}
            </div>

<div className="pt-6 border-t mt-6 bg-purple-50 dark:bg-purple-900/10 -mx-6 -mb-6 px-6 py-4 rounded-b-lg">
              <div className="flex items-start gap-3">
                <Lightbulb className="h-5 w-5 text-purple-600 dark:text-purple-400 flex-shrink-0 mt-0.5" />
                <div>
                  <p className="text-sm font-semibold text-purple-900 dark:text-purple-100 mb-1">
                    Causa Raiz Identificada
                  </p>
                  <p className="text-sm text-purple-700 dark:text-purple-300">
                    {causes[causes.length - 1]?.answer || "Análise concluída"}
                  </p>
                </div>
              </div>
            </div>
          </CardContent>
        </Card>
      ) : (
        <Card>
          <CardContent className="py-12 text-center">
            <AlertCircle className="h-12 w-12 text-muted-foreground mx-auto mb-3 opacity-50" />
            <p className="text-sm text-muted-foreground mb-4">Nenhuma análise de causa raiz realizada ainda</p>
            <Button onClick={() => setIsEditing(true)}>Iniciar Análise dos 5 Porquês</Button>
          </CardContent>
        </Card>
      )}
    </div>
  )
}
[V0_FILE]typescript:file="components/effectiveness-module.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import { Input } from "@/components/ui/input"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { CheckCircle, XCircle, Clock, AlertCircle, Upload, FileText } from "lucide-react"
import type { EffectivenessEvaluation } from "@/lib/types"

interface EffectivenessModuleProps {
  ncId: string
  evaluation: EffectivenessEvaluation | null
  onSaveEvaluation: (evaluation: Omit<EffectivenessEvaluation, "id" | "createdAt" | "updatedAt">) => void
}

type EvaluationResult = "yes" | "no" | "postpone" | null

export function EffectivenessModule({ ncId, evaluation, onSaveEvaluation }: EffectivenessModuleProps) {
  const [result, setResult] = useState<EvaluationResult>(
    evaluation ? (evaluation.isEffective ? "yes" : evaluation.postponedDate ? "postpone" : "no") : null,
  )
  const [findings, setFindings] = useState(evaluation?.findings || "")
  const [recommendations, setRecommendations] = useState(evaluation?.recommendations || "")
  const [evidenceUrl, setEvidenceUrl] = useState(evaluation?.evidenceUrl || "")
  const [postponedDate, setPostponedDate] = useState(evaluation?.postponedDate || "")
  const [evaluator, setEvaluator] = useState(evaluation?.evaluator || "")

const handleSave = () => {
    if (!result || !findings.trim() || !evaluator.trim()) return

if (result === "postpone" && !postponedDate) {
      alert("Por favor, informe a nova data para avaliação")
      return
    }

onSaveEvaluation({
      ncId,
      evaluationDate: new Date().toISOString(),
      evaluator,
      isEffective: result === "yes",
      findings,
      evidenceUrl: evidenceUrl || undefined,
      recommendations: recommendations || undefined,
      postponedDate: result === "postpone" ? postponedDate : undefined,
    })
  }

const canSave = result && findings.trim() && evaluator.trim() && (result !== "postpone" || postponedDate)

return (
    <div className="space-y-4">
      <div>
        <h3 className="text-lg font-semibold mb-1">Avaliação de Eficácia</h3>
        <p className="text-sm text-muted-foreground">
          Avalie se as ações corretivas implementadas foram eficazes na resolução da não conformidade
        </p>
      </div>

{evaluation && !result ? (
        <Card>
          <CardContent className="pt-6 space-y-4">
            <div className="flex items-center justify-between pb-4 border-b">
              <div className="flex items-center gap-3">
                {evaluation.isEffective ? (
                  <CheckCircle className="h-8 w-8 text-green-600" />
                ) : evaluation.postponedDate ? (
                  <Clock className="h-8 w-8 text-orange-600" />
                ) : (
                  <XCircle className="h-8 w-8 text-red-600" />
                )}
                <div>
                  <Badge
                    className={
                      evaluation.isEffective
                        ? "bg-green-500"
                        : evaluation.postponedDate
                          ? "bg-orange-500"
                          : "bg-red-500"
                    }
                  >
                    {evaluation.isEffective ? "Eficaz" : evaluation.postponedDate ? "Postergado" : "Não Eficaz"}
                  </Badge>
                  <p className="text-sm text-muted-foreground mt-1">
                    Avaliado em {new Date(evaluation.evaluationDate).toLocaleDateString("pt-BR")}
                  </p>
                </div>
              </div>
              <Button variant="outline" onClick={() => setResult(null)}>
                Nova Avaliação
              </Button>
            </div>

<div className="space-y-3">
              <div>
                <Label className="text-xs text-muted-foreground">Avaliador</Label>
                <p className="text-sm font-medium">{evaluation.evaluator}</p>
              </div>

<div>
                <Label className="text-xs text-muted-foreground">Constatações</Label>
                <p className="text-sm leading-relaxed">{evaluation.findings}</p>
              </div>

{evaluation.recommendations && (
                <div>
                  <Label className="text-xs text-muted-foreground">Recomendações</Label>
                  <p className="text-sm leading-relaxed">{evaluation.recommendations}</p>
                </div>
              )}

{evaluation.postponedDate && (
                <div>
                  <Label className="text-xs text-muted-foreground">Nova Data de Avaliação</Label>
                  <p className="text-sm font-medium">
                    {new Date(evaluation.postponedDate).toLocaleDateString("pt-BR")}
                  </p>
                </div>
              )}

{evaluation.evidenceUrl && (
                <div>
                  <Label className="text-xs text-muted-foreground">Evidências</Label>
                  <div className="flex items-center gap-2 text-sm text-primary">
                    <FileText className="h-4 w-4" />
                    <a href={evaluation.evidenceUrl} target="_blank" rel="noopener noreferrer" className="underline">
                      Ver arquivo anexado
                    </a>
                  </div>
                </div>
              )}
            </div>
          </CardContent>
        </Card>
      ) : (
        <Card className="border-2 border-primary">
          <CardHeader>
            <CardTitle className="text-base">Resultado da Avaliação</CardTitle>
            <CardDescription>Selecione o resultado da avaliação e forneça as informações solicitadas</CardDescription>
          </CardHeader>
          <CardContent className="space-y-6">
            <div className="space-y-3">
              <Label>Qual o resultado da avaliação?</Label>
              <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
                <button
                  onClick={() => setResult("yes")}
                  className={`p-4 rounded-lg border-2 transition-all ${
                    result === "yes"
                      ? "border-green-500 bg-green-50 dark:bg-green-900/20"
                      : "border-gray-200 hover:border-green-300"
                  }`}
                >
                  <CheckCircle
                    className={`h-8 w-8 mx-auto mb-2 ${result === "yes" ? "text-green-600" : "text-gray-400"}`}
                  />
                  <p className="text-sm font-semibold">Sim</p>
                  <p className="text-xs text-muted-foreground">Ações foram eficazes</p>
                </button>

<button
                  onClick={() => setResult("no")}
                  className={`p-4 rounded-lg border-2 transition-all ${
                    result === "no"
                      ? "border-red-500 bg-red-50 dark:bg-red-900/20"
                      : "border-gray-200 hover:border-red-300"
                  }`}
                >
                  <XCircle className={`h-8 w-8 mx-auto mb-2 ${result === "no" ? "text-red-600" : "text-gray-400"}`} />
                  <p className="text-sm font-semibold">Não</p>
                  <p className="text-xs text-muted-foreground">Ações não foram eficazes</p>
                </button>

<button
                  onClick={() => setResult("postpone")}
                  className={`p-4 rounded-lg border-2 transition-all ${
                    result === "postpone"
                      ? "border-orange-500 bg-orange-50 dark:bg-orange-900/20"
                      : "border-gray-200 hover:border-orange-300"
                  }`}
                >
                  <Clock
                    className={`h-8 w-8 mx-auto mb-2 ${result === "postpone" ? "text-orange-600" : "text-gray-400"}`}
                  />
                  <p className="text-sm font-semibold">Postergar</p>
                  <p className="text-xs text-muted-foreground">Alterar data da NC</p>
                </button>
              </div>
            </div>

{result && (
              <>
                <div className="space-y-2">
                  <Label htmlFor="evaluator">
                    Avaliador <span className="text-red-500">*</span>
                  </Label>
                  <Input
                    id="evaluator"
                    value={evaluator}
                    onChange={(e) => setEvaluator(e.target.value)}
                    placeholder="Nome do responsável pela avaliação"
                  />
                </div>

<div className="space-y-2">
                  <Label htmlFor="findings">
                    Constatações <span className="text-red-500">*</span>
                  </Label>
                  <Textarea
                    id="findings"
                    value={findings}
                    onChange={(e) => setFindings(e.target.value)}
                    placeholder="Descreva as constatações da avaliação..."
                    rows={4}
                  />
                </div>

{result === "postpone" && (
                  <div className="space-y-2">
                    <Label htmlFor="postponedDate">
                      Nova Data para Avaliação <span className="text-red-500">*</span>
                    </Label>
                    <Input
                      id="postponedDate"
                      type="date"
                      value={postponedDate}
                      onChange={(e) => setPostponedDate(e.target.value)}
                    />
                    <p className="text-xs text-muted-foreground">A NC permanecerá em aberto até esta data</p>
                  </div>
                )}

<div className="space-y-2">
                  <Label htmlFor="recommendations">Recomendações</Label>
                  <Textarea
                    id="recommendations"
                    value={recommendations}
                    onChange={(e) => setRecommendations(e.target.value)}
                    placeholder="Recomendações para melhorias futuras (opcional)..."
                    rows={3}
                  />
                </div>

<div className="space-y-2">
                  <Label htmlFor="evidence">Evidências</Label>
                  <div className="flex gap-2">
                    <Input
                      id="evidence"
                      value={evidenceUrl}
                      onChange={(e) => setEvidenceUrl(e.target.value)}
                      placeholder="URL do arquivo de evidência (opcional)"
                    />
                    <Button type="button" variant="outline" size="icon">
                      <Upload className="h-4 w-4" />
                    </Button>
                  </div>
                  <p className="text-xs text-muted-foreground">
                    Anexe fotos, documentos ou outros arquivos que comprovem a avaliação
                  </p>
                </div>

<div className="flex justify-end pt-4 border-t">
                  <Button onClick={handleSave} disabled={!canSave} size="lg">
                    Salvar Avaliação
                  </Button>
                </div>
              </>
            )}
          </CardContent>
        </Card>
      )}

{!evaluation && !result && (
        <Card>
          <CardContent className="py-12 text-center">
            <AlertCircle className="h-12 w-12 text-muted-foreground mx-auto mb-3 opacity-50" />
            <p className="text-sm text-muted-foreground mb-4">
              Nenhuma avaliação de eficácia realizada ainda. Complete as etapas anteriores para avaliar.
            </p>
          </CardContent>
        </Card>
      )}
    </div>
  )
}
[V0_FILE]sql:file="scripts/02-seed-sample-data.sql" isEdit="true" isMerged="true"
-- Sample data for NC Management System with 10 NCs all in "planning" status

-- Insert 10 sample NCs
INSERT INTO ncs (nc_number, title, description, severity, status, category, location, responsible_person, registered_by) VALUES
  ('NC-2025-001', 'Concreto com resistência abaixo do especificado', 'Durante o ensaio de compressão, o concreto apresentou resistência de 18 MPa, sendo que o especificado era 25 MPa.', 'high', 'planning', 'Qualidade do Material', 'Bloco A - 3º Pavimento', 'João Silva', 'Maria Santos'),
  ('NC-2025-002', 'Armadura fora da posição especificada', 'As armaduras da viga V1 foram encontradas com cobrimento inferior ao especificado em projeto.', 'medium', 'planning', 'Execução', 'Bloco B - 2º Pavimento', 'Carlos Oliveira', 'Pedro Costa'),
  ('NC-2025-003', 'Falta de EPI em trabalhadores', 'Durante inspeção de segurança, foram identificados 3 trabalhadores sem capacete de segurança.', 'critical', 'planning', 'Segurança do Trabalho', 'Canteiro de Obras - Área Externa', 'Ana Paula', 'Roberto Lima'),
  ('NC-2025-004', 'Documento de projeto desatualizado', 'Equipe executando obra com revisão antiga do projeto estrutural.', 'low', 'planning', 'Documentação', 'Escritório de Obras', 'Fernando Alves', 'Juliana Pereira'),
  ('NC-2025-005', 'Acabamento com defeitos em revestimento cerâmico', 'Identificadas várias peças cerâmicas com esmalte trincado e desnivelamento na parede do banheiro.', 'medium', 'planning', 'Execução', 'Bloco C - Apartamento 301', 'Ricardo Mendes', 'Sandra Lima'),
  ('NC-2025-006', 'Descarte irregular de resíduos', 'Resíduos de construção sendo descartados sem segregação adequada, misturando recicláveis e não recicláveis.', 'high', 'planning', 'Meio Ambiente', 'Área de Resíduos', 'Marcos Paulo', 'Ana Rodrigues'),
  ('NC-2025-007', 'Atraso na entrega de materiais pelo fornecedor', 'Fornecedor atrasou a entrega de tijolos cerâmicos em 10 dias, impactando o cronograma da obra.', 'high', 'planning', 'Fornecedor', 'Central de Recebimento', 'Lucas Fernandes', 'Patricia Souza'),
  ('NC-2025-008', 'Instalação elétrica não conforme com projeto', 'Pontos de tomada instalados em posições diferentes das especificadas no projeto elétrico.', 'medium', 'planning', 'Projeto', 'Bloco D - 1º Pavimento', 'André Costa', 'Beatriz Santos'),
  ('NC-2025-009', 'Fissuras em alvenaria recém-executada', 'Aparecimento de fissuras em parede de alvenaria executada há 15 dias.', 'critical', 'planning', 'Qualidade do Material', 'Bloco A - 5º Pavimento', 'Gabriel Almeida', 'Renata Silva'),
  ('NC-2025-010', 'Falta de sinalização em área de risco', 'Área com risco de queda não está devidamente sinalizada e isolada.', 'critical', 'planning', 'Segurança do Trabalho', 'Escada Externa - Bloco B', 'Roberto Martins', 'Carla Mendes');
[V0_FILE]typescript:file="components/nc-registration-form.tsx" isEdit="true" isMerged="true"
"use client"

import type React from "react"

import { useState } from "react"
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 { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Badge } from "@/components/ui/badge"
import { ArrowLeft, Save, Link, X } from "lucide-react"
import type { NC, NCSeverity, NCStatus } from "@/lib/types"
import { createNC, getQualityInspections } from "@/lib/nc-store"
import { QualityInspectionSelector } from "./quality-inspection-selector"

interface NCRegistrationFormProps {
  onBack: () => void
  onSuccess?: (nc: NC) => void
}

export function NCRegistrationForm({ onBack, onSuccess }: NCRegistrationFormProps) {
  const [formData, setFormData] = useState({
    ncNumber: `NC-2025-${String(Date.now()).slice(-3)}`,
    title: "",
    description: "",
    severity: "" as NCSeverity,
    category: "",
    location: "",
    responsiblePerson: "",
    registeredBy: "",
  })

const [linkedInspections, setLinkedInspections] = useState<string[]>([])
  const [showInspectionSelector, setShowInspectionSelector] = useState(false)

const [isSubmitting, setIsSubmitting] = useState(false)

const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setIsSubmitting(true)

try {
      const newNC = createNC({
        ncNumber: formData.ncNumber,
        title: formData.title,
        description: formData.description,
        severity: formData.severity,
        status: "planning" as NCStatus,
        category: formData.category,
        location: formData.location,
        responsiblePerson: formData.responsiblePerson,
        registeredBy: formData.registeredBy,
        registeredAt: new Date().toISOString(),
        linkedInspections,
      } as any)

onSuccess?.(newNC)
      onBack()
    } catch (error) {
      console.error("Error creating NC:", error)
    } finally {
      setIsSubmitting(false)
    }
  }

const updateField = (field: string, value: string) => {
    setFormData((prev) => ({ ...prev, [field]: value }))
  }

const isFormValid = () => {
    return (
      formData.title &&
      formData.description &&
      formData.severity &&
      formData.category &&
      formData.location &&
      formData.responsiblePerson &&
      formData.registeredBy
    )
  }

const handleRemoveInspection = (inspectionId: string) => {
    setLinkedInspections((prev) => prev.filter((id) => id !== inspectionId))
  }

const getInspectionById = (id: string) => {
    return getQualityInspections().find((qi) => qi.id === id)
  }

return (
    <div className="space-y-4 max-w-4xl mx-auto">
      <div className="flex items-center justify-between">
        <Button variant="ghost" onClick={onBack}>
          <ArrowLeft className="mr-2 h-4 w-4" />
          Voltar
        </Button>
      </div>

<Card>
        <CardHeader>
          <CardTitle className="text-2xl">Registrar Nova Não Conformidade</CardTitle>
          <CardDescription>Preencha todos os campos obrigatórios para registrar uma nova NC</CardDescription>
        </CardHeader>
        <CardContent>
          <form onSubmit={handleSubmit} className="space-y-6">
            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              <div className="space-y-2">
                <Label htmlFor="ncNumber">Número da NC *</Label>
                <Input
                  id="ncNumber"
                  value={formData.ncNumber}
                  onChange={(e) => updateField("ncNumber", e.target.value)}
                  placeholder="NC-2025-001"
                  required
                />
              </div>

<div className="space-y-2">
                <Label htmlFor="severity">Severidade *</Label>
                <Select value={formData.severity} onValueChange={(value) => updateField("severity", value)} required>
                  <SelectTrigger id="severity">
                    <SelectValue placeholder="Selecione a severidade" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="low">Baixa</SelectItem>
                    <SelectItem value="medium">Média</SelectItem>
                    <SelectItem value="high">Alta</SelectItem>
                    <SelectItem value="critical">Crítica</SelectItem>
                  </SelectContent>
                </Select>
              </div>
            </div>

<div className="space-y-2">
              <Label htmlFor="title">Título *</Label>
              <Input
                id="title"
                value={formData.title}
                onChange={(e) => updateField("title", e.target.value)}
                placeholder="Ex: Concreto com resistência abaixo do especificado"
                required
              />
            </div>

<div className="space-y-2">
              <Label htmlFor="description">Descrição Detalhada *</Label>
              <Textarea
                id="description"
                value={formData.description}
                onChange={(e) => updateField("description", e.target.value)}
                placeholder="Descreva em detalhes a não conformidade identificada..."
                rows={5}
                required
              />
            </div>

<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              <div className="space-y-2">
                <Label htmlFor="category">Categoria *</Label>
                <Select value={formData.category} onValueChange={(value) => updateField("category", value)} required>
                  <SelectTrigger id="category">
                    <SelectValue placeholder="Selecione a categoria" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="Qualidade do Material">Qualidade do Material</SelectItem>
                    <SelectItem value="Execução">Execução</SelectItem>
                    <SelectItem value="Segurança do Trabalho">Segurança do Trabalho</SelectItem>
                    <SelectItem value="Documentação">Documentação</SelectItem>
                    <SelectItem value="Prazo">Prazo</SelectItem>
                    <SelectItem value="Meio Ambiente">Meio Ambiente</SelectItem>
                    <SelectItem value="Projeto">Projeto</SelectItem>
                    <SelectItem value="Fornecedor">Fornecedor</SelectItem>
                    <SelectItem value="Outro">Outro</SelectItem>
                  </SelectContent>
                </Select>
              </div>

<div className="space-y-2">
                <Label htmlFor="location">Local *</Label>
                <Input
                  id="location"
                  value={formData.location}
                  onChange={(e) => updateField("location", e.target.value)}
                  placeholder="Ex: Bloco A - 3º Pavimento"
                  required
                />
              </div>
            </div>

<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              <div className="space-y-2">
                <Label htmlFor="responsiblePerson">Responsável pela Correção *</Label>
                <Input
                  id="responsiblePerson"
                  value={formData.responsiblePerson}
                  onChange={(e) => updateField("responsiblePerson", e.target.value)}
                  placeholder="Nome do responsável"
                  required
                />
              </div>

<div className="space-y-2">
                <Label htmlFor="registeredBy">Registrado por *</Label>
                <Input
                  id="registeredBy"
                  value={formData.registeredBy}
                  onChange={(e) => updateField("registeredBy", e.target.value)}
                  placeholder="Seu nome"
                  required
                />
              </div>
            </div>

<div className="space-y-3 pt-4 border-t">
              <div className="flex items-center justify-between">
                <div>
                  <Label>Inspeções de Qualidade Vinculadas</Label>
                  <p className="text-sm text-muted-foreground mt-1">
                    Vincule inspeções de qualidade reprovadas relacionadas a esta NC
                  </p>
                </div>
                <Button type="button" variant="outline" size="sm" onClick={() => setShowInspectionSelector(true)}>
                  <Link className="mr-2 h-4 w-4" />
                  Vincular Inspeções
                </Button>
              </div>

{linkedInspections.length > 0 && (
                <div className="space-y-2">
                  {linkedInspections.map((inspectionId) => {
                    const inspection = getInspectionById(inspectionId)
                    if (!inspection) return null

return (
                      <div
                        key={inspectionId}
                        className="flex items-center justify-between p-3 border rounded-lg bg-muted/50"
                      >
                        <div className="flex items-center gap-3 flex-1 min-w-0">
                          <Badge variant="outline" className="font-mono flex-shrink-0">
                            {inspection.fichaCode}
                          </Badge>
                          <div className="flex-1 min-w-0">
                            <p className="text-sm font-medium truncate">{inspection.verificacao}</p>
                            <p className="text-xs text-muted-foreground truncate">
                              {inspection.modelo} • {inspection.local}
                            </p>
                          </div>
                        </div>
                        <Button
                          type="button"
                          variant="ghost"
                          size="sm"
                          onClick={() => handleRemoveInspection(inspectionId)}
                          className="flex-shrink-0 ml-2"
                        >
                          <X className="h-4 w-4" />
                        </Button>
                      </div>
                    )
                  })}
                </div>
              )}
            </div>

<div className="flex gap-3 justify-end pt-4 border-t">
              <Button type="button" variant="outline" onClick={onBack}>
                Cancelar
              </Button>
              <Button type="submit" disabled={!isFormValid() || isSubmitting}>
                <Save className="mr-2 h-4 w-4" />
                {isSubmitting ? "Salvando..." : "Salvar NC"}
              </Button>
            </div>
          </form>
        </CardContent>
      </Card>

<QualityInspectionSelector
        open={showInspectionSelector}
        onOpenChange={setShowInspectionSelector}
        selectedInspections={linkedInspections}
        onSelectionChange={setLinkedInspections}
      />
    </div>
  )
}
[V0_FILE]typescript:file="components/quality-inspection-selector.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from "@/components/ui/dialog"
import { Button } from "@/components/ui/button"
import { Checkbox } from "@/components/ui/checkbox"
import { ScrollArea } from "@/components/ui/scroll-area"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { getQualityInspections } from "@/lib/nc-store"
import type { QualityInspection } from "@/lib/types"

interface QualityInspectionSelectorProps {
  open: boolean
  onOpenChange: (open: boolean) => void
  selectedInspections: string[]
  onSelectionChange: (inspectionIds: string[]) => void
}

export function QualityInspectionSelector({
  open,
  onOpenChange,
  selectedInspections,
  onSelectionChange,
}: QualityInspectionSelectorProps) {
  const [allInspections, setAllInspections] = useState<QualityInspection[]>([])
  const [isLoading, setIsLoading] = useState(true)

useEffect(() => {
    setIsLoading(true)
    try {
      const inspections = getQualityInspections()
      setAllInspections(inspections || [])
    } catch (error) {
      console.error("[v0] Error loading quality inspections:", error)
      setAllInspections([])
    } finally {
      setIsLoading(false)
    }
  }, [])

const handleToggleInspection = (inspectionId: string) => {
    if (selectedInspections.includes(inspectionId)) {
      onSelectionChange(selectedInspections.filter((id) => id !== inspectionId))
    } else {
      onSelectionChange([...selectedInspections, inspectionId])
    }
  }

const formatDate = (dateString: string) => {
    return new Date(dateString).toLocaleDateString("pt-BR", {
      day: "2-digit",
      month: "2-digit",
      year: "numeric",
    })
  }

if (isLoading) {
    return (
      <Dialog open={open} onOpenChange={onOpenChange}>
        <DialogContent className="max-w-md">
          <DialogHeader>
            <DialogTitle>Vincular Inspeções de Qualidade</DialogTitle>
            <DialogDescription>Carregando inspeções...</DialogDescription>
          </DialogHeader>
        </DialogContent>
      </Dialog>
    )
  }

if (allInspections.length === 0) {
    return (
      <Dialog open={open} onOpenChange={onOpenChange}>
        <DialogContent className="max-w-md">
          <DialogHeader>
            <DialogTitle>Vincular Inspeções de Qualidade</DialogTitle>
            <DialogDescription>Nenhuma inspeção reprovada encontrada.</DialogDescription>
          </DialogHeader>
          <Button onClick={() => onOpenChange(false)}>Fechar</Button>
        </DialogContent>
      </Dialog>
    )
  }

return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="max-w-[95vw] max-h-[90vh] flex flex-col">
        <DialogHeader>
          <DialogTitle>Verificações Reprovadas</DialogTitle>
          <DialogDescription>
            Selecione as verificações reprovadas que deseja vincular a esta não conformidade
          </DialogDescription>
        </DialogHeader>

<ScrollArea className="flex-1 -mx-6 px-6">
          <div className="border rounded-lg">
            <Table>
              <TableHeader>
                <TableRow className="bg-muted/50">
                  <TableHead className="w-[50px]"></TableHead>
                  <TableHead className="min-w-[140px]">Código da Ficha</TableHead>
                  <TableHead className="min-w-[250px]">Descrição da Verificação</TableHead>
                  <TableHead className="min-w-[180px]">Parceiro</TableHead>
                  <TableHead className="min-w-[200px]">Local</TableHead>
                  <TableHead className="min-w-[180px]">Inspetor</TableHead>
                  <TableHead className="min-w-[280px]">Problema Encontrado</TableHead>
                  <TableHead className="min-w-[280px]">Solução Indicada</TableHead>
                  <TableHead className="min-w-[120px]">Data da Verificação</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {allInspections.map((inspection) => (
                  <TableRow key={inspection.id} className="hover:bg-muted/30">
                    <TableCell>
                      <Checkbox
                        checked={selectedInspections.includes(inspection.id)}
                        onCheckedChange={() => handleToggleInspection(inspection.id)}
                      />
                    </TableCell>
                    <TableCell className="font-mono text-xs">{inspection.fichaCode}</TableCell>
                    <TableCell className="text-sm">{inspection.verificacao}</TableCell>
                    <TableCell className="text-sm">{inspection.parceiro}</TableCell>
                    <TableCell className="text-sm">{inspection.local}</TableCell>
                    <TableCell className="text-sm">{inspection.inspetor}</TableCell>
                    <TableCell className="text-sm">{inspection.problemaEncontrado}</TableCell>
                    <TableCell className="text-sm">{inspection.solucaoIndicada}</TableCell>
                    <TableCell className="text-sm whitespace-nowrap">
                      {formatDate(inspection.dataVerificacao)}
                    </TableCell>
                  </TableRow>
                ))}
              </TableBody>
            </Table>
          </div>
        </ScrollArea>

<div className="flex items-center justify-between pt-4 border-t">
          <p className="text-sm text-muted-foreground">{selectedInspections.length} verificação(ões) selecionada(s)</p>
          <div className="flex gap-2">
            <Button variant="outline" onClick={() => onOpenChange(false)}>
              Cancelar
            </Button>
            <Button onClick={() => onOpenChange(false)}>Confirmar Seleção</Button>
          </div>
        </div>
      </DialogContent>
    </Dialog>
  )
}
[V0_FILE]typescript:file="lib/types.ts" isEdit="true" isQuickEdit="true" isMerged="true"
export type NCSeverity = "low" | "medium" | "high" | "critical"

export type NCStatus = "planning" | "waiting" | "in_progress" | "verification" | "completed"

export type ActionStatus = "pending" | "in_progress" | "completed"

export interface NC {
  id: string
  ncNumber: string
  title: string
  description: string
  severity: NCSeverity
  status: NCStatus
  category: string
  location: string
  responsiblePerson: string
  registeredBy: string
  registeredAt: string
  closedAt?: string
  createdAt: string
  updatedAt: string
}

export interface ImmediateAction {
  id: string
  ncId: string
  actionDescription: string
  responsible: string
  deadline: string
  status: ActionStatus
  completionDate?: string
  evidenceUrl?: string
  notes?: string
  createdAt: string
  updatedAt: string
}

export interface ActionPlan {
  id: string
  ncId: string
  actionDescription: string
  responsible: string
  deadline: string
  status: ActionStatus
  completionDate?: string
  evidenceUrl?: string
  notes?: string
  createdAt: string
  updatedAt: string
}

export interface RootCause {
  id: string
  ncId: string
  whyNumber: number
  question: string
  answer: string
  createdAt: string
  updatedAt: string
}

export interface CorrectiveAction {
  id: string
  ncId: string
  what: string
  why: string
  who: string
  whenDate: string
  whereLocation: string
  how: string
  howMuch?: number
  status: ActionStatus
  completionDate?: string
  evidenceUrl?: string
  notes?: string
  createdAt: string
  updatedAt: string
}

export interface EffectivenessEvaluation {
  id: string
  ncId: string
  evaluationDate: string
  evaluator: string
  isEffective: boolean
  findings: string
  evidenceUrl?: string
  recommendations?: string
  postponedDate?: string
  createdAt: string
  updatedAt: string
}

export interface Attachment {
  id: string
  ncId: string
  fileName: string
  fileUrl: string
  fileType?: string
  uploadedBy: string
  uploadedAt: string
}

export interface QualityInspection {
  id: string
  fichaCode: string
  revisao: number
  modelo: string
  verificacao: string
  status: "reprovado"
  parceiro: string
  obra: string
  local: string
  inspetor: string
  problemaEncontrado: string
  solucaoIndicada: string
  dataVerificacao: string
  camposPersonalizados?: string
  createdAt: string
}

export interface NCWithInspections extends NC {
  linkedInspections?: string[]
}
[V0_FILE]typescript:file="lib/nc-store.ts" isMerged="true"
"use client"

import type {
  NC,
  ImmediateAction,
  ActionPlan,
  RootCause,
  CorrectiveAction,
  EffectivenessEvaluation,
  QualityInspection,
} from "./types"

// Mock data store using localStorage
const STORAGE_KEY = "nc-management-data"

interface NCData {
  ncs: NC[]
  immediateActions: ImmediateAction[]
  actionPlans: ActionPlan[]
  rootCauses: RootCause[]
  correctiveActions: CorrectiveAction[]
  effectivenessEvaluations: EffectivenessEvaluation[]
  qualityInspections: QualityInspection[]
}

const initialData: NCData = {
  ncs: [
    {
      id: "1",
      ncNumber: "NC-2025-001",
      title: "Concreto com resistência abaixo do especificado",
      description:
        "Durante o ensaio de compressão, o concreto apresentou resistência de 18 MPa, sendo que o especificado era 25 MPa.",
      severity: "high",
      status: "planning",
      category: "Qualidade do Material",
      location: "Bloco A - 3º Pavimento",
      responsiblePerson: "João Silva",
      registeredBy: "Maria Santos",
      registeredAt: "2025-01-10T10:00:00Z",
      createdAt: "2025-01-10T10:00:00Z",
      updatedAt: "2025-01-15T14:30:00Z",
    },
    {
      id: "2",
      ncNumber: "NC-2025-002",
      title: "Armadura fora da posição especificada",
      description: "As armaduras da viga V1 foram encontradas com cobrimento inferior ao especificado em projeto.",
      severity: "medium",
      status: "planning",
      category: "Execução",
      location: "Bloco B - 2º Pavimento",
      responsiblePerson: "Carlos Oliveira",
      registeredBy: "Pedro Costa",
      registeredAt: "2025-01-12T08:30:00Z",
      createdAt: "2025-01-12T08:30:00Z",
      updatedAt: "2025-01-12T08:30:00Z",
    },
    {
      id: "3",
      ncNumber: "NC-2025-003",
      title: "Falta de EPI em trabalhadores",
      description: "Durante inspeção de segurança, foram identificados 3 trabalhadores sem capacete de segurança.",
      severity: "critical",
      status: "planning",
      category: "Segurança do Trabalho",
      location: "Canteiro de Obras - Área Externa",
      responsiblePerson: "Ana Paula",
      registeredBy: "Roberto Lima",
      registeredAt: "2025-01-08T15:45:00Z",
      createdAt: "2025-01-08T15:45:00Z",
      updatedAt: "2025-01-14T11:20:00Z",
    },
    {
      id: "11",
      ncNumber: "NC-2025-011",
      title: "Infiltração em laje de cobertura",
      description: "Identificada infiltração na laje de cobertura devido à impermeabilização inadequada.",
      severity: "high",
      status: "awaiting-progress",
      category: "Execução",
      location: "Bloco A - Cobertura",
      responsiblePerson: "João Silva",
      registeredBy: "Maria Santos",
      registeredAt: "2025-01-05T09:00:00Z",
      createdAt: "2025-01-05T09:00:00Z",
      updatedAt: "2025-01-16T10:00:00Z",
    },
    {
      id: "12",
      ncNumber: "NC-2025-012",
      title: "Esquadrias com vedação deficiente",
      description: "Janelas instaladas apresentam folgas permitindo entrada de água e vento.",
      severity: "medium",
      status: "awaiting-progress",
      category: "Qualidade do Material",
      location: "Bloco C - Apartamentos 401 a 405",
      responsiblePerson: "Ricardo Mendes",
      registeredBy: "Sandra Lima",
      registeredAt: "2025-01-06T14:20:00Z",
      createdAt: "2025-01-06T14:20:00Z",
      updatedAt: "2025-01-16T11:30:00Z",
    },
    {
      id: "13",
      ncNumber: "NC-2025-013",
      title: "Piso com desnível acima do tolerado",
      description: "Piso do hall de entrada apresenta desnível de 8mm, acima dos 3mm tolerados por norma.",
      severity: "medium",
      status: "in-progress",
      category: "Execução",
      location: "Bloco D - Hall Principal",
      responsiblePerson: "Carlos Oliveira",
      registeredBy: "Pedro Costa",
      registeredAt: "2025-01-03T11:15:00Z",
      createdAt: "2025-01-03T11:15:00Z",
      updatedAt: "2025-01-17T09:45:00Z",
    },
    {
      id: "14",
      ncNumber: "NC-2025-014",
      title: "Pintura com manchas e bolhas",
      description: "Parede externa apresenta manchas e formação de bolhas após 10 dias da aplicação.",
      severity: "low",
      status: "in-progress",
      category: "Execução",
      location: "Fachada Sul - Bloco B",
      responsiblePerson: "André Costa",
      registeredBy: "Beatriz Santos",
      registeredAt: "2025-01-04T08:30:00Z",
      createdAt: "2025-01-04T08:30:00Z",
      updatedAt: "2025-01-17T14:20:00Z",
    },
    {
      id: "15",
      ncNumber: "NC-2025-015",
      title: "Sistema de SPDA incompleto",
      description: "Sistema de proteção contra descargas atmosféricas sem aterramento adequado.",
      severity: "critical",
      status: "in-progress",
      category: "Segurança do Trabalho",
      location: "Cobertura - Todos os Blocos",
      responsiblePerson: "Roberto Martins",
      registeredBy: "Carla Mendes",
      registeredAt: "2025-01-02T10:00:00Z",
      createdAt: "2025-01-02T10:00:00Z",
      updatedAt: "2025-01-17T16:30:00Z",
    },
    {
      id: "16",
      ncNumber: "NC-2024-085",
      title: "Porta corta-fogo sem certificação",
      description: "Portas corta-fogo instaladas não possuem certificação válida do corpo de bombeiros.",
      severity: "critical",
      status: "awaiting-verification",
      category: "Documentação",
      location: "Escadas de Emergência - Todos os Blocos",
      responsiblePerson: "Fernando Alves",
      registeredBy: "Juliana Pereira",
      registeredAt: "2024-12-28T13:45:00Z",
      createdAt: "2024-12-28T13:45:00Z",
      updatedAt: "2025-01-18T10:15:00Z",
    },
    {
      id: "17",
      ncNumber: "NC-2024-089",
      title: "Tubulação de esgoto com vazamento",
      description: "Identificado vazamento em tubulação de esgoto no subsolo após teste de estanqueidade.",
      severity: "high",
      status: "awaiting-verification",
      category: "Execução",
      location: "Subsolo - Prumada 3",
      responsiblePerson: "Marcos Paulo",
      registeredBy: "Ana Rodrigues",
      registeredAt: "2024-12-29T15:30:00Z",
      createdAt: "2024-12-29T15:30:00Z",
      updatedAt: "2025-01-18T11:00:00Z",
    },
    {
      id: "18",
      ncNumber: "NC-2024-092",
      title: "Revestimento cerâmico com peças quebradas",
      description: "Identificadas 15 peças cerâmicas quebradas no piso do banheiro do apartamento modelo.",
      severity: "low",
      status: "completed",
      category: "Execução",
      location: "Bloco A - Apartamento 201",
      responsiblePerson: "Ricardo Mendes",
      registeredBy: "Sandra Lima",
      registeredAt: "2024-12-20T09:00:00Z",
      createdAt: "2024-12-20T09:00:00Z",
      updatedAt: "2025-01-15T16:45:00Z",
    },
    {
      id: "19",
      ncNumber: "NC-2024-089",
      title: "Gradil de proteção com altura insuficiente",
      description: "Gradil de proteção periférica com 0,90m de altura, sendo necessário 1,20m conforme NR-18.",
      severity: "high",
      status: "completed",
      category: "Segurança do Trabalho",
      location: "Perímetro da Obra",
      responsiblePerson: "Ana Paula",
      registeredBy: "Roberto Lima",
      registeredAt: "2024-12-18T14:20:00Z",
      createdAt: "2024-12-18T14:20:00Z",
      updatedAt: "2025-01-14T14:00:00Z",
    },
    {
      id: "20",
      ncNumber: "NC-2024-092",
      title: "Concreto da calçada com acabamento irregular",
      description: "Superfície da calçada externa apresenta acabamento grosseiro e com desníveis.",
      severity: "medium",
      status: "completed",
      category: "Execução",
      location: "Calçada Externa - Entrada Principal",
      responsiblePerson: "João Silva",
      registeredBy: "Maria Santos",
      registeredAt: "2024-12-22T10:30:00Z",
      createdAt: "2024-12-22T10:30:00Z",
      updatedAt: "2025-01-16T13:20:00Z",
    },
    {
      id: "4",
      ncNumber: "NC-2025-004",
      title: "Documento de projeto desatualizado",
      description: "Equipe executando obra com revisão antiga do projeto estrutural.",
      severity: "low",
      status: "planning",
      category: "Documentação",
      location: "Escritório de Obras",
      responsiblePerson: "Fernando Alves",
      registeredBy: "Juliana Pereira",
      registeredAt: "2025-01-13T09:15:00Z",
      createdAt: "2025-01-13T09:15:00Z",
      updatedAt: "2025-01-13T09:15:00Z",
    },
    {
      id: "5",
      ncNumber: "NC-2025-005",
      title: "Acabamento com defeitos em revestimento cerâmico",
      description: "Identificadas várias peças cerâmicas com esmalte trincado e desnivelamento na parede do banheiro.",
      severity: "medium",
      status: "planning",
      category: "Execução",
      location: "Bloco C - Apartamento 301",
      responsiblePerson: "Ricardo Mendes",
      registeredBy: "Sandra Lima",
      registeredAt: "2025-01-14T11:00:00Z",
      createdAt: "2025-01-14T11:00:00Z",
      updatedAt: "2025-01-14T11:00:00Z",
    },
    {
      id: "6",
      ncNumber: "NC-2025-006",
      title: "Descarte irregular de resíduos",
      description:
        "Resíduos de construção sendo descartados sem segregação adequada, misturando recicláveis e não recicláveis.",
      severity: "high",
      status: "planning",
      category: "Meio Ambiente",
      location: "Área de Resíduos",
      responsiblePerson: "Marcos Paulo",
      registeredBy: "Ana Rodrigues",
      registeredAt: "2025-01-11T14:20:00Z",
      createdAt: "2025-01-11T14:20:00Z",
      updatedAt: "2025-01-11T14:20:00Z",
    },
    {
      id: "7",
      ncNumber: "NC-2025-007",
      title: "Atraso na entrega de materiais pelo fornecedor",
      description: "Fornecedor atrasou a entrega de tijolos cerâmicos em 10 dias, impactando o cronograma da obra.",
      severity: "high",
      status: "planning",
      category: "Fornecedor",
      location: "Central de Recebimento",
      responsiblePerson: "Lucas Fernandes",
      registeredBy: "Patricia Souza",
      registeredAt: "2025-01-09T16:30:00Z",
      createdAt: "2025-01-09T16:30:00Z",
      updatedAt: "2025-01-09T16:30:00Z",
    },
    {
      id: "8",
      ncNumber: "NC-2025-008",
      title: "Instalação elétrica não conforme com projeto",
      description: "Pontos de tomada instalados em posições diferentes das especificadas no projeto elétrico.",
      severity: "medium",
      status: "planning",
      category: "Projeto",
      location: "Bloco D - 1º Pavimento",
      responsiblePerson: "André Costa",
      registeredBy: "Beatriz Santos",
      registeredAt: "2025-01-15T08:45:00Z",
      createdAt: "2025-01-15T08:45:00Z",
      updatedAt: "2025-01-15T08:45:00Z",
    },
    {
      id: "9",
      ncNumber: "NC-2025-009",
      title: "Fissuras em alvenaria recém-executada",
      description: "Aparecimento de fissuras em parede de alvenaria executada há 15 dias.",
      severity: "critical",
      status: "planning",
      category: "Qualidade do Material",
      location: "Bloco A - 5º Pavimento",
      responsiblePerson: "Gabriel Almeida",
      registeredBy: "Renata Silva",
      registeredAt: "2025-01-14T13:00:00Z",
      createdAt: "2025-01-14T13:00:00Z",
      updatedAt: "2025-01-14T13:00:00Z",
    },
    {
      id: "10",
      ncNumber: "NC-2025-010",
      title: "Falta de sinalização em área de risco",
      description: "Área com risco de queda não está devidamente sinalizada e isolada.",
      severity: "critical",
      status: "planning",
      category: "Segurança do Trabalho",
      location: "Escada Externa - Bloco B",
      responsiblePerson: "Roberto Martins",
      registeredBy: "Carla Mendes",
      registeredAt: "2025-01-15T10:30:00Z",
      createdAt: "2025-01-15T10:30:00Z",
      updatedAt: "2025-01-15T10:30:00Z",
    },
  ],
  immediateActions: [],
  actionPlans: [],
  rootCauses: [],
  correctiveActions: [],
  effectivenessEvaluations: [],
  qualityInspections: [
    {
      id: "qi-gesso-1",
      fichaCode: "FVS-P-5339-0162-2025",
      revisao: 4,
      modelo: "Execução de Gesso",
      verificacao: "Condições Iniciais (instalações)",
      status: "reprovado" as const,
      parceiro: "ADMINISTRADOR (TREINAMENTO CP)",
      obra: "PRODUTO",
      local: "Área \\ Churrasqueira com chopeira",
      inspetor: "ADMINISTRADOR (TREINAMENTOS CP)",
      problemaEncontrado: "Instalações elétricas não finalizadas antes da aplicação do gesso",
      solucaoIndicada: "Aguardar finalização das instalações elétricas antes de continuar",
      dataVerificacao: "2025-11-28T10:25:15Z",
      camposPersonalizados: "TETO - TTTT",
      createdAt: "2025-11-28T10:25:15Z",
    },
    {
      id: "qi-gesso-2",
      fichaCode: "FVS-P-5339-0162-2025",
      revisao: 4,
      modelo: "Execução de Gesso",
      verificacao: "Condições Iniciais (instalações)",
      status: "reprovado" as const,
      parceiro: "ADMINISTRADOR (TREINAMENTO CP)",
      obra: "PRODUTO",
      local: "Área \\ Churrasqueira com chopeira",
      inspetor: "ADMINISTRADOR (TREINAMENTOS CP)",
      problemaEncontrado: "Tubulações hidráulicas apresentam vazamento",
      solucaoIndicada: "Reparar vazamentos antes de iniciar o fechamento em gesso",
      dataVerificacao: "2025-11-28T10:25:17Z",
      camposPersonalizados: "TETO - TTTT",
      createdAt: "2025-11-28T10:25:17Z",
    },
    {
      id: "qi-gesso-3",
      fichaCode: "FVS-P-5339-0162-2025",
      revisao: 4,
      modelo: "Execução de Gesso",
      verificacao: "Encaixe das juntas (dimensões, alinhamento)",
      status: "reprovado" as const,
      parceiro: "ADMINISTRADOR (TREINAMENTO CP)",
      obra: "PRODUTO",
      local: "Área \\ Churrasqueira com chopeira",
      inspetor: "ADMINISTRADOR (TREINAMENTOS CP)",
      problemaEncontrado: "Juntas com desalinhamento superior a 2mm",
      solucaoIndicada: "Refazer juntas com desalinhamento fora da tolerância",
      dataVerificacao: "2025-11-28T10:13:34Z",
      camposPersonalizados: "",
      createdAt: "2025-11-28T10:13:34Z",
    },
    {
      id: "qi-gesso-4",
      fichaCode: "FVS-P-5339-0162-2025",
      revisao: 4,
      modelo: "Execução de Gesso",
      verificacao: "Placas (planicidade, ausência de defeitos)",
      status: "reprovado" as const,
      parceiro: "ADMINISTRADOR (TREINAMENTO CP)",
      obra: "PRODUTO",
      local: "Área \\ Churrasqueira com chopeira",
      inspetor: "ADMINISTRADOR (TREINAMENTOS CP)",
      problemaEncontrado: "Placas com ondulações e defeitos superficiais",
      solucaoIndicada: "Substituir placas defeituosas por novas",
      dataVerificacao: "2025-11-28T10:13:20Z",
      camposPersonalizados: "",
      createdAt: "2025-11-28T10:13:20Z",
    },
    {
      id: "qi-gesso-5",
      fichaCode: "FVS-P-5339-0162-2025",
      revisao: 4,
      modelo: "Execução de Gesso",
      verificacao: "Nivelamento (régua e juntas)",
      status: "reprovado" as const,
      parceiro: "ADMINISTRADOR (TREINAMENTO CP)",
      obra: "PRODUTO",
      local: "Área \\ Churrasqueira com chopeira",
      inspetor: "ADMINISTRADOR (TREINAMENTOS CP)",
      problemaEncontrado: "Nivelamento irregular com variação de até 5mm",
      solucaoIndicada: "Executar correção de nivelamento com massa de gesso",
      dataVerificacao: "2025-11-28T10:13:19Z",
      camposPersonalizados: "",
      createdAt: "2025-11-28T10:13:19Z",
    },
    {
      id: "qi-esquadria-1",
      fichaCode: "FVS-P-6240-0189-2025",
      revisao: 2,
      modelo: "Instalação de Esquadria",
      verificacao: "Nivelamento e Prumo",
      status: "reprovado" as const,
      parceiro: "Esquadrias Premium LTDA",
      obra: "PRODUTO",
      local: "Bloco A \\ Apartamento 201 \\ Sala",
      inspetor: "Carlos Eduardo",
      problemaEncontrado: "Janela instalada fora de prumo com desvio de 8mm",
      solucaoIndicada: "Remover e reinstalar janela com correção de prumo",
      dataVerificacao: "2025-12-01T14:30:00Z",
      camposPersonalizados: "JANELA TIPO 1",
      createdAt: "2025-12-01T14:30:00Z",
    },
    {
      id: "qi-esquadria-2",
      fichaCode: "FVS-P-6240-0189-2025",
      revisao: 2,
      modelo: "Instalação de Esquadria",
      verificacao: "Fixação e Vedação",
      status: "reprovado" as const,
      parceiro: "Esquadrias Premium LTDA",
      obra: "PRODUTO",
      local: "Bloco A \\ Apartamento 201 \\ Quarto 1",
      inspetor: "Carlos Eduardo",
      problemaEncontrado: "Ausência de vedação adequada nas laterais da esquadria",
      solucaoIndicada: "Aplicar espuma de poliuretano e silicone nas laterais",
      dataVerificacao: "2025-12-01T14:45:00Z",
      camposPersonalizados: "JANELA TIPO 2",
      createdAt: "2025-12-01T14:45:00Z",
    },
    {
      id: "qi-esquadria-3",
      fichaCode: "FVS-P-6240-0189-2025",
      revisao: 2,
      modelo: "Instalação de Esquadria",
      verificacao: "Funcionamento de Abertura",
      status: "reprovado" as const,
      parceiro: "Esquadrias Premium LTDA",
      obra: "PRODUTO",
      local: "Bloco B \\ Apartamento 305 \\ Cozinha",
      inspetor: "Carlos Eduardo",
      problemaEncontrado: "Janela de correr com travamento no trilho",
      solucaoIndicada: "Ajustar trilho e lubrificar mecanismo de abertura",
      dataVerificacao: "2025-12-01T15:00:00Z",
      camposPersonalizados: "JANELA TIPO 3",
      createdAt: "2025-12-01T15:00:00Z",
    },
    {
      id: "qi-pintura-1",
      fichaCode: "FVS-P-7150-0203-2025",
      revisao: 3,
      modelo: "Pintura",
      verificacao: "Uniformidade de Cor",
      status: "reprovado" as const,
      parceiro: "Pinturas Especiais",
      obra: "PRODUTO",
      local: "Bloco C \\ Apartamento 102 \\ Sala de Estar",
      inspetor: "Fernanda Lima",
      problemaEncontrado: "Manchas visíveis e diferença de tonalidade na parede",
      solucaoIndicada: "Lixar e aplicar nova demão de tinta",
      dataVerificacao: "2025-12-02T09:15:00Z",
      camposPersonalizados: "PAREDE INTERNA",
      createdAt: "2025-12-02T09:15:00Z",
    },
    {
      id: "qi-pintura-2",
      fichaCode: "FVS-P-7150-0203-2025",
      revisao: 3,
      modelo: "Pintura",
      verificacao: "Acabamento Superficial",
      status: "reprovado" as const,
      parceiro: "Pinturas Especiais",
      obra: "PRODUTO",
      local: "Bloco C \\ Apartamento 102 \\ Quarto Principal",
      inspetor: "Fernanda Lima",
      problemaEncontrado: "Presença de escorrimentos e marcas de rolo",
      solucaoIndicada: "Lixar superfície e reaplicar tinta com técnica adequada",
      dataVerificacao: "2025-12-02T09:30:00Z",
      camposPersonalizados: "TETO",
      createdAt: "2025-12-02T09:30:00Z",
    },
    {
      id: "qi-pintura-3",
      fichaCode: "FVS-P-7150-0203-2025",
      revisao: 3,
      modelo: "Pintura",
      verificacao: "Cobertura e Aderência",
      status: "reprovado" as const,
      parceiro: "Pinturas Especiais",
      obra: "PRODUTO",
      local: "Bloco D \\ Área Comum \\ Hall de Entrada",
      inspetor: "Fernanda Lima",
      problemaEncontrado: "Áreas com má cobertura, massa corrida aparente",
      solucaoIndicada: "Aplicar demãos adicionais até cobertura completa",
      dataVerificacao: "2025-12-02T10:00:00Z",
      camposPersonalizados: "PAREDE EXTERNA",
      createdAt: "2025-12-02T10:00:00Z",
    },
    {
      id: "qi-1",
      fichaCode: "FQ-2025-001",
      revisao: 1,
      modelo: "Estrutura de Concreto",
      verificacao: "Resistência do Concreto",
      status: "reprovado" as const,
      parceiro: "Construtora Alpha",
      obra: "Edifício Residencial Solar",
      local: "Bloco A - 3º Pavimento",
      inspetor: "Maria Santos",
      problemaEncontrado: "Concreto com resistência de 18 MPa, abaixo dos 25 MPa especificados",
      solucaoIndicada: "Reforço estrutural e análise de responsabilidade técnica",
      dataVerificacao: "2025-01-10T09:00:00Z",
      createdAt: "2025-01-10T09:00:00Z",
    },
    {
      id: "qi-2",
      fichaCode: "FQ-2025-002",
      revisao: 1,
      modelo: "Estrutura de Concreto",
      verificacao: "Cobrimento de Armadura",
      status: "reprovado" as const,
      parceiro: "Construtora Alpha",
      obra: "Edifício Residencial Solar",
      local: "Bloco B - 2º Pavimento - Viga V1",
      inspetor: "Pedro Costa",
      problemaEncontrado: "Cobrimento de armadura inferior a 2,5 cm, especificado 3,0 cm",
      solucaoIndicada: "Reforço com argamassa estrutural e nova camada de proteção",
      dataVerificacao: "2025-01-12T08:00:00Z",
      createdAt: "2025-01-12T08:00:00Z",
    },
  ],
}

export function getNCData(): NCData {
  if (typeof window === "undefined") return initialData

const stored = localStorage.getItem(STORAGE_KEY)
  if (!stored) {
    localStorage.setItem(STORAGE_KEY, JSON.stringify(initialData))
    return initialData
  }
  return JSON.parse(stored)
}

export function saveNCData(data: NCData): void {
  if (typeof window === "undefined") return
  localStorage.setItem(STORAGE_KEY, JSON.stringify(data))
}

export function getNCs(): NC[] {
  return getNCData().ncs
}

export function getNCById(id: string): NC | undefined {
  return getNCs().find((nc) => nc.id === id)
}

export function updateNC(id: string, updates: Partial<NC>): void {
  const data = getNCData()
  const index = data.ncs.findIndex((nc) => nc.id === id)
  if (index !== -1) {
    data.ncs[index] = { ...data.ncs[index], ...updates, updatedAt: new Date().toISOString() }
    saveNCData(data)
  }
}

export function createNC(nc: Omit<NC, "id" | "createdAt" | "updatedAt">): NC {
  const data = getNCData()
  const newNC: NC = {
    ...nc,
    id: Date.now().toString(),
    createdAt: new Date().toISOString(),
    updatedAt: new Date().toISOString(),
  }
  data.ncs.push(newNC)
  saveNCData(data)
  return newNC
}

export function getImmediateActionsByNCId(ncId: string): ImmediateAction[] {
  return getNCData().immediateActions.filter((action) => action.ncId === ncId)
}

export function createImmediateAction(
  action: Omit<ImmediateAction, "id" | "createdAt" | "updatedAt">,
): ImmediateAction {
  const data = getNCData()
  const newAction: ImmediateAction = {
    ...action,
    id: Date.now().toString(),
    createdAt: new Date().toISOString(),
    updatedAt: new Date().toISOString(),
  }
  data.immediateActions.push(newAction)
  saveNCData(data)
  return newAction
}

export function updateImmediateAction(id: string, updates: Partial<ImmediateAction>): void {
  const data = getNCData()
  const index = data.immediateActions.findIndex((action) => action.id === id)
  if (index !== -1) {
  data.immediateActions[index] = {
  ...data.immediateActions[index],
  ...updates,
  updatedAt: new Date().toISOString(),
  }
  saveNCData(data)
  }
}

export function deleteImmediateAction(id: string): void {
  const data = getNCData()
  data.immediateActions = data.immediateActions.filter((action) => action.id !== id)
  saveNCData(data)
}

export function getActionPlansByNCId(ncId: string): ActionPlan[] {
  return getNCData().actionPlans.filter((plan) => plan.ncId === ncId)
}

export function createActionPlan(plan: Omit<ActionPlan, "id" | "createdAt" | "updatedAt">): ActionPlan {
  const data = getNCData()
  const newPlan: ActionPlan = {
    ...plan,
    id: Date.now().toString(),
    createdAt: new Date().toISOString(),
    updatedAt: new Date().toISOString(),
  }
  data.actionPlans.push(newPlan)
  saveNCData(data)
  return newPlan
}

export function updateActionPlan(id: string, updates: Partial<ActionPlan>): void {
  const data = getNCData()
  const index = data.actionPlans.findIndex((plan) => plan.id === id)
  if (index !== -1) {
    data.actionPlans[index] = { ...data.actionPlans[index], ...updates, updatedAt: new Date().toISOString() }
    saveNCData(data)
  }
}

export function getRootCausesByNCId(ncId: string): RootCause[] {
  return getNCData().rootCauses.filter((cause) => cause.ncId === ncId)
}

export function saveRootCauses(ncId: string, causes: Omit<RootCause, "id" | "createdAt" | "updatedAt">[]): void {
  const data = getNCData()
  // Remove existing root causes for this NC
  data.rootCauses = data.rootCauses.filter((cause) => cause.ncId !== ncId)

// Add new root causes
  const newCauses = causes.map((cause) => ({
    ...cause,
    id: `${Date.now()}-${Math.random()}`,
    createdAt: new Date().toISOString(),
    updatedAt: new Date().toISOString(),
  }))
  data.rootCauses.push(...newCauses)
  saveNCData(data)
}

export function getCorrectiveActionsByNCId(ncId: string): CorrectiveAction[] {
  return getNCData().correctiveActions.filter((action) => action.ncId === ncId)
}

export function createCorrectiveAction(
  action: Omit<CorrectiveAction, "id" | "createdAt" | "updatedAt">,
): CorrectiveAction {
  const data = getNCData()
  const newAction: CorrectiveAction = {
    ...action,
    id: Date.now().toString(),
    createdAt: new Date().toISOString(),
    updatedAt: new Date().toISOString(),
  }
  data.correctiveActions.push(newAction)
  saveNCData(data)
  return newAction
}

export function updateCorrectiveAction(id: string, updates: Partial<CorrectiveAction>): void {
  const data = getNCData()
  const index = data.correctiveActions.findIndex((action) => action.id === id)
  if (index !== -1) {
    data.correctiveActions[index] = {
      ...data.correctiveActions[index],
      ...updates,
      updatedAt: new Date().toISOString(),
    }
    saveNCData(data)
  }
}

export function deleteCorrectiveAction(id: string): void {
  const data = getNCData()
  data.correctiveActions = data.correctiveActions.filter((action) => action.id !== id)
  saveNCData(data)
}

export function getEffectivenessEvaluationByNCId(ncId: string): EffectivenessEvaluation | null {
  const evaluations = getNCData().effectivenessEvaluations.filter((evaluation) => evaluation.ncId === ncId)
  return evaluations.length > 0 ? evaluations[evaluations.length - 1] : null
}

export function saveEffectivenessEvaluation(
  ncId: string,
  evaluation: Omit<EffectivenessEvaluation, "id" | "createdAt" | "updatedAt">,
): EffectivenessEvaluation {
  const data = getNCData()
  const newEvaluation: EffectivenessEvaluation = {
    ...evaluation,
    id: Date.now().toString(),
    createdAt: new Date().toISOString(),
    updatedAt: new Date().toISOString(),
  }
  data.effectivenessEvaluations.push(newEvaluation)
  saveNCData(data)
  return newEvaluation
}

export function getQualityInspections(): QualityInspection[] {
  return getNCData().qualityInspections || []
}

export function getQualityInspectionsByModelo(modelo: string): QualityInspection[] {
  return getNCData().qualityInspections.filter((qi) => qi.modelo === modelo)
}

export function getUniqueModelos(): string[] {
  const inspections = getQualityInspections()
  if (!Array.isArray(inspections)) {
    return []
  }
  const modelos = new Set(inspections.map((qi) => qi.modelo))
  return Array.from(modelos).sort()
}
[V0_FILE]typescriptreact:file="components/nc-kanban-board.tsx" isMerged="true"
"use client"

import { useState, useMemo } from "react"
import { Card, CardContent } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { ScrollArea } from "@/components/ui/scroll-area"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
import { Calendar } from "@/components/ui/calendar"
import { 
  Plus, 
  AlertTriangle, 
  LayoutGrid, 
  List, 
  FileText, 
  FileSpreadsheet,
  Filter,
  Search,
  Calendar as CalendarIcon,
  MapPin,
  User,
  X,
  Copy
} from "lucide-react"
import { format } from "date-fns"
import { ptBR } from "date-fns/locale"
import type { NC, NCStatus } from "@/lib/types"
import { getNCs } from "@/lib/nc-store"
import { NCListView } from "./nc-list-view"

const statusColumns: { status: NCStatus; label: string; borderColor: string; bgColor: string }[] = [
  { status: "planning", label: "Novo", borderColor: "#EAB308", bgColor: "bg-yellow-50" },
  { status: "waiting", label: "Aguardando", borderColor: "#F97316", bgColor: "bg-orange-50" },
  { status: "in_progress", label: "Em Andamento", borderColor: "#3B82F6", bgColor: "bg-blue-50" },
  { status: "verification", label: "Aguardando Verificacao", borderColor: "#8B5CF6", bgColor: "bg-purple-50" },
  { status: "completed", label: "Concluida", borderColor: "#22C55E", bgColor: "bg-green-50" },
]

const severityConfig = {
  low: { label: "Baixa", color: "bg-green-500 text-white" },
  medium: { label: "Media", color: "bg-yellow-500 text-white" },
  high: { label: "Alta", color: "bg-red-500 text-white" },
  critical: { label: "Critica", color: "bg-red-700 text-white" },
}

const categoryConfig: Record<string, { label: string; color: string }> = {
  "Qualidade de Materiais": { label: "Civil", color: "bg-green-100 text-green-800 border border-green-300" },
  "Execucao de Servicos": { label: "Civil", color: "bg-green-100 text-green-800 border border-green-300" },
  "Seguranca do Trabalho": { label: "Seguranca", color: "bg-orange-100 text-orange-800 border border-orange-300" },
  "Documentacao": { label: "Doc", color: "bg-gray-100 text-gray-800 border border-gray-300" },
  "Meio Ambiente": { label: "Ambiente", color: "bg-emerald-100 text-emerald-800 border border-emerald-300" },
  "Fornecedores": { label: "Fornec.", color: "bg-purple-100 text-purple-800 border border-purple-300" },
  "Eletrica": { label: "Eletrica", color: "bg-yellow-100 text-yellow-800 border border-yellow-300" },
  "Hidraulica": { label: "Hidraulica", color: "bg-blue-100 text-blue-800 border border-blue-300" },
  "Estrutural": { label: "Estrutural", color: "bg-slate-100 text-slate-800 border border-slate-300" },
  "Esquadria": { label: "Esquadria", color: "bg-amber-100 text-amber-800 border border-amber-300" },
}

interface NCKanbanBoardProps {
  onSelectNC?: (nc: NC) => void
  onCreateNC?: () => void
}

export function NCKanbanBoard({ onSelectNC, onCreateNC }: NCKanbanBoardProps) {
  const [ncs] = useState<NC[]>(getNCs())
  const [viewMode, setViewMode] = useState<"kanban" | "list">("kanban")
  const [itemsPerPage, setItemsPerPage] = useState(10)
  
  // Filters
  const [searchTerm, setSearchTerm] = useState("")
  const [dateFilter, setDateFilter] = useState<Date | undefined>()
  const [originFilter, setOriginFilter] = useState("all")
  const [situacaoFilter, setSituacaoFilter] = useState<"all" | "ativo" | "arquivado">("all")
  const [prioridadeFilter, setPrioridadeFilter] = useState<"all" | "high" | "medium" | "low">("all")

const filteredNCs = useMemo(() => {
    return ncs.filter(nc => {
      if (searchTerm && !nc.title.toLowerCase().includes(searchTerm.toLowerCase()) && !nc.ncNumber.toLowerCase().includes(searchTerm.toLowerCase())) return false
      if (dateFilter && new Date(nc.registeredAt).toDateString() !== dateFilter.toDateString()) return false
      if (situacaoFilter === "ativo" && nc.status === "completed") return false
      if (situacaoFilter === "arquivado" && nc.status !== "completed") return false
      if (prioridadeFilter !== "all" && nc.severity !== prioridadeFilter) return false
      return true
    })
  }, [ncs, searchTerm, dateFilter, situacaoFilter, prioridadeFilter])

const getNCsByStatus = (status: NCStatus) => {
    return filteredNCs.filter((nc) => nc.status === status)
  }

const clearFilters = () => {
    setSearchTerm("")
    setDateFilter(undefined)
    setOriginFilter("all")
    setSituacaoFilter("all")
    setPrioridadeFilter("all")
  }

const getCategoryBadge = (category: string) => {
    const config = categoryConfig[category] || { label: category.substring(0, 8), color: "bg-gray-100 text-gray-800 border border-gray-300" }
    return config
  }

return (
    <div className="space-y-4 p-6">
      {/* Header */}
      <div className="flex items-start justify-between">
        <div className="flex items-center gap-3">
          <div className="p-2 bg-red-100 rounded-lg">
            <AlertTriangle className="h-6 w-6 text-red-600" />
          </div>
          <div>
            <div className="flex items-center gap-2">
              <h1 className="text-2xl font-bold text-red-800">Gestao de Nao Conformidades</h1>
              <Badge variant="outline" className="text-xs font-normal">BETA</Badge>
            </div>
            <p className="text-red-600 text-sm flex items-center gap-1">
              <span className="inline-block w-4 h-4 rounded-full border border-red-400 text-center text-xs leading-4">i</span>
              Acompanhe e gerencie todas as nao conformidades em andamento
            </p>
          </div>
        </div>
        <div className="flex items-center gap-2">
          <Button 
            variant={viewMode === "kanban" ? "default" : "outline"} 
            size="icon"
            onClick={() => setViewMode("kanban")}
            className="h-10 w-10"
          >
            <LayoutGrid className="h-5 w-5" />
          </Button>
          <Button 
            variant={viewMode === "list" ? "default" : "outline"} 
            size="icon"
            onClick={() => setViewMode("list")}
            className="h-10 w-10"
          >
            <List className="h-5 w-5" />
          </Button>
          <Button onClick={onCreateNC} className="bg-red-600 hover:bg-red-700 text-white h-10">
            <Plus className="mr-2 h-5 w-5" />
            Criar Nova NC
          </Button>
        </div>
      </div>

{/* Filters Bar */}
      <div className="flex items-center gap-4 flex-wrap bg-white p-4 rounded-lg border">
        <div className="flex items-center gap-2 text-red-600">
          <Filter className="h-5 w-5" />
        </div>
        
        {/* Search */}
        <div className="flex-1 min-w-[200px] max-w-[280px]">
          <div className="relative">
            <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
            <Input
              placeholder="Buscar por titulo..."
              value={searchTerm}
              onChange={(e) => setSearchTerm(e.target.value)}
              className="pl-9 h-9"
            />
          </div>
        </div>

{/* Date Filter */}
        <Popover>
          <PopoverTrigger asChild>
            <Button variant="outline" className="h-9 gap-2 text-sm font-normal">
              <CalendarIcon className="h-4 w-4" />
              {dateFilter ? format(dateFilter, "dd/MM/yyyy", { locale: ptBR }) : "Selecione uma data"}
            </Button>
          </PopoverTrigger>
          <PopoverContent className="w-auto p-0" align="start">
            <Calendar
              mode="single"
              selected={dateFilter}
              onSelect={setDateFilter}
              locale={ptBR}
            />
          </PopoverContent>
        </Popover>

{/* Origin Filter */}
        <Select value={originFilter} onValueChange={setOriginFilter}>
          <SelectTrigger className="w-[140px] h-9">
            <SelectValue placeholder="Origem" />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="all">Todas</SelectItem>
            <SelectItem value="interno">Interno</SelectItem>
            <SelectItem value="externo">Externo</SelectItem>
            <SelectItem value="cliente">Cliente</SelectItem>
            <SelectItem value="fornecedor">Fornecedor</SelectItem>
          </SelectContent>
        </Select>

{/* Situacao Filter */}
        <div className="flex items-center gap-1">
          <span className="text-sm text-muted-foreground mr-1">Situacao:</span>
          <Button 
            variant={situacaoFilter === "ativo" ? "default" : "outline"} 
            size="sm" 
            className="h-8"
            onClick={() => setSituacaoFilter(situacaoFilter === "ativo" ? "all" : "ativo")}
          >
            Ativo
          </Button>
          <Button 
            variant={situacaoFilter === "arquivado" ? "default" : "outline"} 
            size="sm" 
            className="h-8"
            onClick={() => setSituacaoFilter(situacaoFilter === "arquivado" ? "all" : "arquivado")}
          >
            Arquivado
          </Button>
        </div>

{/* Prioridade Filter */}
        <div className="flex items-center gap-1">
          <span className="text-sm text-muted-foreground mr-1">Prioridade:</span>
          <Button 
            variant={prioridadeFilter === "high" ? "default" : "outline"} 
            size="sm" 
            className={`h-8 ${prioridadeFilter === "high" ? "bg-red-500 hover:bg-red-600" : ""}`}
            onClick={() => setPrioridadeFilter(prioridadeFilter === "high" ? "all" : "high")}
          >
            Alta
          </Button>
          <Button 
            variant={prioridadeFilter === "medium" ? "default" : "outline"} 
            size="sm" 
            className={`h-8 ${prioridadeFilter === "medium" ? "bg-yellow-500 hover:bg-yellow-600" : ""}`}
            onClick={() => setPrioridadeFilter(prioridadeFilter === "medium" ? "all" : "medium")}
          >
            Media
          </Button>
          <Button 
            variant={prioridadeFilter === "low" ? "default" : "outline"} 
            size="sm" 
            className={`h-8 ${prioridadeFilter === "low" ? "bg-green-500 hover:bg-green-600" : ""}`}
            onClick={() => setPrioridadeFilter(prioridadeFilter === "low" ? "all" : "low")}
          >
            Baixa
          </Button>
        </div>

{/* Advanced Filters Button */}
        <Button variant="outline" className="h-9 gap-2 text-red-600 border-red-200 hover:bg-red-50">
          <Filter className="h-4 w-4" />
          Filtros Avancados
        </Button>

{/* Clear Filters */}
        {(searchTerm || dateFilter || originFilter !== "all" || situacaoFilter !== "all" || prioridadeFilter !== "all") && (
          <Button variant="ghost" size="sm" onClick={clearFilters} className="h-8 gap-1 text-muted-foreground">
            <X className="h-4 w-4" />
            Limpar
          </Button>
        )}
      </div>

{/* Export buttons for list view */}
      {viewMode === "list" && (
        <div className="flex justify-end gap-2">
          <Button variant="outline" size="sm" onClick={() => alert("Exportando para PDF...")}>
            <FileText className="mr-2 h-4 w-4" />
            PDF
          </Button>
          <Button variant="outline" size="sm" onClick={() => alert("Exportando para Excel...")}>
            <FileSpreadsheet className="mr-2 h-4 w-4" />
            Excel
          </Button>
        </div>
      )}

{/* Visualization label */}
      <div className="flex justify-end">
        <span className="text-sm text-muted-foreground">Visualizacao:</span>
      </div>

{viewMode === "list" ? (
        <NCListView onSelectNC={onSelectNC} itemsPerPage={itemsPerPage} onItemsPerPageChange={setItemsPerPage} />
      ) : (
        <div className="flex gap-4 overflow-x-auto pb-4">
          {statusColumns.map((column) => {
            const columnNCs = getNCsByStatus(column.status)
            return (
              <div key={column.status} className="flex-shrink-0 w-[280px]">
                <div className="mb-3 flex items-center justify-between">
                  <h3 className="font-semibold text-gray-700">{column.label}</h3>
                  <Badge variant="secondary" className="h-6 w-6 p-0 flex items-center justify-center rounded-full bg-gray-200 text-gray-700">
                    {columnNCs.length}
                  </Badge>
                </div>
                <ScrollArea className="h-[calc(100vh-380px)]">
                  <div className="space-y-3 pr-2">
                    {columnNCs.length === 0 ? (
                      <div className="text-center py-8 text-sm text-muted-foreground">
                        Nenhuma NC neste estagio
                      </div>
                    ) : (
                      columnNCs.map((nc) => {
                        const catBadge = getCategoryBadge(nc.category)
                        return (
                          <Card
                            key={nc.id}
                            className="cursor-pointer hover:shadow-md transition-shadow bg-white border-l-4"
                            style={{ borderLeftColor: column.borderColor }}
                            onClick={() => onSelectNC?.(nc)}
                          >
                            <CardContent className="p-4 space-y-3">
                              {/* NC Number and copy icon */}
                              <div className="flex items-center justify-between">
                                <span className="text-xs font-mono text-gray-500">{nc.ncNumber}</span>
                                <Button variant="ghost" size="icon" className="h-6 w-6" onClick={(e) => { e.stopPropagation(); navigator.clipboard.writeText(nc.ncNumber) }}>
                                  <Copy className="h-3 w-3 text-gray-400" />
                                </Button>
                              </div>

{/* Title */}
                              <h4 className="font-semibold text-sm text-gray-800 line-clamp-2">{nc.title}</h4>

{/* Category and Severity badges */}
                              <div className="flex items-center gap-2 flex-wrap">
                                <Badge className={`text-xs ${catBadge.color}`}>
                                  {catBadge.label}
                                </Badge>
                                <Badge className={`text-xs ${severityConfig[nc.severity].color}`}>
                                  {severityConfig[nc.severity].label}
                                </Badge>
                              </div>

{/* Prazo */}
                              <div className="flex items-center gap-2 text-xs text-gray-600">
                                <CalendarIcon className="h-3 w-3" />
                                <span>Prazo:</span>
                                <span className="font-medium">{format(new Date(nc.registeredAt), "dd/MM/yyyy")}</span>
                              </div>

{/* Local */}
                              <div className="flex items-center gap-2 text-xs text-gray-600">
                                <MapPin className="h-3 w-3" />
                                <span>Local:</span>
                                <span className="text-blue-600">{nc.location}</span>
                              </div>

{/* Criado em */}
                              <div className="flex items-center gap-2 text-xs text-gray-500">
                                <CalendarIcon className="h-3 w-3" />
                                <span>Criado em:</span>
                                <span>{format(new Date(nc.registeredAt), "dd/MM/yyyy")}</span>
                              </div>

{/* Responsavel */}
                              <div className="flex items-center gap-2 text-xs text-gray-600">
                                <User className="h-3 w-3" />
                                <span>{nc.responsiblePerson}</span>
                              </div>
                            </CardContent>
                          </Card>
                        )
                      })
                    )}
                  </div>
                </ScrollArea>
              </div>
            )
          })}
        </div>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/nc-list-view.tsx" isMerged="true"
"use client"

import { useState, useMemo } from "react"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Clock, ChevronLeft, ChevronRight } from "lucide-react"
import type { NC, NCStatus } from "@/lib/types"
import { getNCs } from "@/lib/nc-store"

const severityConfig = {
  low: { label: "Baixa", color: "bg-slate-500" },
  medium: { label: "Média", color: "bg-yellow-500" },
  high: { label: "Alta", color: "bg-orange-500" },
  critical: { label: "Crítica", color: "bg-red-500" },
}

const statusLabels: Record<NCStatus, string> = {
  planning: "Novo",
  waiting: "Aguardando",
  in_progress: "Em Andamento",
  verification: "Aguardando Verificação",
  completed: "Concluída",
}

interface NCListViewProps {
  onSelectNC?: (nc: NC) => void
  itemsPerPage: number
  onItemsPerPageChange: (value: number) => void
}

export function NCListView({ onSelectNC, itemsPerPage, onItemsPerPageChange }: NCListViewProps) {
  const [ncs] = useState<NC[]>(getNCs())
  const [currentPage, setCurrentPage] = useState(1)

const totalPages = Math.ceil(ncs.length / itemsPerPage)
  
  const paginatedNCs = useMemo(() => {
    const startIndex = (currentPage - 1) * itemsPerPage
    const endIndex = startIndex + itemsPerPage
    return ncs.slice(startIndex, endIndex)
  }, [ncs, currentPage, itemsPerPage])

const goToPage = (page: number) => {
    if (page >= 1 && page <= totalPages) {
      setCurrentPage(page)
    }
  }

return (
    <div className="space-y-4">
      <div className="border rounded-lg overflow-hidden">
        <Table>
          <TableHeader>
            <TableRow className="bg-muted/50">
              <TableHead className="w-[120px]">Codigo</TableHead>
              <TableHead>Titulo</TableHead>
              <TableHead className="w-[100px]">Severidade</TableHead>
              <TableHead className="w-[160px]">Status</TableHead>
              <TableHead className="w-[150px]">Categoria</TableHead>
              <TableHead className="w-[150px]">Local</TableHead>
              <TableHead className="w-[150px]">Responsavel</TableHead>
              <TableHead className="w-[120px]">Data Registro</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {paginatedNCs.map((nc) => (
              <TableRow key={nc.id} className="cursor-pointer hover:bg-muted/50" onClick={() => onSelectNC?.(nc)}>
                <TableCell className="font-mono text-sm">{nc.ncNumber}</TableCell>
                <TableCell className="font-medium">{nc.title}</TableCell>
                <TableCell>
                  <Badge className={`${severityConfig[nc.severity].color} text-white text-xs`}>
                    {severityConfig[nc.severity].label}
                  </Badge>
                </TableCell>
                <TableCell>
                  <Badge variant="outline" className="text-xs">
                    {statusLabels[nc.status]}
                  </Badge>
                </TableCell>
                <TableCell className="text-sm">{nc.category}</TableCell>
                <TableCell className="text-sm">{nc.location}</TableCell>
                <TableCell className="text-sm">{nc.responsiblePerson}</TableCell>
                <TableCell className="text-sm">
                  <div className="flex items-center gap-1 text-muted-foreground">
                    <Clock className="h-3 w-3" />
                    {new Date(nc.registeredAt).toLocaleDateString("pt-BR")}
                  </div>
                </TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </div>

<div className="text-center text-sm text-muted-foreground">
        Mostrando {((currentPage - 1) * itemsPerPage) + 1}-{Math.min(currentPage * itemsPerPage, ncs.length)} de {ncs.length} registros
      </div>

<div className="flex items-center justify-between">
        <div className="flex items-center gap-2">
          <span className="text-sm text-muted-foreground">Itens por pagina:</span>
          <Select value={itemsPerPage.toString()} onValueChange={(value) => { onItemsPerPageChange(Number(value)); setCurrentPage(1) }}>
            <SelectTrigger className="w-[80px]">
              <SelectValue />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="10">10</SelectItem>
              <SelectItem value="25">25</SelectItem>
              <SelectItem value="50">50</SelectItem>
              <SelectItem value="100">100</SelectItem>
            </SelectContent>
          </Select>
        </div>
        
        <div className="flex items-center gap-2">
          <Button
            variant="outline"
            size="sm"
            onClick={() => goToPage(currentPage - 1)}
            disabled={currentPage === 1}
          >
            <ChevronLeft className="h-4 w-4" />
            Anterior
          </Button>
          
          <div className="flex items-center gap-1">
            {Array.from({ length: Math.min(5, totalPages) }, (_, i) => {
              let pageNum: number
              if (totalPages <= 5) {
                pageNum = i + 1
              } else if (currentPage <= 3) {
                pageNum = i + 1
              } else if (currentPage >= totalPages - 2) {
                pageNum = totalPages - 4 + i
              } else {
                pageNum = currentPage - 2 + i
              }
              
              return (
                <Button
                  key={pageNum}
                  variant={currentPage === pageNum ? "default" : "outline"}
                  size="sm"
                  className="w-8 h-8 p-0"
                  onClick={() => goToPage(pageNum)}
                >
                  {pageNum}
                </Button>
              )
            })}
          </div>
          
          <Button
            variant="outline"
            size="sm"
            onClick={() => goToPage(currentPage + 1)}
            disabled={currentPage === totalPages}
          >
            Proximo
            <ChevronRight className="h-4 w-4" />
          </Button>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/nc-card.tsx" isMerged="true"
"use client"

import type React from "react"
import { useState } from "react"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import {
  AlertCircle,
  Clock,
  User,
  MapPin,
  Calendar,
  ArrowLeft,
  Edit,
  FileText,
  Target,
  Search,
  Zap,
  BarChart,
} from "lucide-react"
import type { NC, NCStatus } from "@/lib/types"
import { ImmediateActionsModule } from "./immediate-actions-module"
import { RootCauseModule } from "./root-cause-module"
import { CorrectiveActionsModule } from "./corrective-actions-module"
import { EffectivenessModule } from "./effectiveness-module"
import {
  getImmediateActionsByNCId,
  createImmediateAction,
  updateImmediateAction,
  deleteImmediateAction,
  getRootCausesByNCId,
  saveRootCauses,
  getCorrectiveActionsByNCId,
  createCorrectiveAction,
  updateCorrectiveAction,
  deleteCorrectiveAction,
  getEffectivenessEvaluationByNCId,
  saveEffectivenessEvaluation,
  updateNC,
} from "@/lib/nc-store"

interface NCCardProps {
  nc: NC
  onBack: () => void
  onEdit?: () => void
}

const statusLabels: Record<NCStatus, string> = {
  planning: "Novo",
  waiting: "Aguardando",
  in_progress: "Em Andamento",
  verification: "Aguardando Verificação",
  completed: "Concluída",
}

export function NCCard({ nc, onBack, onEdit }: NCCardProps) {
  const [currentNC, setCurrentNC] = useState(nc)
  const [immediateActions, setImmediateActions] = useState(getImmediateActionsByNCId(nc.id))
  const [rootCauses, setRootCauses] = useState(getRootCausesByNCId(nc.id))
  const [correctiveActions, setCorrectiveActions] = useState(getCorrectiveActionsByNCId(nc.id))
  const [effectiveness, setEffectiveness] = useState(getEffectivenessEvaluationByNCId(nc.id))

const handleStatusChange = (newStatus: NCStatus) => {
    updateNC(currentNC.id, { status: newStatus })
    setCurrentNC({ ...currentNC, status: newStatus })
  }

const handleAddImmediateAction = (action: any) => {
    const newAction = createImmediateAction(action)
    setImmediateActions(getImmediateActionsByNCId(nc.id))
  }

const handleUpdateImmediateAction = (id: string, updates: any) => {
    updateImmediateAction(id, updates)
    setImmediateActions(getImmediateActionsByNCId(nc.id))
  }

const handleSaveRootCauses = (causes: any[]) => {
    saveRootCauses(nc.id, causes)
    setRootCauses(getRootCausesByNCId(nc.id))
  }

const handleAddCorrectiveAction = (action: any) => {
    const newAction = createCorrectiveAction(action)
    setCorrectiveActions(getCorrectiveActionsByNCId(nc.id))
  }

const handleUpdateCorrectiveAction = (id: string, updates: any) => {
    updateCorrectiveAction(id, updates)
    setCorrectiveActions(getCorrectiveActionsByNCId(nc.id))
  }

const handleSaveEffectiveness = (evaluation: any) => {
    saveEffectivenessEvaluation(nc.id, evaluation)
    setEffectiveness(getEffectivenessEvaluationByNCId(nc.id))
  }

return (
    <div className="space-y-4">
      <div className="flex items-center justify-between">
        <Button variant="ghost" onClick={onBack}>
          <ArrowLeft className="mr-2 h-4 w-4" />
          Voltar
        </Button>
        <Button variant="outline" onClick={onEdit}>
          <Edit className="mr-2 h-4 w-4" />
          Editar
        </Button>
      </div>

<Card>
        <CardHeader className="space-y-4">
          <div className="flex items-start justify-between gap-4">
            <div className="flex-1 space-y-2">
              <div className="flex items-center gap-2">
                <span className="text-sm font-mono text-muted-foreground">{currentNC.ncNumber}</span>
                <Badge className={`${severityConfig[currentNC.severity].color} text-white`}>
                  {severityConfig[currentNC.severity].label}
                </Badge>
              </div>
              <CardTitle className="text-2xl">{currentNC.title}</CardTitle>
            </div>
            <AlertCircle className="h-8 w-8 text-orange-500" />
          </div>
        </CardHeader>
        <CardContent className="space-y-6">
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div className="space-y-3">
              <InfoItem icon={<User className="h-4 w-4" />} label="Responsável" value={currentNC.responsiblePerson} />
              <div className="flex items-start gap-3">
                <div className="text-muted-foreground mt-0.5"><Clock className="h-4 w-4" /></div>
                <div className="flex-1">
                  <div className="text-xs text-muted-foreground mb-0.5">Status</div>
                  <Select value={currentNC.status} onValueChange={(value) => handleStatusChange(value as NCStatus)}>
                    <SelectTrigger className="w-full h-8">
                      <SelectValue />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="planning">{statusLabels.planning}</SelectItem>
                      <SelectItem value="waiting">{statusLabels.waiting}</SelectItem>
                      <SelectItem value="in_progress">{statusLabels.in_progress}</SelectItem>
                      <SelectItem value="verification">{statusLabels.verification}</SelectItem>
                      <SelectItem value="completed">{statusLabels.completed}</SelectItem>
                    </SelectContent>
                  </Select>
                </div>
              </div>
              <InfoItem icon={<User className="h-4 w-4" />} label="Registrado por" value={currentNC.registeredBy} />
              <InfoItem icon={<MapPin className="h-4 w-4" />} label="Local" value={currentNC.location} />
            </div>
            <div className="space-y-3">
              <InfoItem icon={<FileText className="h-4 w-4" />} label="Categoria" value={currentNC.category} />
              <InfoItem
                icon={<Calendar className="h-4 w-4" />}
                label="Data de Registro"
                value={new Date(currentNC.registeredAt).toLocaleDateString("pt-BR", {
                  day: "2-digit",
                  month: "long",
                  year: "numeric",
                })}
              />
              {currentNC.closedAt && (
                <InfoItem
                  icon={<Clock className="h-4 w-4" />}
                  label="Data de Fechamento"
                  value={new Date(currentNC.closedAt).toLocaleDateString("pt-BR", {
                    day: "2-digit",
                    month: "long",
                    year: "numeric",
                  })}
                />
              )}
            </div>
          </div>

<div className="pt-4 border-t">
            <h3 className="font-semibold mb-2">Descrição da Não Conformidade</h3>
            <p className="text-sm text-muted-foreground leading-relaxed">{currentNC.description}</p>
          </div>

<Tabs defaultValue="immediate" className="w-full">
            <TabsList className="grid w-full grid-cols-4">
              <TabsTrigger value="immediate" className="text-xs">
                <Zap className="h-3 w-3 mr-1" />
                Ação Imediata
              </TabsTrigger>
              <TabsTrigger value="root" className="text-xs">
                <Search className="h-3 w-3 mr-1" />
                Causa Raiz
              </TabsTrigger>
              <TabsTrigger value="corrective" className="text-xs">
                <Target className="h-3 w-3 mr-1" />
                Corretiva
              </TabsTrigger>
              <TabsTrigger value="effectiveness" className="text-xs">
                <BarChart className="h-3 w-3 mr-1" />
                Eficácia
              </TabsTrigger>
            </TabsList>
            <TabsContent value="immediate" className="mt-4">
              <ImmediateActionsModule
                ncId={currentNC.id}
                actions={immediateActions}
                onAddAction={handleAddImmediateAction}
                onUpdateAction={handleUpdateImmediateAction}
              />
            </TabsContent>
            <TabsContent value="root" className="mt-4">
              <RootCauseModule ncId={currentNC.id} causes={rootCauses} onSaveCauses={handleSaveRootCauses} />
            </TabsContent>
            <TabsContent value="corrective" className="mt-4">
              <CorrectiveActionsModule
                ncId={currentNC.id}
                actions={correctiveActions}
                onAddAction={handleAddCorrectiveAction}
                onUpdateAction={handleUpdateCorrectiveAction}
              />
            </TabsContent>
            <TabsContent value="effectiveness" className="mt-4">
              <EffectivenessModule
                ncId={currentNC.id}
                evaluation={effectiveness}
                onSaveEvaluation={handleSaveEffectiveness}
              />
            </TabsContent>
          </Tabs>
        </CardContent>
      </Card>
    </div>
  )
}

function InfoItem({ icon, label, value }: { icon: React.ReactNode; label: string; value: string }) {
  return (
    <div className="flex items-start gap-3">
      <div className="text-muted-foreground mt-0.5">{icon}</div>
      <div className="flex-1">
        <div className="text-xs text-muted-foreground mb-0.5">{label}</div>
        <div className="text-sm font-medium">{value}</div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/corrective-actions-module.tsx" isMerged="true"
"use client"

import type React from "react"

import { useState } from "react"
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 { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Badge } from "@/components/ui/badge"
import {
  Plus,
  CheckCircle2,
  Clock,
  AlertCircle,
  Upload,
  Target,
  HelpCircle,
  UserIcon,
  Calendar,
  MapPin,
  Settings,
  DollarSign,
  X,
} from "lucide-react"
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
} from "@/components/ui/alert-dialog"
import type { CorrectiveAction, ActionStatus } from "@/lib/types"

interface CorrectiveActionsModuleProps {
  ncId: string
  actions: CorrectiveAction[]
  onAddAction: (action: Omit<CorrectiveAction, "id" | "createdAt" | "updatedAt">) => void
  onUpdateAction: (id: string, updates: Partial<CorrectiveAction>) => void
  onDeleteAction?: (id: string) => void
}

const w2hFields = [
  { key: "what", label: "O Quê?", icon: <Target className="h-4 w-4" />, placeholder: "O que será feito?" },
  {
    key: "why",
    label: "Por Quê?",
    icon: <HelpCircle className="h-4 w-4" />,
    placeholder: "Por que isso será feito? Justificativa",
  },
  { key: "who", label: "Quem?", icon: <UserIcon className="h-4 w-4" />, placeholder: "Quem será o responsável?" },
  {
    key: "whenDate",
    label: "Quando?",
    icon: <Calendar className="h-4 w-4" />,
    placeholder: "Quando será executado?",
    type: "date",
  },
  {
    key: "whereLocation",
    label: "Onde?",
    icon: <MapPin className="h-4 w-4" />,
    placeholder: "Onde será executado? Local",
  },
  { key: "how", label: "Como?", icon: <Settings className="h-4 w-4" />, placeholder: "Como será executado? Método" },
  {
    key: "howMuch",
    label: "Quanto?",
    icon: <DollarSign className="h-4 w-4" />,
    placeholder: "Quanto custará?",
    type: "number",
  },
]

export function CorrectiveActionsModule({ ncId, actions, onAddAction, onUpdateAction, onDeleteAction }: CorrectiveActionsModuleProps) {
  const [isAddingAction, setIsAddingAction] = useState(false)
  const [formData, setFormData] = useState({
    what: "",
    why: "",
    who: "",
    whenDate: "",
    whereLocation: "",
    how: "",
    howMuch: "",
    notes: "",
  })

const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    onAddAction({
      ncId,
      what: formData.what,
      why: formData.why,
      who: formData.who,
      whenDate: formData.whenDate,
      whereLocation: formData.whereLocation,
      how: formData.how,
      howMuch: formData.howMuch ? Number.parseFloat(formData.howMuch) : undefined,
      status: "pending",
      notes: formData.notes,
    })
    setFormData({ what: "", why: "", who: "", whenDate: "", whereLocation: "", how: "", howMuch: "", notes: "" })
    setIsAddingAction(false)
  }

const updateField = (field: string, value: string) => {
    setFormData((prev) => ({ ...prev, [field]: value }))
  }

return (
    <div className="space-y-4">
      <div className="flex items-center justify-between">
        <div>
          <div className="flex items-center gap-3">
            <h3 className="text-lg font-semibold">Ações Corretivas (5W2H)</h3>
            <Badge variant="secondary" className="gap-1">
              <Target className="h-3 w-3" />
              Metodologia 5W2H
            </Badge>
          </div>
          <p className="text-sm text-muted-foreground">
            Defina ações corretivas usando a metodologia 5W2H para garantir clareza na execução
          </p>
        </div>
        {!isAddingAction && (
          <Button onClick={() => setIsAddingAction(true)} size="sm">
            <Plus className="mr-2 h-4 w-4" />
            Adicionar Ação
          </Button>
        )}
      </div>

{isAddingAction && (
        <Card className="border-2 border-primary">
          <CardHeader>
            <CardTitle className="text-base">Nova Ação Corretiva (5W2H)</CardTitle>
            <CardDescription>
              Preencha todos os campos da metodologia 5W2H para definir a ação corretiva
            </CardDescription>
          </CardHeader>
          <CardContent>
            <form onSubmit={handleSubmit} className="space-y-4">
              <div className="grid grid-cols-1 gap-4">
                {w2hFields.map((field) => (
                  <div key={field.key} className="space-y-2">
                    <Label htmlFor={field.key} className="flex items-center gap-2">
                      {field.icon}
                      {field.label}
                    </Label>
                    {field.key === "what" || field.key === "why" || field.key === "how" ? (
                      <Textarea
                        id={field.key}
                        value={formData[field.key as keyof typeof formData]}
                        onChange={(e) => updateField(field.key, e.target.value)}
                        placeholder={field.placeholder}
                        rows={3}
                        required
                      />
                    ) : (
                      <Input
                        id={field.key}
                        type={field.type || "text"}
                        value={formData[field.key as keyof typeof formData]}
                        onChange={(e) => updateField(field.key, e.target.value)}
                        placeholder={field.placeholder}
                        step={field.type === "number" ? "0.01" : undefined}
                        required={field.key !== "howMuch"}
                      />
                    )}
                  </div>
                ))}
              </div>

<div className="space-y-2">
                <Label htmlFor="notes">Observações Adicionais</Label>
                <Textarea
                  id="notes"
                  value={formData.notes}
                  onChange={(e) => updateField("notes", e.target.value)}
                  placeholder="Observações adicionais sobre a ação corretiva..."
                  rows={2}
                />
              </div>

<div className="flex gap-2 justify-end">
                <Button type="button" variant="outline" onClick={() => setIsAddingAction(false)}>
                  Cancelar
                </Button>
                <Button type="submit">Salvar Ação Corretiva</Button>
              </div>
            </form>
          </CardContent>
        </Card>
      )}

<div className="space-y-3">
        {actions.length === 0 ? (
          <Card>
            <CardContent className="py-8 text-center text-sm text-muted-foreground">
              Nenhuma ação corretiva registrada ainda
            </CardContent>
          </Card>
        ) : (
          actions.map((action) => <CorrectiveActionCard key={action.id} action={action} onUpdate={onUpdateAction} onDelete={onDeleteAction} />)
        )}
      </div>
    </div>
  )
}

function CorrectiveActionCard({
  action,
  onUpdate,
  onDelete,
}: {
  action: CorrectiveAction
  onUpdate: (id: string, updates: Partial<CorrectiveAction>) => void
  onDelete?: (id: string) => void
}) {
  const statusInfo = statusConfig[action.status]

const handleStatusChange = (newStatus: ActionStatus) => {
    const updates: Partial<CorrectiveAction> = { status: newStatus }
    if (newStatus === "completed") {
      updates.completionDate = new Date().toISOString().split("T")[0]
    }
    onUpdate(action.id, updates)
  }

const deadlineDate = new Date(action.whenDate)
  const today = new Date()
  const isOverdue = action.status !== "completed" && deadlineDate < today
  const diffDays = Math.ceil((deadlineDate.getTime() - today.getTime()) / (1000 * 60 * 60 * 24))

return (
    <Card className={`${isOverdue ? "border-red-300" : ""} relative`}>
      {onDelete && (
        <AlertDialog>
          <AlertDialogTrigger asChild>
            <Button
              variant="ghost"
              size="icon"
              className="absolute top-2 right-2 h-6 w-6 text-muted-foreground hover:text-destructive"
            >
              <X className="h-4 w-4" />
            </Button>
          </AlertDialogTrigger>
          <AlertDialogContent>
            <AlertDialogHeader>
              <AlertDialogTitle>Confirmar Exclusao</AlertDialogTitle>
              <AlertDialogDescription>
                Tem certeza que deseja excluir esta acao corretiva? Esta acao nao pode ser desfeita.
              </AlertDialogDescription>
            </AlertDialogHeader>
            <AlertDialogFooter>
              <AlertDialogCancel>Cancelar</AlertDialogCancel>
              <AlertDialogAction onClick={() => onDelete(action.id)} className="bg-destructive text-destructive-foreground hover:bg-destructive/90">
                Excluir
              </AlertDialogAction>
            </AlertDialogFooter>
          </AlertDialogContent>
        </AlertDialog>
      )}
      <CardHeader className="pb-3">
        <div className="flex items-start justify-between gap-4">
          <div className="flex-1 space-y-2">
            <div className="flex items-center gap-2 flex-wrap">
              <Badge className={statusInfo.color}>
                {statusInfo.icon}
                <span className="ml-1">{statusInfo.label}</span>
              </Badge>
              {isOverdue && (
                <Badge variant="destructive" className="text-xs">
                  Atrasada ha {Math.abs(diffDays)} dias
                </Badge>
              )}
              {!isOverdue && action.status !== "completed" && diffDays >= 0 && (
                <Badge variant="outline" className="text-xs text-orange-600 border-orange-300">
                  Vence em {diffDays} dias
                </Badge>
              )}
            </div>
          </div>
        </div>
      </CardHeader>
      <CardContent className="space-y-4">
        <div className="grid grid-cols-1 gap-4">
          <W2HField icon={<Target className="h-4 w-4" />} label="O Quê?" value={action.what} />
          <W2HField icon={<HelpCircle className="h-4 w-4" />} label="Por Quê?" value={action.why} />
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <W2HField icon={<UserIcon className="h-4 w-4" />} label="Quem?" value={action.who} />
            <W2HField
              icon={<Calendar className="h-4 w-4" />}
              label="Quando?"
              value={new Date(action.whenDate).toLocaleDateString("pt-BR")}
            />
          </div>
          <W2HField icon={<MapPin className="h-4 w-4" />} label="Onde?" value={action.whereLocation} />
          <W2HField icon={<Settings className="h-4 w-4" />} label="Como?" value={action.how} />
          {action.howMuch !== undefined && (
            <W2HField
              icon={<DollarSign className="h-4 w-4" />}
              label="Quanto?"
              value={`R$ ${action.howMuch.toLocaleString("pt-BR", { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`}
            />
          )}
        </div>

{action.completionDate && (
          <div className="pt-3 border-t">
            <div className="text-sm">
              <span className="text-muted-foreground">Concluída em:</span>
              <p className="font-medium text-green-600">
                {new Date(action.completionDate).toLocaleDateString("pt-BR")}
              </p>
            </div>
          </div>
        )}

{action.notes && (
          <div className="pt-3 border-t">
            <p className="text-xs text-muted-foreground mb-1">Observações:</p>
            <p className="text-sm">{action.notes}</p>
          </div>
        )}

<div className="flex gap-2 pt-3 border-t">
          <Select value={action.status} onValueChange={(value: ActionStatus) => handleStatusChange(value)}>
            <SelectTrigger className="w-full">
              <SelectValue />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="pending">Marcar como Pendente</SelectItem>
              <SelectItem value="in_progress">Marcar como Em Andamento</SelectItem>
              <SelectItem value="completed">Marcar como Concluída</SelectItem>
            </SelectContent>
          </Select>
          <Button variant="outline" size="sm">
            <Upload className="h-4 w-4" />
          </Button>
        </div>
      </CardContent>
    </Card>
  )
}

function W2HField({ icon, label, value }: { icon: React.ReactNode; label: string; value: string }) {
  return (
    <div className="flex gap-3 bg-muted/30 p-3 rounded-lg">
      <div className="text-muted-foreground mt-0.5">{icon}</div>
      <div className="flex-1">
        <div className="text-xs font-semibold text-muted-foreground mb-1">{label}</div>
        <div className="text-sm leading-relaxed">{value}</div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/nc-detail-modal.tsx" isMerged="true"
"use client"

import type React from "react"
import { useState, useMemo, useEffect } from "react"
import { Dialog, DialogContent } from "@/components/ui/dialog"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Checkbox } from "@/components/ui/checkbox"
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"
import { Input } from "@/components/ui/input"
import { Textarea } from "@/components/ui/textarea"
import { Label } from "@/components/ui/label"
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
import { ScrollArea } from "@/components/ui/scroll-area"
import {
  X,
  Pencil,
  Zap,
  Search,
  Target,
  BarChart3,
  AlertTriangle,
  CheckCircle2,
  FileText,
} from "lucide-react"
import type { NC, NCStatus, ImmediateAction, CorrectiveAction, ActionStatus } from "@/lib/types"
import { ImmediateActionsModule } from "./immediate-actions-module"
import { RootCauseModule } from "./root-cause-module"
import { CorrectiveActionsModule } from "./corrective-actions-module"
import { EffectivenessModule } from "./effectiveness-module"
import {
  getImmediateActionsByNCId,
  createImmediateAction,
  updateImmediateAction,
  deleteImmediateAction,
  getRootCausesByNCId,
  saveRootCauses,
  getCorrectiveActionsByNCId,
  createCorrectiveAction,
  updateCorrectiveAction,
  deleteCorrectiveAction,
  getEffectivenessEvaluationByNCId,
  saveEffectivenessEvaluation,
  updateNC,
} from "@/lib/nc-store"

interface NCDetailModalProps {
  nc: NC | null
  open: boolean
  onClose: () => void
  onEdit?: () => void
}

const statusLabels: Record<NCStatus, string> = {
  planning: "Novo",
  waiting: "Aguardando",
  in_progress: "Em Andamento",
  verification: "Aguardando Verificacao",
  completed: "Concluida",
}

const categoryOptions = [
  "Qualidade de Materiais",
  "Execucao de Servicos",
  "Seguranca do Trabalho",
  "Documentacao",
  "Meio Ambiente",
  "Fornecedores",
  "Eletrica",
  "Hidraulica",
  "Estrutural",
]

const priorityOptions = ["Alta", "Media", "Baixa", "Critica"]

const originOptions = ["Interno", "Externo", "Cliente", "Fornecedor", "Auditoria"]

type ActionFilter = "all" | "completed" | "overdue" | "in_progress" | "pending"

export function NCDetailModal({ nc, open, onClose, onEdit }: NCDetailModalProps) {
  const [currentNC, setCurrentNC] = useState<NC | null>(null)
  const [immediateActions, setImmediateActions] = useState<ImmediateAction[]>([])
  const [rootCauses, setRootCauses] = useState<any[]>([])
  const [correctiveActions, setCorrectiveActions] = useState<CorrectiveAction[]>([])
  const [effectiveness, setEffectiveness] = useState<any>(null)
  const [immediateFilter, setImmediateFilter] = useState<ActionFilter>("all")
  const [correctiveFilter, setCorrectiveFilter] = useState<ActionFilter>("all")
  const [selectedImmediateIds, setSelectedImmediateIds] = useState<string[]>([])
  const [selectedCorrectiveIds, setSelectedCorrectiveIds] = useState<string[]>([])
  const [isEditing, setIsEditing] = useState(false)
  const [editedNC, setEditedNC] = useState<Partial<NC>>({})
  const [situacao, setSituacao] = useState<"ativo" | "arquivado">("ativo")

useEffect(() => {
    if (nc) {
      setCurrentNC(nc)
      setEditedNC(nc)
      setImmediateActions(getImmediateActionsByNCId(nc.id))
      setRootCauses(getRootCausesByNCId(nc.id))
      setCorrectiveActions(getCorrectiveActionsByNCId(nc.id))
      setEffectiveness(getEffectivenessEvaluationByNCId(nc.id))
      setSituacao(nc.status === "completed" ? "arquivado" : "ativo")
    }
  }, [nc])

const daysOpen = useMemo(() => {
    if (!currentNC) return 0
    const registeredDate = new Date(currentNC.registeredAt)
    const today = new Date()
    const diffTime = Math.abs(today.getTime() - registeredDate.getTime())
    return Math.ceil(diffTime / (1000 * 60 * 60 * 24))
  }, [currentNC])

const immediateStats = useMemo(() => {
    const total = immediateActions.length
    const completed = immediateActions.filter(a => a.status === "completed").length
    const overdue = immediateActions.filter(a => a.status !== "completed" && new Date(a.deadline) < new Date()).length
    const allCompleted = total > 0 && completed === total
    return { total, completed, overdue, allCompleted }
  }, [immediateActions])

const correctiveStats = useMemo(() => {
    const total = correctiveActions.length
    const completed = correctiveActions.filter(a => a.status === "completed").length
    const overdue = correctiveActions.filter(a => a.status !== "completed" && new Date(a.whenDate) < new Date()).length
    const allCompleted = total > 0 && completed === total
    return { total, completed, overdue, allCompleted }
  }, [correctiveActions])

const filteredImmediateActions = useMemo(() => {
    return immediateActions.filter(action => {
      const isOverdue = action.status !== "completed" && new Date(action.deadline) < new Date()
      switch (immediateFilter) {
        case "completed": return action.status === "completed"
        case "overdue": return isOverdue
        case "in_progress": return action.status === "in_progress"
        case "pending": return action.status === "pending"
        default: return true
      }
    })
  }, [immediateActions, immediateFilter])

const filteredCorrectiveActions = useMemo(() => {
    return correctiveActions.filter(action => {
      const isOverdue = action.status !== "completed" && new Date(action.whenDate) < new Date()
      switch (correctiveFilter) {
        case "completed": return action.status === "completed"
        case "overdue": return isOverdue
        case "in_progress": return action.status === "in_progress"
        case "pending": return action.status === "pending"
        default: return true
      }
    })
  }, [correctiveActions, correctiveFilter])

if (!currentNC) return null

const handleStatusChange = (newStatus: NCStatus) => {
    updateNC(currentNC.id, { status: newStatus })
    setCurrentNC({ ...currentNC, status: newStatus })
    setEditedNC({ ...editedNC, status: newStatus })
  }

const handleSaveChanges = () => {
    if (editedNC) {
      updateNC(currentNC.id, editedNC)
      setCurrentNC({ ...currentNC, ...editedNC })
      setIsEditing(false)
    }
  }

const handleAddImmediateAction = (action: any) => {
    createImmediateAction(action)
    setImmediateActions(getImmediateActionsByNCId(currentNC.id))
  }

const handleUpdateImmediateAction = (id: string, updates: any) => {
    updateImmediateAction(id, updates)
    setImmediateActions(getImmediateActionsByNCId(currentNC.id))
  }

const handleDeleteImmediateAction = (id: string) => {
    deleteImmediateAction(id)
    setImmediateActions(getImmediateActionsByNCId(currentNC.id))
    setSelectedImmediateIds(prev => prev.filter(i => i !== id))
  }

const handleSaveRootCauses = (causes: any[]) => {
    saveRootCauses(currentNC.id, causes)
    setRootCauses(getRootCausesByNCId(currentNC.id))
  }

const handleAddCorrectiveAction = (action: any) => {
    createCorrectiveAction(action)
    setCorrectiveActions(getCorrectiveActionsByNCId(currentNC.id))
  }

const handleUpdateCorrectiveAction = (id: string, updates: any) => {
    updateCorrectiveAction(id, updates)
    setCorrectiveActions(getCorrectiveActionsByNCId(currentNC.id))
  }

const handleDeleteCorrectiveAction = (id: string) => {
    deleteCorrectiveAction(id)
    setCorrectiveActions(getCorrectiveActionsByNCId(currentNC.id))
    setSelectedCorrectiveIds(prev => prev.filter(i => i !== id))
  }

const handleSaveEffectiveness = (evaluation: any) => {
    saveEffectivenessEvaluation(currentNC.id, evaluation)
    setEffectiveness(getEffectivenessEvaluationByNCId(currentNC.id))
  }

const handleBulkImmediateStatus = (newStatus: ActionStatus) => {
    selectedImmediateIds.forEach(id => {
      const updates: Partial<ImmediateAction> = { status: newStatus }
      if (newStatus === "completed") {
        updates.completionDate = new Date().toISOString().split("T")[0]
      }
      updateImmediateAction(id, updates)
    })
    setImmediateActions(getImmediateActionsByNCId(currentNC.id))
    setSelectedImmediateIds([])
  }

const handleBulkCorrectiveStatus = (newStatus: ActionStatus) => {
    selectedCorrectiveIds.forEach(id => {
      const updates: Partial<CorrectiveAction> = { status: newStatus }
      if (newStatus === "completed") {
        updates.completionDate = new Date().toISOString().split("T")[0]
      }
      updateCorrectiveAction(id, updates)
    })
    setCorrectiveActions(getCorrectiveActionsByNCId(currentNC.id))
    setSelectedCorrectiveIds([])
  }

const toggleSelectAllImmediate = () => {
    if (selectedImmediateIds.length === filteredImmediateActions.length) {
      setSelectedImmediateIds([])
    } else {
      setSelectedImmediateIds(filteredImmediateActions.map(a => a.id))
    }
  }

const toggleSelectAllCorrective = () => {
    if (selectedCorrectiveIds.length === filteredCorrectiveActions.length) {
      setSelectedCorrectiveIds([])
    } else {
      setSelectedCorrectiveIds(filteredCorrectiveActions.map(a => a.id))
    }
  }

return (
    <TooltipProvider>
      <Dialog open={open} onOpenChange={(isOpen) => !isOpen && onClose()}>
        <DialogContent className="w-[95vw] h-[92vh] max-w-[1800px] p-0 gap-0 overflow-hidden flex flex-col">
          {/* Header - Red background like reference */}
          <div className="bg-[#8B1538] text-white px-6 py-4 flex items-center justify-between">
            <div className="flex items-center gap-3">
              <Badge className="bg-[#6B1028] text-white border-0 font-mono text-sm px-3 py-1">
                {currentNC.ncNumber}
              </Badge>
              <h2 className="text-xl font-semibold">{currentNC.title}</h2>
              <button
                onClick={() => setIsEditing(!isEditing)}
                className="p-1 hover:bg-white/20 rounded transition-colors"
              >
                <Pencil className="h-4 w-4" />
              </button>
              <Badge variant="outline" className="bg-transparent border-white/50 text-white text-xs">
                Aberta ha {daysOpen} dias
              </Badge>
            </div>
            <button
              onClick={onClose}
              className="p-2 hover:bg-white/20 rounded transition-colors"
            >
              <X className="h-5 w-5" />
            </button>
          </div>

<ScrollArea className="flex-1 h-full">
            <div className="p-6 space-y-6">
              {/* Form Fields - 3 column grid */}
              <div className="bg-white border rounded-lg p-6 space-y-6">
                <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
                  {/* Row 1 */}
                  <div className="space-y-2">
                    <Label className="text-sm font-medium">
                      Responsavel <span className="text-red-500">*</span>
                    </Label>
                    <Select
                      value={editedNC.responsiblePerson || currentNC.responsiblePerson}
                      onValueChange={(v) => setEditedNC({ ...editedNC, responsiblePerson: v })}
                      disabled={!isEditing}
                    >
                      <SelectTrigger className="w-full">
                        <SelectValue placeholder="Selecione o responsavel" />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value={currentNC.responsiblePerson}>{currentNC.responsiblePerson}</SelectItem>
                        <SelectItem value="Joao Silva">Joao Silva</SelectItem>
                        <SelectItem value="Maria Santos">Maria Santos</SelectItem>
                        <SelectItem value="Pedro Oliveira">Pedro Oliveira</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>

<div className="space-y-2">
                    <Label className="text-sm font-medium">
                      Status <span className="text-red-500">*</span>
                    </Label>
                    <Select
                      value={currentNC.status}
                      onValueChange={(v) => handleStatusChange(v as NCStatus)}
                    >
                      <SelectTrigger className="w-full">
                        <SelectValue />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="planning">{statusLabels.planning}</SelectItem>
                        <SelectItem value="waiting">{statusLabels.waiting}</SelectItem>
                        <SelectItem value="in_progress">{statusLabels.in_progress}</SelectItem>
                        <SelectItem value="verification">{statusLabels.verification}</SelectItem>
                        <SelectItem value="completed">{statusLabels.completed}</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>

<div className="space-y-2">
                    <Label className="text-sm font-medium">
                      Categoria <span className="text-red-500">*</span>
                    </Label>
                    <Select
                      value={editedNC.category || currentNC.category}
                      onValueChange={(v) => setEditedNC({ ...editedNC, category: v })}
                      disabled={!isEditing}
                    >
                      <SelectTrigger className="w-full">
                        <SelectValue />
                      </SelectTrigger>
                      <SelectContent>
                        {categoryOptions.map(cat => (
                          <SelectItem key={cat} value={cat}>{cat}</SelectItem>
                        ))}
                      </SelectContent>
                    </Select>
                  </div>

{/* Row 2 */}
                  <div className="space-y-2">
                    <Label className="text-sm font-medium">Local</Label>
                    <Select
                      value={editedNC.location || currentNC.location}
                      onValueChange={(v) => setEditedNC({ ...editedNC, location: v })}
                      disabled={!isEditing}
                    >
                      <SelectTrigger className="w-full">
                        <SelectValue placeholder="Selecione o local" />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value={currentNC.location}>{currentNC.location}</SelectItem>
                        <SelectItem value="Bloco A - 1 Andar">Bloco A - 1 Andar</SelectItem>
                        <SelectItem value="Bloco B - Terreo">Bloco B - Terreo</SelectItem>
                        <SelectItem value="Area Externa">Area Externa</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>

<div className="space-y-2">
                    <Label className="text-sm font-medium">
                      Prioridade <span className="text-red-500">*</span>
                    </Label>
                    <Select
                      value={currentNC.severity === "critical" ? "Critica" : currentNC.severity === "high" ? "Alta" : currentNC.severity === "medium" ? "Media" : "Baixa"}
                      disabled={!isEditing}
                    >
                      <SelectTrigger className="w-full">
                        <SelectValue placeholder="Selecione a prioridade" />
                      </SelectTrigger>
                      <SelectContent>
                        {priorityOptions.map(p => (
                          <SelectItem key={p} value={p}>{p}</SelectItem>
                        ))}
                      </SelectContent>
                    </Select>
                  </div>

<div className="space-y-2">
                    <Label className="text-sm font-medium">
                      Origem <span className="text-red-500">*</span>
                    </Label>
                    <Select disabled={!isEditing}>
                      <SelectTrigger className="w-full">
                        <SelectValue placeholder="Selecione a origem" />
                      </SelectTrigger>
                      <SelectContent>
                        {originOptions.map(o => (
                          <SelectItem key={o} value={o}>{o}</SelectItem>
                        ))}
                      </SelectContent>
                    </Select>
                  </div>

{/* Row 3 */}
                  <div className="space-y-2">
                    <Label className="text-sm font-medium">
                      Prazo <span className="text-red-500">*</span>
                    </Label>
                    <Input
                      type="date"
                      defaultValue={new Date(currentNC.registeredAt).toISOString().split("T")[0]}
                      disabled={!isEditing}
                      className="w-full"
                    />
                  </div>

<div className="space-y-2">
                    <Label className="text-sm font-medium">Situacao</Label>
                    <RadioGroup
                      value={situacao}
                      onValueChange={(v) => setSituacao(v as "ativo" | "arquivado")}
                      className="flex items-center gap-6 pt-2"
                      disabled={!isEditing}
                    >
                      <div className="flex items-center space-x-2">
                        <RadioGroupItem value="ativo" id="ativo" />
                        <Label htmlFor="ativo" className="font-normal cursor-pointer">Ativo</Label>
                      </div>
                      <div className="flex items-center space-x-2">
                        <RadioGroupItem value="arquivado" id="arquivado" />
                        <Label htmlFor="arquivado" className="font-normal cursor-pointer">Arquivado</Label>
                      </div>
                    </RadioGroup>
                  </div>
                </div>
              </div>

{/* Description Section */}
              <div className="bg-white border rounded-lg p-6 space-y-4">
                <div className="flex items-center gap-2 text-base font-semibold">
                  <FileText className="h-5 w-5 text-muted-foreground" />
                  Descricao da Nao Conformidade
                </div>
                <div className="space-y-2">
                  <Label className="text-sm font-medium">Descricao</Label>
                  {isEditing ? (
                    <Textarea
                      value={editedNC.description || currentNC.description}
                      onChange={(e) => setEditedNC({ ...editedNC, description: e.target.value })}
                      className="min-h-[120px] resize-none"
                    />
                  ) : (
                    <div className="p-3 bg-muted/30 rounded-md min-h-[120px] text-sm leading-relaxed">
                      {currentNC.description}
                    </div>
                  )}
                </div>
              </div>

{/* Tabs Section */}
              <Tabs defaultValue="immediate" className="w-full">
                <TabsList className="w-full grid grid-cols-4 h-12 p-0 bg-muted/50 rounded-t-lg rounded-b-none">
                  <TabsTrigger 
                    value="immediate" 
                    className="gap-2 h-full rounded-none data-[state=active]:bg-white data-[state=active]:text-[#8B1538] data-[state=active]:border-b-2 data-[state=active]:border-[#8B1538] data-[state=active]:shadow-none"
                  >
                    <Zap className="h-4 w-4" />
                    Acao Imediata
                    {immediateStats.total > 0 && (
                      <span className="text-xs">({immediateStats.total})</span>
                    )}
                    {immediateStats.overdue > 0 && (
                      <Tooltip>
                        <TooltipTrigger>
                          <AlertTriangle className="h-4 w-4 text-red-500" />
                        </TooltipTrigger>
                        <TooltipContent>
                          {immediateStats.overdue} acao(oes) em atraso
                        </TooltipContent>
                      </Tooltip>
                    )}
                    {immediateStats.allCompleted && (
                      <CheckCircle2 className="h-4 w-4 text-green-500" />
                    )}
                  </TabsTrigger>
                  <TabsTrigger 
                    value="root" 
                    className="gap-2 h-full rounded-none data-[state=active]:bg-white data-[state=active]:text-[#8B1538] data-[state=active]:border-b-2 data-[state=active]:border-[#8B1538] data-[state=active]:shadow-none"
                  >
                    <Search className="h-4 w-4" />
                    Causa Raiz
                  </TabsTrigger>
                  <TabsTrigger 
                    value="corrective" 
                    className="gap-2 h-full rounded-none data-[state=active]:bg-white data-[state=active]:text-[#8B1538] data-[state=active]:border-b-2 data-[state=active]:border-[#8B1538] data-[state=active]:shadow-none"
                  >
                    <Target className="h-4 w-4" />
                    Corretiva
                    {correctiveStats.total > 0 && (
                      <span className="text-xs">({correctiveStats.total})</span>
                    )}
                    {correctiveStats.overdue > 0 && (
                      <Tooltip>
                        <TooltipTrigger>
                          <AlertTriangle className="h-4 w-4 text-red-500" />
                        </TooltipTrigger>
                        <TooltipContent>
                          {correctiveStats.overdue} acao(oes) em atraso
                        </TooltipContent>
                      </Tooltip>
                    )}
                    {correctiveStats.allCompleted && (
                      <CheckCircle2 className="h-4 w-4 text-green-500" />
                    )}
                  </TabsTrigger>
                  <TabsTrigger 
                    value="effectiveness" 
                    className="gap-2 h-full rounded-none data-[state=active]:bg-white data-[state=active]:text-[#8B1538] data-[state=active]:border-b-2 data-[state=active]:border-[#8B1538] data-[state=active]:shadow-none"
                  >
                    <BarChart3 className="h-4 w-4" />
                    Eficacia
                  </TabsTrigger>
                </TabsList>

<div className="bg-white border border-t-0 rounded-b-lg p-6">
                  <TabsContent value="immediate" className="mt-0 space-y-4">
                    <div className="flex items-center justify-between gap-4 flex-wrap">
                      <div className="flex items-center gap-2">
                        <span className="text-sm text-muted-foreground">Filtrar:</span>
                        <Select value={immediateFilter} onValueChange={(v) => setImmediateFilter(v as ActionFilter)}>
                          <SelectTrigger className="w-[150px] h-9">
                            <SelectValue />
                          </SelectTrigger>
                          <SelectContent>
                            <SelectItem value="all">Todas</SelectItem>
                            <SelectItem value="pending">Pendentes</SelectItem>
                            <SelectItem value="in_progress">Em Andamento</SelectItem>
                            <SelectItem value="completed">Concluidas</SelectItem>
                            <SelectItem value="overdue">Atrasadas</SelectItem>
                          </SelectContent>
                        </Select>
                      </div>
                      {filteredImmediateActions.length > 0 && (
                        <div className="flex items-center gap-3">
                          <div className="flex items-center gap-2">
                            <Checkbox 
                              checked={selectedImmediateIds.length === filteredImmediateActions.length && filteredImmediateActions.length > 0}
                              onCheckedChange={toggleSelectAllImmediate}
                            />
                            <span className="text-sm text-muted-foreground">Selecionar todas</span>
                          </div>
                          {selectedImmediateIds.length > 0 && (
                            <Select onValueChange={(v) => handleBulkImmediateStatus(v as ActionStatus)}>
                              <SelectTrigger className="w-[200px] h-9">
                                <SelectValue placeholder="Alterar status em massa" />
                              </SelectTrigger>
                              <SelectContent>
                                <SelectItem value="pending">Marcar Pendente</SelectItem>
                                <SelectItem value="in_progress">Marcar Em Andamento</SelectItem>
                                <SelectItem value="completed">Marcar Concluida</SelectItem>
                              </SelectContent>
                            </Select>
                          )}
                        </div>
                      )}
                    </div>
                    <ImmediateActionsModule
                      ncId={currentNC.id}
                      actions={filteredImmediateActions}
                      onAddAction={handleAddImmediateAction}
                      onUpdateAction={handleUpdateImmediateAction}
                      onDeleteAction={handleDeleteImmediateAction}
                    />
                  </TabsContent>

<TabsContent value="corrective" className="mt-0 space-y-4">
                    <div className="flex items-center justify-between gap-4 flex-wrap">
                      <div className="flex items-center gap-2">
                        <span className="text-sm text-muted-foreground">Filtrar:</span>
                        <Select value={correctiveFilter} onValueChange={(v) => setCorrectiveFilter(v as ActionFilter)}>
                          <SelectTrigger className="w-[150px] h-9">
                            <SelectValue />
                          </SelectTrigger>
                          <SelectContent>
                            <SelectItem value="all">Todas</SelectItem>
                            <SelectItem value="pending">Pendentes</SelectItem>
                            <SelectItem value="in_progress">Em Andamento</SelectItem>
                            <SelectItem value="completed">Concluidas</SelectItem>
                            <SelectItem value="overdue">Atrasadas</SelectItem>
                          </SelectContent>
                        </Select>
                      </div>
                      {filteredCorrectiveActions.length > 0 && (
                        <div className="flex items-center gap-3">
                          <div className="flex items-center gap-2">
                            <Checkbox 
                              checked={selectedCorrectiveIds.length === filteredCorrectiveActions.length && filteredCorrectiveActions.length > 0}
                              onCheckedChange={toggleSelectAllCorrective}
                            />
                            <span className="text-sm text-muted-foreground">Selecionar todas</span>
                          </div>
                          {selectedCorrectiveIds.length > 0 && (
                            <Select onValueChange={(v) => handleBulkCorrectiveStatus(v as ActionStatus)}>
                              <SelectTrigger className="w-[200px] h-9">
                                <SelectValue placeholder="Alterar status em massa" />
                              </SelectTrigger>
                              <SelectContent>
                                <SelectItem value="pending">Marcar Pendente</SelectItem>
                                <SelectItem value="in_progress">Marcar Em Andamento</SelectItem>
                                <SelectItem value="completed">Marcar Concluida</SelectItem>
                              </SelectContent>
                            </Select>
                          )}
                        </div>
                      )}
                    </div>
                    <CorrectiveActionsModule
                      ncId={currentNC.id}
                      actions={filteredCorrectiveActions}
                      onAddAction={handleAddCorrectiveAction}
                      onUpdateAction={handleUpdateCorrectiveAction}
                      onDeleteAction={handleDeleteCorrectiveAction}
                    />
                  </TabsContent>

{/* Footer */}
          <div className="border-t px-6 py-4 flex items-center justify-between bg-gray-50">
            <div className="text-sm text-muted-foreground">
              Criado por: <span className="font-medium">{currentNC.registeredBy}</span> - {new Date(currentNC.registeredAt).toLocaleDateString("pt-BR")} {new Date(currentNC.registeredAt).toLocaleTimeString("pt-BR", { hour: "2-digit", minute: "2-digit" })}
            </div>
            <div className="flex items-center gap-3">
              <Button variant="outline" onClick={onClose}>
                CANCELAR
              </Button>
              <Button 
                onClick={handleSaveChanges}
                className="bg-[#8B1538] hover:bg-[#6B1028] text-white"
              >
                SALVAR
              </Button>
            </div>
          </div>
        </DialogContent>
      </Dialog>
    </TooltipProvider>
  )
}
[V0_FILE]typescriptreact:file="components/sidebar.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { cn } from "@/lib/utils"
import { Button } from "@/components/ui/button"
import { ScrollArea } from "@/components/ui/scroll-area"
import {
  AlertTriangle,
  LayoutDashboard,
  FileText,
  ChevronDown,
  ChevronRight,
  Menu,
  X,
} from "lucide-react"

interface SidebarProps {
  currentPage: "painel" | "relatorios"
  onNavigate: (page: "painel" | "relatorios") => void
}

export function Sidebar({ currentPage, onNavigate }: SidebarProps) {
  const [isExpanded, setIsExpanded] = useState(true)
  const [isNCMenuOpen, setIsNCMenuOpen] = useState(true)

return (
    <>
      {/* Mobile toggle button */}
      <Button
        variant="ghost"
        size="icon"
        className="fixed top-4 left-4 z-50 lg:hidden"
        onClick={() => setIsExpanded(!isExpanded)}
      >
        {isExpanded ? <X className="h-5 w-5" /> : <Menu className="h-5 w-5" />}
      </Button>

{/* Sidebar */}
      <aside
        className={cn(
          "fixed left-0 top-0 z-40 h-screen bg-slate-900 text-white transition-all duration-300",
          isExpanded ? "w-64" : "w-0 lg:w-16",
          "lg:relative"
        )}
      >
        <ScrollArea className="h-full">
          <div className="p-4">
            {/* Logo/Header */}
            <div className={cn("mb-8 flex items-center gap-3", !isExpanded && "lg:justify-center")}>
              <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-red-700">
                <AlertTriangle className="h-6 w-6 text-white" />
              </div>
              {isExpanded && (
                <div>
                  <h1 className="text-lg font-bold">Qualidade</h1>
                  <p className="text-xs text-slate-400">Sistema de Gestao</p>
                </div>
              )}
            </div>

{/* Navigation */}
            <nav className="space-y-2">
              {/* NC Menu */}
              <div>
                <button
                  onClick={() => setIsNCMenuOpen(!isNCMenuOpen)}
                  className={cn(
                    "flex w-full items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium transition-colors",
                    "hover:bg-slate-800",
                    !isExpanded && "lg:justify-center lg:px-2"
                  )}
                >
                  <AlertTriangle className="h-5 w-5 text-red-400" />
                  {isExpanded && (
                    <>
                      <span className="flex-1 text-left">Nao Conformidade</span>
                      {isNCMenuOpen ? (
                        <ChevronDown className="h-4 w-4" />
                      ) : (
                        <ChevronRight className="h-4 w-4" />
                      )}
                    </>
                  )}
                </button>

{/* Submenus */}
                {isNCMenuOpen && isExpanded && (
                  <div className="ml-4 mt-1 space-y-1 border-l border-slate-700 pl-4">
                    <button
                      onClick={() => onNavigate("painel")}
                      className={cn(
                        "flex w-full items-center gap-3 rounded-lg px-3 py-2 text-sm transition-colors",
                        currentPage === "painel"
                          ? "bg-red-700 text-white"
                          : "text-slate-300 hover:bg-slate-800 hover:text-white"
                      )}
                    >
                      <LayoutDashboard className="h-4 w-4" />
                      <span>Painel de Controle</span>
                    </button>

<button
                      onClick={() => onNavigate("relatorios")}
                      className={cn(
                        "flex w-full items-center gap-3 rounded-lg px-3 py-2 text-sm transition-colors",
                        currentPage === "relatorios"
                          ? "bg-red-700 text-white"
                          : "text-slate-300 hover:bg-slate-800 hover:text-white"
                      )}
                    >
                      <FileText className="h-4 w-4" />
                      <span>Relatorios</span>
                    </button>
                  </div>
                )}
              </div>
            </nav>
          </div>
        </ScrollArea>

{/* Collapse button for desktop */}
        <Button
          variant="ghost"
          size="icon"
          className="absolute -right-3 top-6 hidden h-6 w-6 rounded-full border border-slate-700 bg-slate-800 lg:flex"
          onClick={() => setIsExpanded(!isExpanded)}
        >
          {isExpanded ? (
            <ChevronRight className="h-3 w-3" />
          ) : (
            <ChevronRight className="h-3 w-3 rotate-180" />
          )}
        </Button>
      </aside>

{/* Overlay for mobile */}
      {isExpanded && (
        <div
          className="fixed inset-0 z-30 bg-black/50 lg:hidden"
          onClick={() => setIsExpanded(false)}
        />
      )}
    </>
  )
}
[V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Sidebar } from "@/components/sidebar"
import { NCKanbanBoard } from "@/components/nc-kanban-board"
import { NCDetailModal } from "@/components/nc-detail-modal"
import { NCRegistrationForm } from "@/components/nc-registration-form"
import { NCReports } from "@/components/nc-reports"
import type { NC } from "@/lib/types"

export default function Home() {
  const [currentPage, setCurrentPage] = useState<"painel" | "relatorios">("painel")
  const [selectedNC, setSelectedNC] = useState<NC | null>(null)
  const [showCreateForm, setShowCreateForm] = useState(false)
  const [refreshKey, setRefreshKey] = useState(0)

const handleNCCreated = (nc: NC) => {
    setShowCreateForm(false)
    setRefreshKey((prev) => prev + 1)
  }

const handleCloseModal = () => {
    setSelectedNC(null)
    setRefreshKey((prev) => prev + 1)
  }

const handleViewNCFromReports = (nc: NC) => {
    setSelectedNC(nc)
  }

if (showCreateForm) {
    return (
      <div className="flex min-h-screen">
        <Sidebar currentPage={currentPage} onNavigate={setCurrentPage} />
        <main className="flex-1 overflow-auto">
          <NCRegistrationForm onBack={() => setShowCreateForm(false)} onSuccess={handleNCCreated} />
        </main>
      </div>
    )
  }

return (
    <div className="flex min-h-screen">
      <Sidebar currentPage={currentPage} onNavigate={setCurrentPage} />
      <main className="flex-1 overflow-auto bg-slate-50">
        {currentPage === "painel" ? (
          <>
            <NCKanbanBoard key={refreshKey} onSelectNC={setSelectedNC} onCreateNC={() => setShowCreateForm(true)} />
            <NCDetailModal 
              nc={selectedNC} 
              open={!!selectedNC} 
              onClose={handleCloseModal}
              onEdit={() => {}}
            />
          </>
        ) : (
          <>
            <NCReports onViewNC={handleViewNCFromReports} />
            <NCDetailModal 
              nc={selectedNC} 
              open={!!selectedNC} 
              onClose={handleCloseModal}
              onEdit={() => {}}
            />
          </>
        )}
      </main>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/nc-reports.tsx"
"use client"

import { useState, useMemo } from "react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Badge } from "@/components/ui/badge"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible"
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"
import {
  FileSpreadsheet,
  FileText,
  Filter,
  ChevronDown,
  ChevronUp,
  AlertTriangle,
  Zap,
  Settings,
  Search,
  ChevronLeft,
  ChevronRight,
  ExternalLink,
  FileBarChart,
} from "lucide-react"
import { getNCs, getImmediateActionsByNCId, getCorrectiveActionsByNCId, getRootCausesByNCId } from "@/lib/nc-store"
import type { NC, ImmediateAction, CorrectiveAction, RootCause } from "@/lib/types"

const statusLabels = {
  pending: "Pendente",
  in_progress: "Em Andamento",
  completed: "Concluido",
}

const statusColors = {
  pending: "bg-yellow-100 text-yellow-800",
  in_progress: "bg-blue-100 text-blue-800",
  completed: "bg-green-100 text-green-800",
}

const ncStatusLabels = {
  planning: "Novo",
  waiting: "Aguardando",
  in_progress: "Em Andamento",
  verification: "Aguardando Verificacao",
  completed: "Concluida",
}

const severityLabels = {
  low: "Baixa",
  medium: "Media",
  high: "Alta",
  critical: "Critica",
}

interface NCReportsProps {
  onViewNC?: (nc: NC) => void
}

export function NCReports({ onViewNC }: NCReportsProps) {
  const [activeTab, setActiveTab] = useState("ncs")
  const [filtersOpen, setFiltersOpen] = useState(true)
  const [currentPage, setCurrentPage] = useState(1)
  const [itemsPerPage, setItemsPerPage] = useState(10)

// Filters state
  const [filters, setFilters] = useState({
    responsavel: "",
    status: "all",
    categoria: "",
    dataInicio: "",
    dataFim: "",
    parceiro: "",
    origem: "",
    local: "",
    prioridade: "",
  })

// Load data
  const ncs = getNCs()

// Build immediate actions data with NC info
  const immediateActionsData = useMemo(() => {
    const data: Array<ImmediateAction & { nc: NC; isOverdue: boolean; daysOverdue: number }> = []
    for (const nc of ncs) {
      const actions = getImmediateActionsByNCId(nc.id)
      for (const action of actions) {
        const deadline = new Date(action.deadline)
        const today = new Date()
        const isOverdue = action.status !== "completed" && deadline < today
        const daysOverdue = Math.ceil((today.getTime() - deadline.getTime()) / (1000 * 60 * 60 * 24))
        data.push({ ...action, nc, isOverdue, daysOverdue })
      }
    }
    return data
  }, [ncs])

// Build corrective actions data with NC info
  const correctiveActionsData = useMemo(() => {
    const data: Array<CorrectiveAction & { nc: NC; isOverdue: boolean; daysOverdue: number }> = []
    for (const nc of ncs) {
      const actions = getCorrectiveActionsByNCId(nc.id)
      for (const action of actions) {
        const deadline = new Date(action.whenDate)
        const today = new Date()
        const isOverdue = action.status !== "completed" && deadline < today
        const daysOverdue = Math.ceil((today.getTime() - deadline.getTime()) / (1000 * 60 * 60 * 24))
        data.push({ ...action, nc, isOverdue, daysOverdue })
      }
    }
    return data
  }, [ncs])

// Build root cause data with NC info
  const rootCauseData = useMemo(() => {
    const data: Array<{ nc: NC; rootCauses: RootCause[] }> = []
    for (const nc of ncs) {
      const rootCauses = getRootCausesByNCId(nc.id)
      if (rootCauses.length > 0) {
        data.push({ nc, rootCauses })
      }
    }
    return data
  }, [ncs])

// Filter NCs
  const filteredNCs = useMemo(() => {
    return ncs.filter((nc) => {
      if (filters.responsavel && !nc.responsiblePerson.toLowerCase().includes(filters.responsavel.toLowerCase())) return false
      if (filters.categoria && nc.category !== filters.categoria) return false
      if (filters.local && !nc.location.toLowerCase().includes(filters.local.toLowerCase())) return false
      if (filters.dataInicio && new Date(nc.registeredAt) < new Date(filters.dataInicio)) return false
      if (filters.dataFim && new Date(nc.registeredAt) > new Date(filters.dataFim)) return false
      return true
    })
  }, [ncs, filters])

// Filter immediate actions
  const filteredImmediateActions = useMemo(() => {
    return immediateActionsData.filter((item) => {
      if (filters.responsavel && !item.responsible.toLowerCase().includes(filters.responsavel.toLowerCase())) return false
      if (filters.status !== "all" && item.status !== filters.status) return false
      if (filters.categoria && item.nc.category !== filters.categoria) return false
      if (filters.dataInicio && new Date(item.deadline) < new Date(filters.dataInicio)) return false
      if (filters.dataFim && new Date(item.deadline) > new Date(filters.dataFim)) return false
      return true
    })
  }, [immediateActionsData, filters])

// Filter corrective actions
  const filteredCorrectiveActions = useMemo(() => {
    return correctiveActionsData.filter((item) => {
      if (filters.responsavel && !item.who.toLowerCase().includes(filters.responsavel.toLowerCase())) return false
      if (filters.status !== "all" && item.status !== filters.status) return false
      if (filters.parceiro && !item.nc.responsiblePerson.toLowerCase().includes(filters.parceiro.toLowerCase())) return false
      if (filters.dataInicio && new Date(item.whenDate) < new Date(filters.dataInicio)) return false
      if (filters.dataFim && new Date(item.whenDate) > new Date(filters.dataFim)) return false
      return true
    })
  }, [correctiveActionsData, filters])

// Filter root cause data
  const filteredRootCauseData = useMemo(() => {
    return rootCauseData.filter((item) => {
      if (filters.categoria && item.nc.category !== filters.categoria) return false
      if (filters.responsavel && !item.nc.responsiblePerson.toLowerCase().includes(filters.responsavel.toLowerCase())) return false
      if (filters.dataInicio && new Date(item.nc.registeredAt) < new Date(filters.dataInicio)) return false
      if (filters.dataFim && new Date(item.nc.registeredAt) > new Date(filters.dataFim)) return false
      return true
    })
  }, [rootCauseData, filters])

// Pagination
  const getCurrentPageData = <T,>(data: T[]) => {
    const startIndex = (currentPage - 1) * itemsPerPage
    return data.slice(startIndex, startIndex + itemsPerPage)
  }

const getTotalPages = (totalItems: number) => Math.ceil(totalItems / itemsPerPage)

// Export functions
  const handleExportExcel = () => {
    alert("Exportando para Excel...")
  }

const handleExportPDF = () => {
    alert("Exportando para PDF...")
  }

// Reset filters
  const resetFilters = () => {
    setFilters({
      responsavel: "",
      status: "all",
      categoria: "",
      dataInicio: "",
      dataFim: "",
      parceiro: "",
      origem: "",
      local: "",
      prioridade: "",
    })
  }

// Truncate text
  const truncateText = (text: string, maxLength: number) => {
    if (!text) return ""
    if (text.length <= maxLength) return text
    return text.substring(0, maxLength) + "..."
  }

// Get unique categories
  const categories = [...new Set(ncs.map((nc) => nc.category))]

return (
    <div className="space-y-6 p-6">
      {/* Header */}
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-3xl font-bold tracking-tight">Relatorios de NC</h1>
          <p className="text-muted-foreground">Gerencie e extraia dados sobre NCs, acoes e causas</p>
        </div>
        <div className="flex gap-2">
          <Button variant="outline" onClick={handleExportPDF}>
            <FileText className="mr-2 h-4 w-4" />
            PDF
          </Button>
          <Button onClick={handleExportExcel}>
            <FileSpreadsheet className="mr-2 h-4 w-4" />
            Excel
          </Button>
        </div>
      </div>

{/* Filters */}
      <Collapsible open={filtersOpen} onOpenChange={setFiltersOpen}>
        <Card>
          <CollapsibleTrigger asChild>
            <CardHeader className="cursor-pointer hover:bg-muted/50 transition-colors">
              <div className="flex items-center justify-between">
                <div className="flex items-center gap-2">
                  <Filter className="h-5 w-5 text-muted-foreground" />
                  <CardTitle className="text-lg">Filtros Avancados</CardTitle>
                </div>
                {filtersOpen ? <ChevronUp className="h-5 w-5" /> : <ChevronDown className="h-5 w-5" />}
              </div>
            </CardHeader>
          </CollapsibleTrigger>
          <CollapsibleContent>
            <CardContent className="pt-0">
              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
                <div className="space-y-2">
                  <Label>Responsavel</Label>
                  <Input
                    placeholder="Buscar responsavel..."
                    value={filters.responsavel}
                    onChange={(e) => setFilters({ ...filters, responsavel: e.target.value })}
                  />
                </div>
                <div className="space-y-2">
                  <Label>Status</Label>
                  <Select value={filters.status} onValueChange={(value) => setFilters({ ...filters, status: value })}>
                    <SelectTrigger>
                      <SelectValue placeholder="Todos" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="all">Todos</SelectItem>
                      <SelectItem value="pending">Pendente</SelectItem>
                      <SelectItem value="in_progress">Em Andamento</SelectItem>
                      <SelectItem value="completed">Concluido</SelectItem>
                    </SelectContent>
                  </Select>
                </div>
                <div className="space-y-2">
                  <Label>Categoria</Label>
                  <Select value={filters.categoria || "all"} onValueChange={(value) => setFilters({ ...filters, categoria: value === "all" ? "" : value })}>
                    <SelectTrigger>
                      <SelectValue placeholder="Todas" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="all">Todas</SelectItem>
                      {categories.map((cat) => (
                        <SelectItem key={cat} value={cat}>{cat}</SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                </div>
                <div className="space-y-2">
                  <Label>Local</Label>
                  <Input
                    placeholder="Buscar local..."
                    value={filters.local}
                    onChange={(e) => setFilters({ ...filters, local: e.target.value })}
                  />
                </div>
                <div className="space-y-2">
                  <Label>Parceiro/Fornecedor</Label>
                  <Input
                    placeholder="Buscar parceiro..."
                    value={filters.parceiro}
                    onChange={(e) => setFilters({ ...filters, parceiro: e.target.value })}
                  />
                </div>
                <div className="space-y-2">
                  <Label>Data Inicio</Label>
                  <Input
                    type="date"
                    value={filters.dataInicio}
                    onChange={(e) => setFilters({ ...filters, dataInicio: e.target.value })}
                  />
                </div>
                <div className="space-y-2">
                  <Label>Data Fim</Label>
                  <Input
                    type="date"
                    value={filters.dataFim}
                    onChange={(e) => setFilters({ ...filters, dataFim: e.target.value })}
                  />
                </div>
                <div className="flex items-end">
                  <Button variant="outline" onClick={resetFilters} className="w-full">
                    Limpar Filtros
                  </Button>
                </div>
              </div>
            </CardContent>
          </CollapsibleContent>
        </Card>
      </Collapsible>

{/* Tabs */}
      <Tabs value={activeTab} onValueChange={(v) => { setActiveTab(v); setCurrentPage(1) }} className="w-full">
        <TabsList className="grid w-full grid-cols-4">
          <TabsTrigger value="ncs" className="flex items-center gap-2">
            <FileBarChart className="h-4 w-4" />
            NCs
            <Badge variant="secondary" className="ml-1">{filteredNCs.length}</Badge>
          </TabsTrigger>
          <TabsTrigger value="imediatas" className="flex items-center gap-2">
            <Zap className="h-4 w-4" />
            Acoes Imediatas
            <Badge variant="secondary" className="ml-1">{filteredImmediateActions.length}</Badge>
          </TabsTrigger>
          <TabsTrigger value="corretivas" className="flex items-center gap-2">
            <Settings className="h-4 w-4" />
            Acoes Corretivas
            <Badge variant="secondary" className="ml-1">{filteredCorrectiveActions.length}</Badge>
          </TabsTrigger>
          <TabsTrigger value="causaraiz" className="flex items-center gap-2">
            <Search className="h-4 w-4" />
            Causa Raiz
            <Badge variant="secondary" className="ml-1">{filteredRootCauseData.length}</Badge>
          </TabsTrigger>
        </TabsList>

{/* NCs Tab */}
        <TabsContent value="ncs" className="mt-4">
          <Card>
            <CardContent className="p-0">
              <div className="overflow-x-auto">
                <Table>
                  <TableHeader>
                    <TableRow className="bg-muted/50">
                      <TableHead className="w-[120px]">ID da NC</TableHead>
                      <TableHead>Titulo</TableHead>
                      <TableHead className="w-[140px]">Status</TableHead>
                      <TableHead className="w-[100px]">Prioridade</TableHead>
                      <TableHead className="w-[120px]">Prazo</TableHead>
                      <TableHead className="w-[120px]">Data Criacao</TableHead>
                      <TableHead>Categoria</TableHead>
                      <TableHead>Origem</TableHead>
                      <TableHead>Local</TableHead>
                      <TableHead>Responsavel</TableHead>
                    </TableRow>
                  </TableHeader>
                  <TableBody>
                    {getCurrentPageData(filteredNCs).map((nc) => (
                      <TableRow key={nc.id} className="hover:bg-muted/30">
                        <TableCell>
                          <Button
                            variant="link"
                            className="p-0 h-auto text-blue-600 hover:text-blue-800"
                            onClick={() => onViewNC?.(nc)}
                          >
                            {nc.ncNumber}
                            <ExternalLink className="ml-1 h-3 w-3" />
                          </Button>
                        </TableCell>
                        <TableCell className="font-medium max-w-[200px]">
                          <TooltipProvider>
                            <Tooltip>
                              <TooltipTrigger className="text-left">
                                {truncateText(nc.title, 30)}
                              </TooltipTrigger>
                              <TooltipContent className="max-w-[400px]">
                                <p>{nc.title}</p>
                              </TooltipContent>
                            </Tooltip>
                          </TooltipProvider>
                        </TableCell>
                        <TableCell>
                          <Badge variant="outline">{ncStatusLabels[nc.status]}</Badge>
                        </TableCell>
                        <TableCell>
                          <Badge className={nc.severity === "high" || nc.severity === "critical" ? "bg-red-500 text-white" : nc.severity === "medium" ? "bg-yellow-500 text-white" : "bg-green-500 text-white"}>
                            {severityLabels[nc.severity]}
                          </Badge>
                        </TableCell>
                        <TableCell>{new Date(nc.registeredAt).toLocaleDateString("pt-BR")}</TableCell>
                        <TableCell>{new Date(nc.registeredAt).toLocaleDateString("pt-BR")}</TableCell>
                        <TableCell>{nc.category}</TableCell>
                        <TableCell>Interno</TableCell>
                        <TableCell>{nc.location}</TableCell>
                        <TableCell>{nc.responsiblePerson}</TableCell>
                      </TableRow>
                    ))}
                    {filteredNCs.length === 0 && (
                      <TableRow>
                        <TableCell colSpan={10} className="text-center py-8 text-muted-foreground">
                          Nenhuma NC encontrada
                        </TableCell>
                      </TableRow>
                    )}
                  </TableBody>
                </Table>
              </div>
            </CardContent>
          </Card>

{/* Pagination */}
          <div className="flex items-center justify-between mt-4">
            <div className="flex items-center gap-2">
              <span className="text-sm text-muted-foreground">Itens por pagina:</span>
              <Select value={itemsPerPage.toString()} onValueChange={(v) => { setItemsPerPage(Number(v)); setCurrentPage(1) }}>
                <SelectTrigger className="w-[80px]">
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="10">10</SelectItem>
                  <SelectItem value="25">25</SelectItem>
                  <SelectItem value="50">50</SelectItem>
                  <SelectItem value="100">100</SelectItem>
                </SelectContent>
              </Select>
            </div>
            <div className="flex items-center gap-2">
              <span className="text-sm text-muted-foreground">
                {filteredNCs.length > 0 ? ((currentPage - 1) * itemsPerPage) + 1 : 0}-{Math.min(currentPage * itemsPerPage, filteredNCs.length)} de {filteredNCs.length}
              </span>
              <Button variant="outline" size="icon" disabled={currentPage === 1} onClick={() => setCurrentPage(p => p - 1)}>
                <ChevronLeft className="h-4 w-4" />
              </Button>
              <Button variant="outline" size="icon" disabled={currentPage >= getTotalPages(filteredNCs.length)} onClick={() => setCurrentPage(p => p + 1)}>
                <ChevronRight className="h-4 w-4" />
              </Button>
            </div>
          </div>
        </TabsContent>

{/* Immediate Actions Tab */}
        <TabsContent value="imediatas" className="mt-4">
          <Card>
            <CardContent className="p-0">
              <div className="overflow-x-auto">
                <Table>
                  <TableHeader>
                    <TableRow className="bg-muted/50">
                      <TableHead className="w-[120px]">ID da NC</TableHead>
                      <TableHead>Responsavel</TableHead>
                      <TableHead className="w-[120px]">Prazo</TableHead>
                      <TableHead className="w-[140px]">Status</TableHead>
                      <TableHead className="w-[120px]">Data Criacao</TableHead>
                      <TableHead>Parceiro</TableHead>
                      <TableHead className="w-[300px]">Descricao</TableHead>
                    </TableRow>
                  </TableHeader>
                  <TableBody>
                    {getCurrentPageData(filteredImmediateActions).map((item) => (
                      <TableRow key={item.id} className="hover:bg-muted/30">
                        <TableCell>
                          <Button
                            variant="link"
                            className="p-0 h-auto text-blue-600 hover:text-blue-800"
                            onClick={() => onViewNC?.(item.nc)}
                          >
                            {item.nc.ncNumber}
                            <ExternalLink className="ml-1 h-3 w-3" />
                          </Button>
                        </TableCell>
                        <TableCell className="font-medium">{item.responsible}</TableCell>
                        <TableCell>
                          <div className="flex flex-col">
                            <span>{new Date(item.deadline).toLocaleDateString("pt-BR")}</span>
                            {item.isOverdue && (
                              <Badge variant="destructive" className="mt-1 text-xs w-fit">
                                <AlertTriangle className="mr-1 h-3 w-3" />
                                {item.daysOverdue}d atraso
                              </Badge>
                            )}
                          </div>
                        </TableCell>
                        <TableCell>
                          <Badge className={statusColors[item.status]}>
                            {statusLabels[item.status]}
                          </Badge>
                        </TableCell>
                        <TableCell>{new Date(item.createdAt).toLocaleDateString("pt-BR")}</TableCell>
                        <TableCell>{item.nc.responsiblePerson}</TableCell>
                        <TableCell>
                          <TooltipProvider>
                            <Tooltip>
                              <TooltipTrigger className="text-left">
                                {truncateText(item.actionDescription, 50)}
                              </TooltipTrigger>
                              <TooltipContent className="max-w-[400px]">
                                <p>{item.actionDescription}</p>
                              </TooltipContent>
                            </Tooltip>
                          </TooltipProvider>
                        </TableCell>
                      </TableRow>
                    ))}
                    {filteredImmediateActions.length === 0 && (
                      <TableRow>
                        <TableCell colSpan={7} className="text-center py-8 text-muted-foreground">
                          Nenhuma acao imediata encontrada
                        </TableCell>
                      </TableRow>
                    )}
                  </TableBody>
                </Table>
              </div>
            </CardContent>
          </Card>

{/* Pagination */}
          <div className="flex items-center justify-between mt-4">
            <div className="flex items-center gap-2">
              <span className="text-sm text-muted-foreground">Itens por pagina:</span>
              <Select value={itemsPerPage.toString()} onValueChange={(v) => { setItemsPerPage(Number(v)); setCurrentPage(1) }}>
                <SelectTrigger className="w-[80px]">
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="10">10</SelectItem>
                  <SelectItem value="25">25</SelectItem>
                  <SelectItem value="50">50</SelectItem>
                  <SelectItem value="100">100</SelectItem>
                </SelectContent>
              </Select>
            </div>
            <div className="flex items-center gap-2">
              <span className="text-sm text-muted-foreground">
                {filteredImmediateActions.length > 0 ? ((currentPage - 1) * itemsPerPage) + 1 : 0}-{Math.min(currentPage * itemsPerPage, filteredImmediateActions.length)} de {filteredImmediateActions.length}
              </span>
              <Button variant="outline" size="icon" disabled={currentPage === 1} onClick={() => setCurrentPage(p => p - 1)}>
                <ChevronLeft className="h-4 w-4" />
              </Button>
              <Button variant="outline" size="icon" disabled={currentPage >= getTotalPages(filteredImmediateActions.length)} onClick={() => setCurrentPage(p => p + 1)}>
                <ChevronRight className="h-4 w-4" />
              </Button>
            </div>
          </div>
        </TabsContent>

{/* Corrective Actions Tab */}
        <TabsContent value="corretivas" className="mt-4">
          <Card>
            <CardContent className="p-0">
              <div className="overflow-x-auto">
                <Table>
                  <TableHeader>
                    <TableRow className="bg-muted/50">
                      <TableHead className="w-[120px]">ID da NC</TableHead>
                      <TableHead>Responsavel</TableHead>
                      <TableHead className="w-[120px]">Prazo</TableHead>
                      <TableHead className="w-[140px]">Status</TableHead>
                      <TableHead>Por que</TableHead>
                      <TableHead>Parceiro</TableHead>
                      <TableHead className="w-[100px]">Quanto R$</TableHead>
                      <TableHead className="w-[120px]">Data Criacao</TableHead>
                    </TableRow>
                  </TableHeader>
                  <TableBody>
                    {getCurrentPageData(filteredCorrectiveActions).map((item) => (
                      <TableRow key={item.id} className="hover:bg-muted/30">
                        <TableCell>
                          <Button
                            variant="link"
                            className="p-0 h-auto text-blue-600 hover:text-blue-800"
                            onClick={() => onViewNC?.(item.nc)}
                          >
                            {item.nc.ncNumber}
                            <ExternalLink className="ml-1 h-3 w-3" />
                          </Button>
                        </TableCell>
                        <TableCell className="font-medium">{item.who}</TableCell>
                        <TableCell>
                          <div className="flex flex-col">
                            <span>{new Date(item.whenDate).toLocaleDateString("pt-BR")}</span>
                            {item.isOverdue && (
                              <Badge variant="destructive" className="mt-1 text-xs w-fit">
                                <AlertTriangle className="mr-1 h-3 w-3" />
                                {item.daysOverdue}d atraso
                              </Badge>
                            )}
                          </div>
                        </TableCell>
                        <TableCell>
                          <Badge className={statusColors[item.status]}>
                            {statusLabels[item.status]}
                          </Badge>
                        </TableCell>
                        <TableCell>
                          <TooltipProvider>
                            <Tooltip>
                              <TooltipTrigger className="text-left">
                                {truncateText(item.why || "-", 30)}
                              </TooltipTrigger>
                              <TooltipContent className="max-w-[400px]">
                                <p>{item.why || "-"}</p>
                              </TooltipContent>
                            </Tooltip>
                          </TooltipProvider>
                        </TableCell>
                        <TableCell>{item.nc.responsiblePerson}</TableCell>
                        <TableCell>{item.howMuch ? `R$ ${item.howMuch}` : "-"}</TableCell>
                        <TableCell>{new Date(item.createdAt).toLocaleDateString("pt-BR")}</TableCell>
                      </TableRow>
                    ))}
                    {filteredCorrectiveActions.length === 0 && (
                      <TableRow>
                        <TableCell colSpan={8} className="text-center py-8 text-muted-foreground">
                          Nenhuma acao corretiva encontrada
                        </TableCell>
                      </TableRow>
                    )}
                  </TableBody>
                </Table>
              </div>
            </CardContent>
          </Card>

{/* Pagination */}
          <div className="flex items-center justify-between mt-4">
            <div className="flex items-center gap-2">
              <span className="text-sm text-muted-foreground">Itens por pagina:</span>
              <Select value={itemsPerPage.toString()} onValueChange={(v) => { setItemsPerPage(Number(v)); setCurrentPage(1) }}>
                <SelectTrigger className="w-[80px]">
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="10">10</SelectItem>
                  <SelectItem value="25">25</SelectItem>
                  <SelectItem value="50">50</SelectItem>
                  <SelectItem value="100">100</SelectItem>
                </SelectContent>
              </Select>
            </div>
            <div className="flex items-center gap-2">
              <span className="text-sm text-muted-foreground">
                {filteredCorrectiveActions.length > 0 ? ((currentPage - 1) * itemsPerPage) + 1 : 0}-{Math.min(currentPage * itemsPerPage, filteredCorrectiveActions.length)} de {filteredCorrectiveActions.length}
              </span>
              <Button variant="outline" size="icon" disabled={currentPage === 1} onClick={() => setCurrentPage(p => p - 1)}>
                <ChevronLeft className="h-4 w-4" />
              </Button>
              <Button variant="outline" size="icon" disabled={currentPage >= getTotalPages(filteredCorrectiveActions.length)} onClick={() => setCurrentPage(p => p + 1)}>
                <ChevronRight className="h-4 w-4" />
              </Button>
            </div>
          </div>
        </TabsContent>

{/* Root Cause Tab */}
        <TabsContent value="causaraiz" className="mt-4">
          <Card>
            <CardContent className="p-0">
              <div className="overflow-x-auto">
                <Table>
                  <TableHeader>
                    <TableRow className="bg-muted/50">
                      <TableHead className="w-[120px]">ID da NC</TableHead>
                      <TableHead>Responsavel</TableHead>
                      <TableHead className="w-[140px]">Status</TableHead>
                      <TableHead>Categoria</TableHead>
                      <TableHead>Local</TableHead>
                      <TableHead className="w-[120px]">Prazo</TableHead>
                      <TableHead>Por que 1</TableHead>
                      <TableHead>Por que 2</TableHead>
                      <TableHead>Por que 3</TableHead>
                      <TableHead>Por que 4</TableHead>
                      <TableHead>Por que 5</TableHead>
                    </TableRow>
                  </TableHeader>
                  <TableBody>
                    {getCurrentPageData(filteredRootCauseData).map((item) => {
                      const pqs = item.rootCauses.sort((a, b) => a.whyNumber - b.whyNumber)
                      return (
                        <TableRow key={item.nc.id} className="hover:bg-muted/30">
                          <TableCell>
                            <Button
                              variant="link"
                              className="p-0 h-auto text-blue-600 hover:text-blue-800"
                              onClick={() => onViewNC?.(item.nc)}
                            >
                              {item.nc.ncNumber}
                              <ExternalLink className="ml-1 h-3 w-3" />
                            </Button>
                          </TableCell>
                          <TableCell className="font-medium">{item.nc.responsiblePerson}</TableCell>
                          <TableCell>
                            <Badge variant="outline">{ncStatusLabels[item.nc.status]}</Badge>
                          </TableCell>
                          <TableCell>{item.nc.category}</TableCell>
                          <TableCell>{item.nc.location}</TableCell>
                          <TableCell>{new Date(item.nc.registeredAt).toLocaleDateString("pt-BR")}</TableCell>
                          {[0, 1, 2, 3, 4].map((idx) => (
                            <TableCell key={idx}>
                              {pqs[idx] && (
                                <TooltipProvider>
                                  <Tooltip>
                                    <TooltipTrigger className="text-left">
                                      {truncateText(pqs[idx].answer, 20)}
                                    </TooltipTrigger>
                                    <TooltipContent className="max-w-[300px]">
                                      <p>{pqs[idx].answer}</p>
                                    </TooltipContent>
                                  </Tooltip>
                                </TooltipProvider>
                              )}
                            </TableCell>
                          ))}
                        </TableRow>
                      )
                    })}
                    {filteredRootCauseData.length === 0 && (
                      <TableRow>
                        <TableCell colSpan={11} className="text-center py-8 text-muted-foreground">
                          Nenhuma analise de causa raiz encontrada
                        </TableCell>
                      </TableRow>
                    )}
                  </TableBody>
                </Table>
              </div>
            </CardContent>
          </Card>

{/* Pagination */}
          <div className="flex items-center justify-between mt-4">
            <div className="flex items-center gap-2">
              <span className="text-sm text-muted-foreground">Itens por pagina:</span>
              <Select value={itemsPerPage.toString()} onValueChange={(v) => { setItemsPerPage(Number(v)); setCurrentPage(1) }}>
                <SelectTrigger className="w-[80px]">
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="10">10</SelectItem>
                  <SelectItem value="25">25</SelectItem>
                  <SelectItem value="50">50</SelectItem>
                  <SelectItem value="100">100</SelectItem>
                </SelectContent>
              </Select>
            </div>
            <div className="flex items-center gap-2">
              <span className="text-sm text-muted-foreground">
                {filteredRootCauseData.length > 0 ? ((currentPage - 1) * itemsPerPage) + 1 : 0}-{Math.min(currentPage * itemsPerPage, filteredRootCauseData.length)} de {filteredRootCauseData.length}
              </span>
              <Button variant="outline" size="icon" disabled={currentPage === 1} onClick={() => setCurrentPage(p => p - 1)}>
                <ChevronLeft className="h-4 w-4" />
              </Button>
              <Button variant="outline" size="icon" disabled={currentPage >= getTotalPages(filteredRootCauseData.length)} onClick={() => setCurrentPage(p => p + 1)}>
                <ChevronRight className="h-4 w-4" />
              </Button>
            </div>
          </div>
        </TabsContent>
      </Tabs>
    </div>
  )
}</article></body></html>