🚀 Initial commit: Versão atual do TrackSteel APP
This commit is contained in:
@@ -0,0 +1,404 @@
|
||||
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { useForm } from 'react-hook-form';
|
||||
import { zodResolver } from '@hookform/resolvers/zod';
|
||||
import { z } from 'zod';
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from '@/components/ui/dialog';
|
||||
import {
|
||||
Form,
|
||||
FormControl,
|
||||
FormField,
|
||||
FormItem,
|
||||
FormLabel,
|
||||
FormMessage,
|
||||
} from '@/components/ui/form';
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from '@/components/ui/select';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Calendar } from '@/components/ui/calendar';
|
||||
import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
|
||||
import { CalendarIcon } from 'lucide-react';
|
||||
import { format } from 'date-fns';
|
||||
import { ptBR } from 'date-fns/locale';
|
||||
import { cn } from '@/lib/utils';
|
||||
import { Textarea } from '@/components/ui/textarea';
|
||||
import { OrdemFabricacao } from '@/hooks/useOFs';
|
||||
|
||||
const editOFSchema = z.object({
|
||||
descritivo: z.string().optional(),
|
||||
data_abertura: z.string().optional(),
|
||||
data_prazo: z.string().optional(),
|
||||
data_termino_prev: z.string().optional(),
|
||||
peso_total: z.number().optional(),
|
||||
gestor: z.string().optional(),
|
||||
prioridade: z.string(),
|
||||
nivel_qualidade: z.string(),
|
||||
criterio_qualidade: z.string().optional(),
|
||||
tratamento_final: z.string().optional(),
|
||||
local_uf: z.string().optional(),
|
||||
});
|
||||
|
||||
type EditOFFormData = z.infer<typeof editOFSchema>;
|
||||
|
||||
interface EditOFModalProps {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
onSuccess?: () => void;
|
||||
ordem: OrdemFabricacao | null;
|
||||
onUpdate: (id: string, data: Partial<OrdemFabricacao>) => Promise<void>;
|
||||
}
|
||||
|
||||
export const EditOFModal: React.FC<EditOFModalProps> = ({
|
||||
isOpen,
|
||||
onClose,
|
||||
onSuccess,
|
||||
ordem,
|
||||
onUpdate,
|
||||
}) => {
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
const form = useForm<EditOFFormData>({
|
||||
resolver: zodResolver(editOFSchema),
|
||||
defaultValues: {
|
||||
descritivo: '',
|
||||
prioridade: 'Normal',
|
||||
nivel_qualidade: 'Normal',
|
||||
},
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
if (ordem && isOpen) {
|
||||
form.reset({
|
||||
descritivo: ordem.descritivo || '',
|
||||
data_abertura: ordem.data_abertura || '',
|
||||
data_prazo: ordem.data_prazo || '',
|
||||
data_termino_prev: ordem.data_termino_prev || '',
|
||||
peso_total: ordem.peso_total || 0,
|
||||
gestor: ordem.gestor || '',
|
||||
prioridade: ordem.prioridade || 'Normal',
|
||||
nivel_qualidade: ordem.nivel_qualidade || 'Normal',
|
||||
criterio_qualidade: ordem.criterio_qualidade || '',
|
||||
tratamento_final: ordem.tratamento_final || '',
|
||||
local_uf: ordem.local_uf || '',
|
||||
});
|
||||
}
|
||||
}, [ordem, isOpen, form]);
|
||||
|
||||
const onSubmit = async (data: EditOFFormData) => {
|
||||
if (!ordem) return;
|
||||
|
||||
setLoading(true);
|
||||
try {
|
||||
await onUpdate(ordem.id, data);
|
||||
onClose();
|
||||
onSuccess?.();
|
||||
} catch (error) {
|
||||
console.error('Erro ao atualizar OF:', error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
if (!ordem) return null;
|
||||
|
||||
return (
|
||||
<Dialog open={isOpen} onOpenChange={onClose}>
|
||||
<DialogContent className="sm:max-w-[600px] max-h-[90vh] overflow-y-auto">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Editar Ordem de Fabricação - {ordem.num_of}</DialogTitle>
|
||||
</DialogHeader>
|
||||
|
||||
<Form {...form}>
|
||||
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="descritivo"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Descritivo</FormLabel>
|
||||
<FormControl>
|
||||
<Input {...field} placeholder="Descrição da OF" />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<div className="grid grid-cols-3 gap-4">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="data_abertura"
|
||||
render={({ field }) => (
|
||||
<FormItem className="flex flex-col">
|
||||
<FormLabel>Data de Abertura</FormLabel>
|
||||
<Popover>
|
||||
<PopoverTrigger asChild>
|
||||
<FormControl>
|
||||
<Button
|
||||
variant={"outline"}
|
||||
className={cn(
|
||||
"w-full pl-3 text-left font-normal",
|
||||
!field.value && "text-muted-foreground"
|
||||
)}
|
||||
>
|
||||
{field.value ? (
|
||||
format(new Date(field.value), "dd/MM/yyyy")
|
||||
) : (
|
||||
<span>Selecione</span>
|
||||
)}
|
||||
<CalendarIcon className="ml-auto h-4 w-4 opacity-50" />
|
||||
</Button>
|
||||
</FormControl>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent className="w-auto p-0" align="start">
|
||||
<Calendar
|
||||
mode="single"
|
||||
selected={field.value ? new Date(field.value) : undefined}
|
||||
onSelect={(date) => field.onChange(date ? format(date, 'yyyy-MM-dd') : '')}
|
||||
disabled={(date) => date < new Date("1900-01-01")}
|
||||
initialFocus
|
||||
locale={ptBR}
|
||||
/>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="data_prazo"
|
||||
render={({ field }) => (
|
||||
<FormItem className="flex flex-col">
|
||||
<FormLabel>Data de Prazo</FormLabel>
|
||||
<Popover>
|
||||
<PopoverTrigger asChild>
|
||||
<FormControl>
|
||||
<Button
|
||||
variant={"outline"}
|
||||
className={cn(
|
||||
"w-full pl-3 text-left font-normal",
|
||||
!field.value && "text-muted-foreground"
|
||||
)}
|
||||
>
|
||||
{field.value ? (
|
||||
format(new Date(field.value), "dd/MM/yyyy")
|
||||
) : (
|
||||
<span>Selecione</span>
|
||||
)}
|
||||
<CalendarIcon className="ml-auto h-4 w-4 opacity-50" />
|
||||
</Button>
|
||||
</FormControl>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent className="w-auto p-0" align="start">
|
||||
<Calendar
|
||||
mode="single"
|
||||
selected={field.value ? new Date(field.value) : undefined}
|
||||
onSelect={(date) => field.onChange(date ? format(date, 'yyyy-MM-dd') : '')}
|
||||
disabled={(date) => date < new Date("1900-01-01")}
|
||||
initialFocus
|
||||
locale={ptBR}
|
||||
/>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="data_termino_prev"
|
||||
render={({ field }) => (
|
||||
<FormItem className="flex flex-col">
|
||||
<FormLabel>Prazo Término (Prev)</FormLabel>
|
||||
<Popover>
|
||||
<PopoverTrigger asChild>
|
||||
<FormControl>
|
||||
<Button
|
||||
variant={"outline"}
|
||||
className={cn(
|
||||
"w-full pl-3 text-left font-normal",
|
||||
!field.value && "text-muted-foreground"
|
||||
)}
|
||||
>
|
||||
{field.value ? (
|
||||
format(new Date(field.value), "dd/MM/yyyy")
|
||||
) : (
|
||||
<span>Selecione</span>
|
||||
)}
|
||||
<CalendarIcon className="ml-auto h-4 w-4 opacity-50" />
|
||||
</Button>
|
||||
</FormControl>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent className="w-auto p-0" align="start">
|
||||
<Calendar
|
||||
mode="single"
|
||||
selected={field.value ? new Date(field.value) : undefined}
|
||||
onSelect={(date) => field.onChange(date ? format(date, 'yyyy-MM-dd') : '')}
|
||||
disabled={(date) => date < new Date("1900-01-01")}
|
||||
initialFocus
|
||||
locale={ptBR}
|
||||
/>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-3 gap-4">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="peso_total"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Peso Total (kg)</FormLabel>
|
||||
<FormControl>
|
||||
<Input
|
||||
type="number"
|
||||
{...field}
|
||||
onChange={(e) => field.onChange(Number(e.target.value))}
|
||||
placeholder="0"
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="prioridade"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Prioridade</FormLabel>
|
||||
<Select onValueChange={field.onChange} value={field.value}>
|
||||
<FormControl>
|
||||
<SelectTrigger>
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
</FormControl>
|
||||
<SelectContent>
|
||||
<SelectItem value="Baixa">Baixa</SelectItem>
|
||||
<SelectItem value="Normal">Normal</SelectItem>
|
||||
<SelectItem value="Urgente">Urgente</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="nivel_qualidade"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Nível de Qualidade</FormLabel>
|
||||
<Select onValueChange={field.onChange} value={field.value}>
|
||||
<FormControl>
|
||||
<SelectTrigger>
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
</FormControl>
|
||||
<SelectContent>
|
||||
<SelectItem value="Normal">Normal</SelectItem>
|
||||
<SelectItem value="Especial">Especial</SelectItem>
|
||||
<SelectItem value="Severa">Severa</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="gestor"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Gestor</FormLabel>
|
||||
<FormControl>
|
||||
<Input {...field} placeholder="Nome do gestor responsável" />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="criterio_qualidade"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Critério de Qualidade</FormLabel>
|
||||
<FormControl>
|
||||
<Textarea {...field} placeholder="Especifique os critérios de qualidade" />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="tratamento_final"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Tratamento Final</FormLabel>
|
||||
<FormControl>
|
||||
<Input {...field} placeholder="Ex: Pintura, Galvanização, etc." />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="local_uf"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Local/UF</FormLabel>
|
||||
<FormControl>
|
||||
<Input {...field} placeholder="Ex: São Paulo/SP" />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-end gap-3 pt-4">
|
||||
<Button type="button" variant="outline" onClick={onClose}>
|
||||
Cancelar
|
||||
</Button>
|
||||
<Button
|
||||
type="submit"
|
||||
disabled={loading}
|
||||
>
|
||||
{loading ? 'Salvando...' : 'Salvar Alterações'}
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</Form>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user