diff --git a/app/doctor/medicos/[id]/laudos/page.tsx b/app/doctor/medicos/[id]/laudos/page.tsx
new file mode 100644
index 0000000..d943b13
--- /dev/null
+++ b/app/doctor/medicos/[id]/laudos/page.tsx
@@ -0,0 +1,60 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { useParams, useRouter } from "next/navigation";
+import DoctorLayout from "@/components/doctor-layout";
+import { Button } from "@/components/ui/button";
+import dynamic from "next/dynamic";
+
+const Tiptap = dynamic(() => import("@/components/ui/tiptap-editor"), { ssr: false });
+
+export default function LaudoEditorPage() {
+ const [laudoContent, setLaudoContent] = useState("");
+ const [paciente, setPaciente] = useState<{ id: string; nome: string } | null>(null);
+ const params = useParams();
+ const router = useRouter();
+ const pacienteId = params.id;
+
+ useEffect(() => {
+ if (pacienteId) {
+ // Em um caso real, você faria uma chamada de API para buscar os dados do paciente
+ setPaciente({ id: pacienteId as string, nome: `Paciente ${pacienteId}` });
+ setLaudoContent(`Laudo para o paciente ${paciente?.nome || ""}
`);
+ }
+ }, [pacienteId, paciente?.nome]);
+
+ const handleSave = () => {
+ console.log("Salvando laudo para o paciente ID:", pacienteId);
+ console.log("Conteúdo:", laudoContent);
+ // Aqui você implementaria a lógica para salvar o laudo no backend
+ alert("Laudo salvo com sucesso!");
+ };
+
+ const handleContentChange = (richText: string) => {
+ setLaudoContent(richText);
+ };
+
+ const handleCancel = () => {
+ router.back();
+ };
+
+ return (
+
+
+
+
Editor de Laudo
+ {paciente &&
Editando laudo de: {paciente.nome}
}
+
+
+
+
+
+
+
+
+
+
+
Estado |
Último atendimento |
Próximo atendimento |
+ Ações |
{loading ? (
- |
- Carregando pacientes...
+ |
+ Carregando pacientes...
|
) : error ? (
- | {`Erro: ${error}`} |
+ {`Erro: ${error}`} |
) : pacientes.length === 0 ? (
- |
+ |
Nenhum paciente encontrado
|
@@ -95,6 +105,29 @@ export default function PacientesPage() {
{p.estado} |
{p.ultimoAtendimento} |
{p.proximoAtendimento} |
+
+
+
+
+
+
+ alert(`Detalhes para paciente ID: ${p.id}`)}>
+
+ Ver detalhes
+
+
+
+
+ Laudos
+
+
+ alert(`Agenda para paciente ID: ${p.id}`)}>
+
+ Ver agenda
+
+
+
+ |
))
)}
@@ -105,4 +138,4 @@ export default function PacientesPage() {
);
-}
+}
\ No newline at end of file
diff --git a/app/globals.css b/app/globals.css
index 23cc7e3..c68eae6 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -123,3 +123,23 @@
@apply bg-background text-foreground;
}
}
+
+.color-picker {
+ -webkit-appearance: none;
+ -moz-appearance: none;
+ appearance: none;
+ width: 24px;
+ height: 24px;
+ border-radius: 50%;
+ border: 1px solid #ccc;
+ cursor: pointer;
+}
+
+.color-picker::-webkit-color-swatch-wrapper {
+ padding: 0;
+}
+
+.color-picker::-webkit-color-swatch {
+ border: none;
+ border-radius: 50%;
+}
\ No newline at end of file
diff --git a/components/ui/tiptap-editor.tsx b/components/ui/tiptap-editor.tsx
new file mode 100644
index 0000000..e7f4d2d
--- /dev/null
+++ b/components/ui/tiptap-editor.tsx
@@ -0,0 +1,162 @@
+'use client'
+
+import { useEditor, EditorContent } from '@tiptap/react'
+import StarterKit from '@tiptap/starter-kit'
+import { Bold, Italic, Strikethrough, Paperclip, Underline } from 'lucide-react'
+import { TextStyle } from '@tiptap/extension-text-style'
+import { Color } from '@tiptap/extension-color'
+import UnderlineExtension from '@tiptap/extension-underline'
+import { Extension } from '@tiptap/core'
+
+const FontSizeExtension = Extension.create({
+ name: 'fontSize',
+
+ addOptions() {
+ return {
+ types: ['textStyle'],
+ }
+ },
+
+ addGlobalAttributes() {
+ return [
+ {
+ types: this.options.types,
+ attributes: {
+ fontSize: {
+ default: null,
+ parseHTML: element => element.style.fontSize,
+ renderHTML: attributes => {
+ if (!attributes.fontSize) {
+ return {}
+ }
+ return {
+ style: `font-size: ${attributes.fontSize}`,
+ }
+ },
+ },
+ },
+ },
+ ]
+ },
+
+ addCommands() {
+ return {
+ setFontSize: (fontSize: string) => ({ chain }) => {
+ return chain()
+ .setMark('textStyle', { fontSize: `${fontSize}px` })
+ .run()
+ },
+ unsetFontSize: () => ({ chain }) => {
+ return chain()
+ .setMark('textStyle', { fontSize: null })
+ .run()
+ },
+ }
+ },
+})
+
+const Tiptap = ({ content, onChange }: { content: string, onChange: (richText: string) => void }) => {
+ const editor = useEditor({
+ extensions: [
+ StarterKit.configure(),
+ TextStyle.configure(),
+ Color.configure(),
+ UnderlineExtension,
+ FontSizeExtension,
+ ],
+ content: content,
+ editorProps: {
+ attributes: {
+ class:
+ 'prose dark:prose-invert prose-sm sm:prose-base lg:prose-lg xl:prose-2xl m-5 focus:outline-none',
+ },
+ },
+ onUpdate({ editor }) {
+ onChange(editor.getHTML())
+ },
+ immediatelyRender: false,
+ })
+
+ if (!editor) {
+ return null
+ }
+
+ const handleFontSizeChange = (e: React.ChangeEvent) => {
+ const size = e.target.value;
+ if (size) {
+ // @ts-ignore
+ editor.chain().focus().setFontSize(size).run();
+ } else {
+ // @ts-ignore
+ editor.chain().focus().unsetFontSize().run();
+ }
+ };
+
+ const handleColorChange = (e: React.ChangeEvent) => {
+ editor.chain().focus().setColor(e.target.value).run()
+ };
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+