197 lines
9.4 KiB
TypeScript
197 lines
9.4 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import { useParams, useRouter } from "next/navigation";
|
|
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 { Textarea } from "@/components/ui/textarea";
|
|
import { Checkbox } from "@/components/ui/checkbox";
|
|
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 { CalendarIcon } from "lucide-react";
|
|
import { format } from "date-fns";
|
|
import TiptapEditor from "@/components/ui/tiptap-editor";
|
|
import { relatoriosApi, Report } from "@/services/relatoriosApi";
|
|
import { toast } from "@/hooks/use-toast";
|
|
|
|
// Definindo o tipo para a criação de um relatório, omitindo o 'id' que é gerado pelo banco.
|
|
type ReportInput = Omit<Report, 'id'>;
|
|
|
|
export default function NovoLaudoPage() {
|
|
const router = useRouter();
|
|
const params = useParams();
|
|
const patientId = params.id as string;
|
|
|
|
const [formData, setFormData] = useState<Partial<ReportInput>>({
|
|
order_number: "",
|
|
exam: "",
|
|
diagnosis: "",
|
|
conclusion: "",
|
|
cid_code: "",
|
|
content_html: "",
|
|
content_json: {},
|
|
status: "draft",
|
|
requested_by: "",
|
|
due_at: new Date().toISOString(),
|
|
hide_date: false,
|
|
hide_signature: false,
|
|
});
|
|
const [isSubmitting, setIsSubmitting] = useState(false);
|
|
const [error, setError] = useState<string | null>(null);
|
|
|
|
const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
|
|
const { id, value } = e.target;
|
|
setFormData((prev: Partial<ReportInput>) => ({ ...prev, [id]: value }));
|
|
};
|
|
|
|
const handleSelectChange = (id: string, value: string) => {
|
|
setFormData((prev: Partial<ReportInput>) => ({ ...prev, [id]: value }));
|
|
};
|
|
|
|
const handleCheckboxChange = (id: string, checked: boolean) => {
|
|
setFormData((prev: Partial<ReportInput>) => ({ ...prev, [id]: checked }));
|
|
};
|
|
|
|
const handleDateChange = (date: Date | undefined) => {
|
|
if (date) {
|
|
setFormData((prev: Partial<ReportInput>) => ({ ...prev, due_at: date.toISOString() }));
|
|
}
|
|
};
|
|
|
|
const handleEditorChange = (html: string, json: object) => {
|
|
setFormData((prev: Partial<ReportInput>) => ({
|
|
...prev,
|
|
content_html: html,
|
|
content_json: json
|
|
}));
|
|
};
|
|
|
|
const handleSubmit = async (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
setIsSubmitting(true);
|
|
setError(null);
|
|
try {
|
|
const laudoData = {
|
|
...formData,
|
|
patient_id: patientId,
|
|
} as ReportInput;
|
|
|
|
await relatoriosApi.create(laudoData);
|
|
|
|
toast({
|
|
title: "Sucesso!",
|
|
description: "Laudo criado com sucesso."
|
|
});
|
|
|
|
router.push(`/doctor/pacientes/${patientId}/laudos`);
|
|
} catch (error: any) {
|
|
const errorMessage = error.message || "Não foi possível criar o laudo. Tente novamente.";
|
|
setError(errorMessage);
|
|
toast({
|
|
title: "Erro ao criar laudo",
|
|
description: errorMessage,
|
|
variant: "destructive"
|
|
});
|
|
} finally {
|
|
setIsSubmitting(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="container mx-auto p-4">
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Criar Novo Laudo</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<form onSubmit={handleSubmit} className="space-y-6">
|
|
{error && <p className="text-red-500 text-center font-medium">{error}</p>}
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
<div className="space-y-2">
|
|
<Label htmlFor="order_number">Nº do Pedido</Label>
|
|
<Input id="order_number" value={formData.order_number || ''} onChange={handleInputChange} />
|
|
</div>
|
|
<div className="space-y-2">
|
|
<Label htmlFor="exam">Exame</Label>
|
|
<Input id="exam" value={formData.exam || ''} onChange={handleInputChange} />
|
|
</div>
|
|
<div className="space-y-2">
|
|
<Label htmlFor="diagnosis">Diagnóstico</Label>
|
|
<Input id="diagnosis" value={formData.diagnosis || ''} onChange={handleInputChange} />
|
|
</div>
|
|
<div className="space-y-2">
|
|
<Label htmlFor="cid_code">Código CID</Label>
|
|
<Input id="cid_code" value={formData.cid_code || ''} onChange={handleInputChange} />
|
|
</div>
|
|
<div className="space-y-2">
|
|
<Label htmlFor="requested_by">Solicitado Por</Label>
|
|
<Input id="requested_by" value={formData.requested_by || ''} onChange={handleInputChange} />
|
|
</div>
|
|
<div className="space-y-2">
|
|
<Label htmlFor="status">Status</Label>
|
|
<Select onValueChange={(value) => handleSelectChange("status", value)} defaultValue={formData.status}>
|
|
<SelectTrigger>
|
|
<SelectValue placeholder="Selecione o status" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="draft">Rascunho</SelectItem>
|
|
<SelectItem value="final">Finalizado</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<Label htmlFor="due_at">Data de Vencimento</Label>
|
|
<Popover>
|
|
<PopoverTrigger asChild>
|
|
<Button variant={"outline"} className="w-full justify-start text-left font-normal">
|
|
<CalendarIcon className="mr-2 h-4 w-4" />
|
|
{formData.due_at ? format(new Date(formData.due_at), "PPP") : <span>Escolha uma data</span>}
|
|
</Button>
|
|
</PopoverTrigger>
|
|
<PopoverContent className="w-auto p-0">
|
|
<Calendar mode="single" selected={formData.due_at ? new Date(formData.due_at) : undefined} onSelect={handleDateChange} initialFocus />
|
|
</PopoverContent>
|
|
</Popover>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<Label htmlFor="conclusion">Conclusão</Label>
|
|
<Textarea id="conclusion" value={formData.conclusion || ''} onChange={handleInputChange} />
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<Label>Conteúdo do Laudo</Label>
|
|
<div className="rounded-md border border-input">
|
|
<TiptapEditor content={formData.content_html || ''} onChange={handleEditorChange} />
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-center space-x-4">
|
|
<div className="flex items-center space-x-2">
|
|
<Checkbox id="hide_date" checked={formData.hide_date} onCheckedChange={(checked) => handleCheckboxChange("hide_date", !!checked)} />
|
|
<Label htmlFor="hide_date">Ocultar Data</Label>
|
|
</div>
|
|
<div className="flex items-center space-x-2">
|
|
<Checkbox id="hide_signature" checked={formData.hide_signature} onCheckedChange={(checked) => handleCheckboxChange("hide_signature", !!checked)} />
|
|
<Label htmlFor="hide_signature">Ocultar Assinatura</Label>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex justify-end space-x-2">
|
|
<Button type="button" variant="outline" onClick={() => router.back()} disabled={isSubmitting}>
|
|
Cancelar
|
|
</Button>
|
|
<Button type="submit" disabled={isSubmitting}>
|
|
{isSubmitting ? "Salvando..." : "Salvar Laudo"}
|
|
</Button>
|
|
</div>
|
|
</form>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
);
|
|
} |