forked from RiseUP/riseup-squad21
merge upstream
This commit is contained in:
commit
15ec825aaf
@ -19,19 +19,20 @@ interface AccessibilityContextProps {
|
||||
const AccessibilityContext = createContext<AccessibilityContextProps | undefined>(undefined);
|
||||
|
||||
export const AccessibilityProvider = ({ children }: { children: ReactNode }) => {
|
||||
const [theme, setThemeState] = useState<Theme>(() => {
|
||||
if (typeof window === 'undefined') return 'light';
|
||||
return (localStorage.getItem('accessibility-theme') as Theme) || 'light';
|
||||
});
|
||||
const [contrast, setContrastState] = useState<Contrast>(() => {
|
||||
if (typeof window === 'undefined') return 'normal';
|
||||
return (localStorage.getItem('accessibility-contrast') as Contrast) || 'normal';
|
||||
});
|
||||
const [fontSize, setFontSize] = useState<number>(() => {
|
||||
if (typeof window === 'undefined') return 16;
|
||||
const [theme, setThemeState] = useState<Theme>('light');
|
||||
const [contrast, setContrastState] = useState<Contrast>('normal');
|
||||
const [fontSize, setFontSize] = useState<number>(16);
|
||||
|
||||
useEffect(() => {
|
||||
const storedTheme = (localStorage.getItem('accessibility-theme') as Theme) || 'light';
|
||||
const storedContrast = (localStorage.getItem('accessibility-contrast') as Contrast) || 'normal';
|
||||
const storedSize = localStorage.getItem('accessibility-font-size');
|
||||
return storedSize ? parseFloat(storedSize) : 16;
|
||||
});
|
||||
setThemeState(storedTheme);
|
||||
setContrastState(storedContrast);
|
||||
if (storedSize) {
|
||||
setFontSize(parseFloat(storedSize));
|
||||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
const root = document.documentElement;
|
||||
|
||||
237
app/doctor/medicos/[id]/laudos/[laudoId]/editar/page.tsx
Normal file
237
app/doctor/medicos/[id]/laudos/[laudoId]/editar/page.tsx
Normal file
@ -0,0 +1,237 @@
|
||||
"use client";
|
||||
|
||||
import { useParams, useRouter } from "next/navigation";
|
||||
import { useState, useEffect } from "react";
|
||||
import DoctorLayout from "@/components/doctor-layout";
|
||||
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 { Dialog, DialogContent, DialogTrigger } from "@/components/ui/dialog";
|
||||
import { Calendar } from "@/components/ui/calendar";
|
||||
import { CalendarIcon } from "lucide-react";
|
||||
import { format } from "date-fns";
|
||||
import TiptapEditor from "@/components/ui/tiptap-editor";
|
||||
import { Skeleton } from "@/components/ui/skeleton";
|
||||
import { reportsApi } from "@/services/reportsApi.mjs";
|
||||
|
||||
export default function EditarLaudoPage() {
|
||||
const router = useRouter();
|
||||
const params = useParams();
|
||||
const patientId = params.id as string;
|
||||
const laudoId = params.laudoId as string;
|
||||
|
||||
const [formData, setFormData] = useState<any>({});
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
const [isDatePickerOpen, setIsDatePickerOpen] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (laudoId) {
|
||||
setLoading(true);
|
||||
reportsApi.getReportById(laudoId)
|
||||
.then((data: any) => {
|
||||
console.log("Fetched report data:", data);
|
||||
// The API now returns an array, get the first element
|
||||
const reportData = Array.isArray(data) && data.length > 0 ? data[0] : null;
|
||||
if (reportData) {
|
||||
setFormData({
|
||||
...reportData,
|
||||
due_at: reportData.due_at ? new Date(reportData.due_at) : null,
|
||||
});
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error("Failed to fetch report details:", error);
|
||||
// Here you could add a toast notification to inform the user
|
||||
})
|
||||
.finally(() => {
|
||||
setLoading(false);
|
||||
});
|
||||
} else {
|
||||
// If there's no laudoId, we shouldn't be in a loading state.
|
||||
setLoading(false);
|
||||
}
|
||||
}, [laudoId]);
|
||||
|
||||
const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
|
||||
const { id, value } = e.target;
|
||||
setFormData((prev: any) => ({ ...prev, [id]: value }));
|
||||
};
|
||||
|
||||
const handleSelectChange = (id: string, value: string) => {
|
||||
setFormData((prev: any) => ({ ...prev, [id]: value }));
|
||||
};
|
||||
|
||||
const handleCheckboxChange = (id: string, checked: boolean) => {
|
||||
setFormData((prev: any) => ({ ...prev, [id]: checked }));
|
||||
};
|
||||
|
||||
const handleDateChange = (date: Date | undefined) => {
|
||||
console.log("Date selected:", date);
|
||||
if (date) {
|
||||
setFormData((prev: any) => ({ ...prev, due_at: date }));
|
||||
}
|
||||
};
|
||||
|
||||
const handleDateSelect = (date: Date | undefined) => {
|
||||
handleDateChange(date);
|
||||
setIsDatePickerOpen(false); // Close the dialog after selection
|
||||
};
|
||||
|
||||
const handleEditorChange = (html: string, json: object) => {
|
||||
setFormData((prev: any) => ({
|
||||
...prev,
|
||||
content_html: html,
|
||||
content_json: json
|
||||
}));
|
||||
};
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setIsSubmitting(true);
|
||||
try {
|
||||
const { id, patient_id, created_at, updated_at, created_by, updated_by, ...updateData } = formData;
|
||||
await reportsApi.updateReport(laudoId, updateData);
|
||||
// toast({ title: "Laudo atualizado com sucesso!" });
|
||||
router.push(`/doctor/medicos/${patientId}/laudos`);
|
||||
} catch (error) {
|
||||
console.error("Failed to update laudo", error);
|
||||
// toast({ title: "Erro ao atualizar laudo", variant: "destructive" });
|
||||
} finally {
|
||||
setIsSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<DoctorLayout>
|
||||
<div className="container mx-auto p-4">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<Skeleton className="h-8 w-1/4" />
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-6">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div className="space-y-2"><Skeleton className="h-4 w-1/6" /><Skeleton className="h-10 w-full" /></div>
|
||||
<div className="space-y-2"><Skeleton className="h-4 w-1/6" /><Skeleton className="h-10 w-full" /></div>
|
||||
<div className="space-y-2"><Skeleton className="h-4 w-1/6" /><Skeleton className="h-10 w-full" /></div>
|
||||
<div className="space-y-2"><Skeleton className="h-4 w-1/6" /><Skeleton className="h-10 w-full" /></div>
|
||||
</div>
|
||||
<div className="space-y-2"><Skeleton className="h-4 w-1/6" /><Skeleton className="h-24 w-full" /></div>
|
||||
<div className="space-y-2"><Skeleton className="h-4 w-1/6" /><Skeleton className="h-40 w-full" /></div>
|
||||
<div className="flex justify-end space-x-2">
|
||||
<Skeleton className="h-10 w-24" />
|
||||
<Skeleton className="h-10 w-24" />
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</DoctorLayout>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<DoctorLayout>
|
||||
<div className="container mx-auto p-4">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Editar Laudo - {formData.order_number}</CardTitle>
|
||||
</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="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)} value={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>
|
||||
<Dialog open={isDatePickerOpen} onOpenChange={setIsDatePickerOpen}>
|
||||
<DialogTrigger 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>
|
||||
</DialogTrigger>
|
||||
<DialogContent className="w-auto p-0">
|
||||
<Calendar
|
||||
mode="single"
|
||||
selected={formData.due_at ? new Date(formData.due_at) : undefined}
|
||||
onSelect={handleDateSelect}
|
||||
initialFocus
|
||||
/>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</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 Alterações"}
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</DoctorLayout>
|
||||
);
|
||||
}
|
||||
194
app/doctor/medicos/[id]/laudos/novo/page.tsx
Normal file
194
app/doctor/medicos/[id]/laudos/novo/page.tsx
Normal file
@ -0,0 +1,194 @@
|
||||
|
||||
"use client";
|
||||
|
||||
import { useParams, useRouter } from "next/navigation";
|
||||
import { useState } 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 { 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 { reportsApi } from "@/services/reportsApi.mjs";
|
||||
import DoctorLayout from "@/components/doctor-layout";
|
||||
|
||||
|
||||
|
||||
|
||||
export default function NovoLaudoPage() {
|
||||
const router = useRouter();
|
||||
const params = useParams();
|
||||
const patientId = params.id as string;
|
||||
|
||||
const [formData, setFormData] = useState({
|
||||
order_number: "",
|
||||
exam: "",
|
||||
diagnosis: "",
|
||||
conclusion: "",
|
||||
cid_code: "",
|
||||
content_html: "",
|
||||
content_json: {}, // Added for the JSON content from the editor
|
||||
status: "draft",
|
||||
requested_by: "",
|
||||
due_at: new Date(),
|
||||
hide_date: false,
|
||||
hide_signature: false,
|
||||
});
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
|
||||
const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
|
||||
const { id, value } = e.target;
|
||||
setFormData(prev => ({ ...prev, [id]: value }));
|
||||
};
|
||||
|
||||
const handleSelectChange = (id: string, value: string) => {
|
||||
setFormData(prev => ({ ...prev, [id]: value }));
|
||||
};
|
||||
|
||||
const handleCheckboxChange = (id: string, checked: boolean) => {
|
||||
setFormData(prev => ({ ...prev, [id]: checked }));
|
||||
};
|
||||
|
||||
const handleDateChange = (date: Date | undefined) => {
|
||||
if (date) {
|
||||
setFormData(prev => ({ ...prev, due_at: date }));
|
||||
}
|
||||
};
|
||||
|
||||
// Updated to handle both HTML and JSON from the editor
|
||||
const handleEditorChange = (html: string, json: object) => {
|
||||
setFormData(prev => ({
|
||||
...prev,
|
||||
content_html: html,
|
||||
content_json: json
|
||||
}));
|
||||
};
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setIsSubmitting(true);
|
||||
try {
|
||||
const laudoData = {
|
||||
...formData,
|
||||
patient_id: patientId,
|
||||
due_at: formData.due_at.toISOString(), // Ensure date is in ISO format for the API
|
||||
};
|
||||
|
||||
await reportsApi.createReport(laudoData);
|
||||
|
||||
// You can use a toast notification here for better user feedback
|
||||
// toast({ title: "Laudo criado com sucesso!" });
|
||||
|
||||
router.push(`/doctor/medicos/${patientId}/laudos`);
|
||||
} catch (error: any) {
|
||||
console.error("Failed to create laudo", error);
|
||||
// You can use a toast notification for errors
|
||||
// toast({ title: "Erro ao criar laudo", description: error.message, variant: "destructive" });
|
||||
} finally {
|
||||
setIsSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<DoctorLayout>
|
||||
<div className="container mx-auto p-4">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Criar Novo Laudo</CardTitle>
|
||||
</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="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(formData.due_at, "PPP") : <span>Escolha uma data</span>}
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent className="w-auto p-0">
|
||||
<Calendar mode="single" selected={formData.due_at} 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>
|
||||
</DoctorLayout>
|
||||
);
|
||||
}
|
||||
@ -1,60 +1,128 @@
|
||||
"use client";
|
||||
'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";
|
||||
import { useState, useEffect } from 'react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
|
||||
import Link from 'next/link';
|
||||
import { useParams } from 'next/navigation';
|
||||
import { api } from '@/services/api.mjs';
|
||||
import { reportsApi } from '@/services/reportsApi.mjs';
|
||||
import DoctorLayout from '@/components/doctor-layout';
|
||||
|
||||
const Tiptap = dynamic(() => import("@/components/ui/tiptap-editor"), { ssr: false });
|
||||
export default function LaudosPage() {
|
||||
const [patient, setPatient] = useState(null);
|
||||
const [laudos, setLaudos] = useState([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const params = useParams();
|
||||
const patientId = params.id as string;
|
||||
|
||||
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;
|
||||
const [currentPage, setCurrentPage] = useState(1);
|
||||
const [itemsPerPage] = useState(5);
|
||||
|
||||
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(`<p>Laudo para o paciente ${paciente?.nome || ""}</p>`);
|
||||
}
|
||||
}, [pacienteId, paciente?.nome]);
|
||||
useEffect(() => {
|
||||
if (patientId) {
|
||||
const fetchPatientAndLaudos = async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const patientData = await api.get(`/rest/v1/patients?id=eq.${patientId}&select=*`).then(r => r?.[0]);
|
||||
setPatient(patientData);
|
||||
|
||||
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 laudosData = await reportsApi.getReports(patientId);
|
||||
setLaudos(laudosData);
|
||||
} catch (error) {
|
||||
console.error("Failed to fetch data:", error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleContentChange = (richText: string) => {
|
||||
setLaudoContent(richText);
|
||||
};
|
||||
fetchPatientAndLaudos();
|
||||
}
|
||||
}, [patientId]);
|
||||
|
||||
const handleCancel = () => {
|
||||
router.back();
|
||||
};
|
||||
const indexOfLastItem = currentPage * itemsPerPage;
|
||||
const indexOfFirstItem = indexOfLastItem - itemsPerPage;
|
||||
const currentItems = laudos.slice(indexOfFirstItem, indexOfLastItem);
|
||||
const totalPages = Math.ceil(laudos.length / itemsPerPage);
|
||||
|
||||
return (
|
||||
<DoctorLayout>
|
||||
<div className="space-y-6">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-gray-900">Editor de Laudo</h1>
|
||||
{paciente && <p className="text-gray-600">Editando laudo de: {paciente.nome}</p>}
|
||||
</div>
|
||||
const paginate = (pageNumber) => setCurrentPage(pageNumber);
|
||||
|
||||
<div className="bg-white rounded-lg border border-gray-200 p-6">
|
||||
<Tiptap content={laudoContent} onChange={handleContentChange} />
|
||||
</div>
|
||||
|
||||
<div className="flex justify-end gap-4">
|
||||
<Button variant="outline" onClick={handleCancel}>Cancelar</Button>
|
||||
<Button onClick={handleSave}>Salvar Laudo</Button>
|
||||
</div>
|
||||
</div>
|
||||
</DoctorLayout>
|
||||
);
|
||||
return (
|
||||
<DoctorLayout>
|
||||
<div className="container mx-auto p-4">
|
||||
{loading ? (
|
||||
<p>Carregando...</p>
|
||||
) : (
|
||||
<>
|
||||
{patient && (
|
||||
<Card className="mb-4">
|
||||
<CardHeader>
|
||||
<CardTitle>Informações do Paciente</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p><strong>Nome:</strong> {patient.full_name}</p>
|
||||
<p><strong>Email:</strong> {patient.email}</p>
|
||||
<p><strong>Telefone:</strong> {patient.phone_mobile}</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
<Card>
|
||||
<CardHeader className="flex flex-row items-center justify-between">
|
||||
<CardTitle>Laudos do Paciente</CardTitle>
|
||||
<Link href={`/doctor/medicos/${patientId}/laudos/novo`}>
|
||||
<Button>Criar Novo Laudo</Button>
|
||||
</Link>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>Nº do Pedido</TableHead>
|
||||
<TableHead>Exame</TableHead>
|
||||
<TableHead>Diagnóstico</TableHead>
|
||||
<TableHead>Status</TableHead>
|
||||
<TableHead>Data de Criação</TableHead>
|
||||
<TableHead>Ações</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{currentItems.length > 0 ? (
|
||||
currentItems.map((laudo) => (
|
||||
<TableRow key={laudo.id}>
|
||||
<TableCell>{laudo.order_number}</TableCell>
|
||||
<TableCell>{laudo.exam}</TableCell>
|
||||
<TableCell>{laudo.diagnosis}</TableCell>
|
||||
<TableCell>{laudo.status}</TableCell>
|
||||
<TableCell>{new Date(laudo.created_at).toLocaleDateString()}</TableCell>
|
||||
<TableCell>
|
||||
<Link href={`/doctor/medicos/${patientId}/laudos/${laudo.id}/editar`}>
|
||||
<Button variant="outline" size="sm">Editar</Button>
|
||||
</Link>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))
|
||||
) : (
|
||||
<TableRow>
|
||||
<TableCell colSpan={6} className="text-center">Nenhum laudo encontrado.</TableCell>
|
||||
</TableRow>
|
||||
)}
|
||||
</TableBody>
|
||||
</Table>
|
||||
{totalPages > 1 && (
|
||||
<div className="flex justify-center space-x-2 mt-4 p-4">
|
||||
{Array.from({ length: totalPages }, (_, i) => (
|
||||
<Button key={i} onClick={() => paginate(i + 1)} variant={currentPage === i + 1 ? 'default' : 'outline'}>
|
||||
{i + 1}
|
||||
</Button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</DoctorLayout>
|
||||
);
|
||||
}
|
||||
@ -1,288 +1,343 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import Link from "next/link";
|
||||
import { toast } from "sonner";
|
||||
import { useAppointments, Appointment } from "../../context/AppointmentsContext";
|
||||
|
||||
// Componentes de UI e Ícones
|
||||
import { useState, useEffect } from "react";
|
||||
import PatientLayout from "@/components/patient-layout";
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogClose } from "@/components/ui/dialog";
|
||||
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { Textarea } from "@/components/ui/textarea";
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
||||
import { Calendar, Clock, MapPin, Phone, CalendarDays, X, Trash2 } from "lucide-react";
|
||||
import { Calendar, Clock, MapPin, Phone, User, X, CalendarDays } from "lucide-react";
|
||||
import { toast } from "sonner";
|
||||
|
||||
export default function PatientAppointmentsPage() {
|
||||
const { appointments, updateAppointment, deleteAppointment } = useAppointments();
|
||||
import { appointmentsService } from "@/services/appointmentsApi.mjs";
|
||||
import { patientsService } from "@/services/patientsApi.mjs";
|
||||
import { doctorsService } from "@/services/doctorsApi.mjs";
|
||||
|
||||
// Estados para controlar os modais e os dados do formulário
|
||||
const [isRescheduleModalOpen, setRescheduleModalOpen] = useState(false);
|
||||
const [isCancelModalOpen, setCancelModalOpen] = useState(false);
|
||||
const [selectedAppointment, setSelectedAppointment] = useState<Appointment | null>(null);
|
||||
const APPOINTMENTS_STORAGE_KEY = "clinic-appointments";
|
||||
|
||||
const [rescheduleData, setRescheduleData] = useState({ date: "", time: "", reason: "" });
|
||||
const [cancelReason, setCancelReason] = useState("");
|
||||
// Simulação do paciente logado
|
||||
const LOGGED_PATIENT_ID = "P001";
|
||||
|
||||
// --- MANIPULADORES DE EVENTOS ---
|
||||
export default function PatientAppointments() {
|
||||
const [appointments, setAppointments] = useState<any[]>([]);
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const [selectedAppointment, setSelectedAppointment] = useState<any>(null);
|
||||
|
||||
const handleRescheduleClick = (appointment: Appointment) => {
|
||||
setSelectedAppointment(appointment);
|
||||
// Preenche o formulário com os dados atuais da consulta
|
||||
setRescheduleData({ date: appointment.date, time: appointment.time, reason: appointment.observations || "" });
|
||||
setRescheduleModalOpen(true);
|
||||
};
|
||||
// Modais
|
||||
const [rescheduleModal, setRescheduleModal] = useState(false);
|
||||
const [cancelModal, setCancelModal] = useState(false);
|
||||
|
||||
const handleCancelClick = (appointment: Appointment) => {
|
||||
setSelectedAppointment(appointment);
|
||||
setCancelReason(""); // Limpa o motivo ao abrir
|
||||
setCancelModalOpen(true);
|
||||
};
|
||||
// Formulário de reagendamento/cancelamento
|
||||
const [rescheduleData, setRescheduleData] = useState({ date: "", time: "", reason: "" });
|
||||
const [cancelReason, setCancelReason] = useState("");
|
||||
|
||||
const confirmReschedule = () => {
|
||||
if (!rescheduleData.date || !rescheduleData.time) {
|
||||
toast.error("Por favor, selecione uma nova data e horário");
|
||||
return;
|
||||
}
|
||||
if (selectedAppointment) {
|
||||
updateAppointment(selectedAppointment.id, {
|
||||
date: rescheduleData.date,
|
||||
time: rescheduleData.time,
|
||||
observations: rescheduleData.reason, // Atualiza as observações com o motivo
|
||||
});
|
||||
toast.success("Consulta reagendada com sucesso!");
|
||||
setRescheduleModalOpen(false);
|
||||
}
|
||||
};
|
||||
const timeSlots = [
|
||||
"08:00",
|
||||
"08:30",
|
||||
"09:00",
|
||||
"09:30",
|
||||
"10:00",
|
||||
"10:30",
|
||||
"11:00",
|
||||
"11:30",
|
||||
"14:00",
|
||||
"14:30",
|
||||
"15:00",
|
||||
"15:30",
|
||||
"16:00",
|
||||
"16:30",
|
||||
"17:00",
|
||||
"17:30",
|
||||
];
|
||||
|
||||
const confirmCancel = () => {
|
||||
if (cancelReason.trim().length < 10) {
|
||||
toast.error("Por favor, forneça um motivo com pelo menos 10 caracteres.");
|
||||
return;
|
||||
}
|
||||
if (selectedAppointment) {
|
||||
// Apenas atualiza o status e adiciona o motivo do cancelamento nas observações
|
||||
updateAppointment(selectedAppointment.id, {
|
||||
status: "Cancelada",
|
||||
observations: `Motivo do cancelamento: ${cancelReason}`
|
||||
});
|
||||
toast.success("Consulta cancelada com sucesso!");
|
||||
setCancelModalOpen(false);
|
||||
}
|
||||
};
|
||||
const fetchData = async () => {
|
||||
setIsLoading(true);
|
||||
try {
|
||||
const [appointmentList, patientList, doctorList] = await Promise.all([
|
||||
appointmentsService.list(),
|
||||
patientsService.list(),
|
||||
doctorsService.list(),
|
||||
]);
|
||||
|
||||
const handleDeleteClick = (appointmentId: string) => {
|
||||
if (window.confirm("Tem certeza que deseja excluir permanentemente esta consulta? Esta ação não pode ser desfeita.")) {
|
||||
deleteAppointment(appointmentId);
|
||||
toast.success("Consulta excluída do histórico.");
|
||||
}
|
||||
};
|
||||
const doctorMap = new Map(doctorList.map((d: any) => [d.id, d]));
|
||||
const patientMap = new Map(patientList.map((p: any) => [p.id, p]));
|
||||
|
||||
// --- LÓGICA AUXILIAR ---
|
||||
// Filtra apenas as consultas do paciente logado
|
||||
const patientAppointments = appointmentList
|
||||
.filter((apt: any) => apt.patient_id === LOGGED_PATIENT_ID)
|
||||
.map((apt: any) => ({
|
||||
...apt,
|
||||
doctor: doctorMap.get(apt.doctor_id) || { full_name: "Médico não encontrado", specialty: "N/A" },
|
||||
patient: patientMap.get(apt.patient_id) || { full_name: "Paciente não encontrado" },
|
||||
}));
|
||||
|
||||
const getStatusBadge = (status: Appointment['status']) => {
|
||||
switch (status) {
|
||||
case "Agendada": return <Badge className="bg-blue-100 text-blue-800 font-medium">Agendada</Badge>;
|
||||
case "Realizada": return <Badge className="bg-green-100 text-green-800 font-medium">Realizada</Badge>;
|
||||
case "Cancelada": return <Badge className="bg-red-100 text-red-800 font-medium">Cancelada</Badge>;
|
||||
}
|
||||
};
|
||||
setAppointments(patientAppointments);
|
||||
} catch (error) {
|
||||
console.error("Erro ao carregar consultas:", error);
|
||||
toast.error("Não foi possível carregar suas consultas.");
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const timeSlots = ["08:00", "08:30", "09:00", "09:30", "10:00", "10:30", "14:00", "14:30", "15:00", "15:30"];
|
||||
const today = new Date();
|
||||
today.setHours(0, 0, 0, 0); // Zera o horário para comparar apenas o dia
|
||||
useEffect(() => {
|
||||
fetchData();
|
||||
}, []);
|
||||
|
||||
// ETAPA 1: ORDENAÇÃO DAS CONSULTAS
|
||||
// Cria uma cópia do array e o ordena
|
||||
const sortedAppointments = [...appointments].sort((a, b) => {
|
||||
const statusWeight = { 'Agendada': 1, 'Realizada': 2, 'Cancelada': 3 };
|
||||
const getStatusBadge = (status: string) => {
|
||||
switch (status) {
|
||||
case "requested":
|
||||
return <Badge className="bg-yellow-100 text-yellow-800">Solicitada</Badge>;
|
||||
case "confirmed":
|
||||
return <Badge className="bg-blue-100 text-blue-800">Confirmada</Badge>;
|
||||
case "checked_in":
|
||||
return <Badge className="bg-indigo-100 text-indigo-800">Check-in</Badge>;
|
||||
case "completed":
|
||||
return <Badge className="bg-green-100 text-green-800">Realizada</Badge>;
|
||||
case "cancelled":
|
||||
return <Badge className="bg-red-100 text-red-800">Cancelada</Badge>;
|
||||
default:
|
||||
return <Badge variant="secondary">{status}</Badge>;
|
||||
}
|
||||
};
|
||||
|
||||
// Primeiro, ordena por status (Agendada vem primeiro)
|
||||
if (statusWeight[a.status] !== statusWeight[b.status]) {
|
||||
return statusWeight[a.status] - statusWeight[b.status];
|
||||
}
|
||||
const handleReschedule = (appointment: any) => {
|
||||
setSelectedAppointment(appointment);
|
||||
setRescheduleData({ date: "", time: "", reason: "" });
|
||||
setRescheduleModal(true);
|
||||
};
|
||||
|
||||
// Se o status for o mesmo, ordena por data (mais recente/futura no topo)
|
||||
return new Date(b.date).getTime() - new Date(a.date).getTime();
|
||||
});
|
||||
const handleCancel = (appointment: any) => {
|
||||
setSelectedAppointment(appointment);
|
||||
setCancelReason("");
|
||||
setCancelModal(true);
|
||||
};
|
||||
|
||||
return (
|
||||
<PatientLayout>
|
||||
<div className="space-y-8">
|
||||
<div className="flex justify-between items-center">
|
||||
const confirmReschedule = async () => {
|
||||
if (!rescheduleData.date || !rescheduleData.time) {
|
||||
toast.error("Por favor, selecione uma nova data e horário.");
|
||||
return;
|
||||
}
|
||||
try {
|
||||
const newScheduledAt = new Date(`${rescheduleData.date}T${rescheduleData.time}:00Z`).toISOString();
|
||||
|
||||
await appointmentsService.update(selectedAppointment.id, {
|
||||
scheduled_at: newScheduledAt,
|
||||
status: "requested",
|
||||
});
|
||||
|
||||
setAppointments((prev) =>
|
||||
prev.map((apt) =>
|
||||
apt.id === selectedAppointment.id ? { ...apt, scheduled_at: newScheduledAt, status: "requested" } : apt
|
||||
)
|
||||
);
|
||||
|
||||
setRescheduleModal(false);
|
||||
toast.success("Consulta reagendada com sucesso!");
|
||||
} catch (error) {
|
||||
console.error("Erro ao reagendar consulta:", error);
|
||||
toast.error("Não foi possível reagendar a consulta.");
|
||||
}
|
||||
};
|
||||
|
||||
const confirmCancel = async () => {
|
||||
if (!cancelReason.trim() || cancelReason.trim().length < 10) {
|
||||
toast.error("Por favor, informe um motivo de cancelamento (mínimo 10 caracteres).");
|
||||
return;
|
||||
}
|
||||
try {
|
||||
await appointmentsService.update(selectedAppointment.id, {
|
||||
status: "cancelled",
|
||||
cancel_reason: cancelReason,
|
||||
});
|
||||
|
||||
setAppointments((prev) =>
|
||||
prev.map((apt) =>
|
||||
apt.id === selectedAppointment.id ? { ...apt, status: "cancelled" } : apt
|
||||
)
|
||||
);
|
||||
|
||||
setCancelModal(false);
|
||||
toast.success("Consulta cancelada com sucesso!");
|
||||
} catch (error) {
|
||||
console.error("Erro ao cancelar consulta:", error);
|
||||
toast.error("Não foi possível cancelar a consulta.");
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<PatientLayout>
|
||||
<div className="space-y-6">
|
||||
<div className="flex justify-between items-center">
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold text-gray-900">Minhas Consultas</h1>
|
||||
<p className="text-gray-600">Veja, reagende ou cancele suas consultas</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-6">
|
||||
{isLoading ? (
|
||||
<p>Carregando suas consultas...</p>
|
||||
) : appointments.length > 0 ? (
|
||||
appointments.map((appointment) => (
|
||||
<Card key={appointment.id}>
|
||||
<CardHeader>
|
||||
<div className="flex justify-between items-start">
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold text-gray-900">Minhas Consultas</h1>
|
||||
<p className="text-gray-600">Histórico e consultas agendadas</p>
|
||||
<CardTitle className="text-lg">{appointment.doctor.full_name}</CardTitle>
|
||||
<CardDescription>{appointment.doctor.specialty}</CardDescription>
|
||||
</div>
|
||||
<Link href="/patient/schedule">
|
||||
<Button className="bg-gray-800 hover:bg-gray-900 text-white">
|
||||
<Calendar className="mr-2 h-4 w-4" />
|
||||
Agendar Nova Consulta
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
{getStatusBadge(appointment.status)}
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="grid md:grid-cols-2 gap-3">
|
||||
<div className="space-y-2 text-sm text-gray-700">
|
||||
<div className="flex items-center">
|
||||
<Calendar className="mr-2 h-4 w-4 text-gray-500" />
|
||||
{new Date(appointment.scheduled_at).toLocaleDateString("pt-BR", { timeZone: "UTC" })}
|
||||
</div>
|
||||
<div className="flex items-center">
|
||||
<Clock className="mr-2 h-4 w-4 text-gray-500" />
|
||||
{new Date(appointment.scheduled_at).toLocaleTimeString("pt-BR", {
|
||||
hour: "2-digit",
|
||||
minute: "2-digit",
|
||||
timeZone: "UTC",
|
||||
})}
|
||||
</div>
|
||||
<div className="flex items-center">
|
||||
<MapPin className="mr-2 h-4 w-4 text-gray-500" />
|
||||
{appointment.doctor.location || "Local a definir"}
|
||||
</div>
|
||||
<div className="flex items-center">
|
||||
<Phone className="mr-2 h-4 w-4 text-gray-500" />
|
||||
{appointment.doctor.phone || "N/A"}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-6">
|
||||
{/* Utiliza o array ORDENADO para a renderização */}
|
||||
{sortedAppointments.map((appointment) => {
|
||||
const appointmentDate = new Date(appointment.date);
|
||||
let displayStatus = appointment.status;
|
||||
{appointment.status !== "cancelled" && (
|
||||
<div className="flex gap-2 mt-4 pt-4 border-t">
|
||||
<Button variant="outline" size="sm" onClick={() => handleReschedule(appointment)}>
|
||||
<CalendarDays className="mr-2 h-4 w-4" />
|
||||
Reagendar
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="text-red-600 hover:text-red-700 hover:bg-red-50"
|
||||
onClick={() => handleCancel(appointment)}
|
||||
>
|
||||
<X className="mr-2 h-4 w-4" />
|
||||
Cancelar
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
))
|
||||
) : (
|
||||
<p className="text-gray-600">Você ainda não possui consultas agendadas.</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
if (appointment.status === 'Agendada' && appointmentDate < today) {
|
||||
displayStatus = 'Realizada';
|
||||
}
|
||||
|
||||
return (
|
||||
<Card key={appointment.id} className="overflow-hidden">
|
||||
<CardHeader>
|
||||
<div className="flex justify-between items-start">
|
||||
<div>
|
||||
<CardTitle className="text-xl">{appointment.doctorName}</CardTitle>
|
||||
<CardDescription>{appointment.specialty}</CardDescription>
|
||||
</div>
|
||||
{getStatusBadge(displayStatus)}
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="grid md:grid-cols-2 gap-x-8 gap-y-4 mb-6">
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center text-sm text-gray-700">
|
||||
<Calendar className="mr-3 h-4 w-4 text-gray-500" />
|
||||
{new Date(appointment.date).toLocaleDateString("pt-BR", { timeZone: 'UTC' })}
|
||||
</div>
|
||||
<div className="flex items-center text-sm text-gray-700">
|
||||
<Clock className="mr-3 h-4 w-4 text-gray-500" />
|
||||
{appointment.time}
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center text-sm text-gray-700">
|
||||
<MapPin className="mr-3 h-4 w-4 text-gray-500" />
|
||||
{appointment.location || 'Local não informado'}
|
||||
</div>
|
||||
<div className="flex items-center text-sm text-gray-700">
|
||||
<Phone className="mr-3 h-4 w-4 text-gray-500" />
|
||||
{appointment.phone || 'Telefone não informado'}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Container ÚNICO para todas as ações */}
|
||||
<div className="flex gap-2 pt-4 border-t">
|
||||
{(displayStatus === "Agendada") && (
|
||||
<>
|
||||
<Button variant="outline" size="sm" onClick={() => handleRescheduleClick(appointment)}>
|
||||
<CalendarDays className="mr-2 h-4 w-4" />
|
||||
Reagendar
|
||||
</Button>
|
||||
<Button variant="ghost" size="sm" className="text-orange-600 hover:text-orange-700 hover:bg-orange-50" onClick={() => handleCancelClick(appointment)}>
|
||||
<X className="mr-2 h-4 w-4" />
|
||||
Cancelar
|
||||
</Button>
|
||||
</>
|
||||
)}
|
||||
|
||||
{(displayStatus === "Realizada" || displayStatus === "Cancelada") && (
|
||||
<Button variant="ghost" size="sm" className="text-red-600 hover:text-red-700 hover:bg-red-50" onClick={() => handleDeleteClick(appointment.id)}>
|
||||
<Trash2 className="mr-2 h-4 w-4" />
|
||||
Excluir do Histórico
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
{/* MODAL DE REAGENDAMENTO */}
|
||||
<Dialog open={rescheduleModal} onOpenChange={setRescheduleModal}>
|
||||
<DialogContent className="sm:max-w-[425px]">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Reagendar Consulta</DialogTitle>
|
||||
<DialogDescription>
|
||||
Escolha uma nova data e horário para sua consulta com{" "}
|
||||
<strong>{selectedAppointment?.doctor?.full_name}</strong>.
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<div className="grid gap-4 py-4">
|
||||
<div className="grid gap-2">
|
||||
<Label htmlFor="date">Nova Data</Label>
|
||||
<Input
|
||||
id="date"
|
||||
type="date"
|
||||
value={rescheduleData.date}
|
||||
onChange={(e) => setRescheduleData((prev) => ({ ...prev, date: e.target.value }))}
|
||||
min={new Date().toISOString().split("T")[0]}
|
||||
/>
|
||||
</div>
|
||||
<div className="grid gap-2">
|
||||
<Label htmlFor="time">Novo Horário</Label>
|
||||
<Select
|
||||
value={rescheduleData.time}
|
||||
onValueChange={(value) => setRescheduleData((prev) => ({ ...prev, time: value }))}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Selecione um horário" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{timeSlots.map((time) => (
|
||||
<SelectItem key={time} value={time}>
|
||||
{time}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div className="grid gap-2">
|
||||
<Label htmlFor="reason">Motivo (opcional)</Label>
|
||||
<Textarea
|
||||
id="reason"
|
||||
placeholder="Explique brevemente o motivo do reagendamento..."
|
||||
value={rescheduleData.reason}
|
||||
onChange={(e) => setRescheduleData((prev) => ({ ...prev, reason: e.target.value }))}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<DialogFooter>
|
||||
<Button variant="outline" onClick={() => setRescheduleModal(false)}>
|
||||
Cancelar
|
||||
</Button>
|
||||
<Button onClick={confirmReschedule}>Confirmar</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
{/* ETAPA 2: CONSTRUÇÃO DOS MODAIS */}
|
||||
|
||||
{/* Modal de Reagendamento */}
|
||||
<Dialog open={isRescheduleModalOpen} onOpenChange={setRescheduleModalOpen}>
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>Reagendar Consulta</DialogTitle>
|
||||
<DialogDescription>
|
||||
Reagendar consulta com {selectedAppointment?.doctorName}.
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<div className="grid gap-4 py-4">
|
||||
<div className="grid grid-cols-4 items-center gap-4">
|
||||
<Label htmlFor="date" className="text-right">Nova Data</Label>
|
||||
<Input
|
||||
id="date"
|
||||
type="date"
|
||||
value={rescheduleData.date}
|
||||
onChange={(e) => setRescheduleData({...rescheduleData, date: e.target.value})}
|
||||
className="col-span-3"
|
||||
/>
|
||||
</div>
|
||||
<div className="grid grid-cols-4 items-center gap-4">
|
||||
<Label htmlFor="time" className="text-right">Novo Horário</Label>
|
||||
<Select
|
||||
value={rescheduleData.time}
|
||||
onValueChange={(value) => setRescheduleData({...rescheduleData, time: value})}
|
||||
>
|
||||
<SelectTrigger className="col-span-3">
|
||||
<SelectValue placeholder="Selecione um horário" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{timeSlots.map(time => <SelectItem key={time} value={time}>{time}</SelectItem>)}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div className="grid grid-cols-4 items-center gap-4">
|
||||
<Label htmlFor="reason" className="text-right">Motivo</Label>
|
||||
<Textarea
|
||||
id="reason"
|
||||
placeholder="Informe o motivo do reagendamento (opcional)"
|
||||
value={rescheduleData.reason}
|
||||
onChange={(e) => setRescheduleData({...rescheduleData, reason: e.target.value})}
|
||||
className="col-span-3"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<DialogFooter>
|
||||
<DialogClose asChild>
|
||||
<Button type="button" variant="outline">Cancelar</Button>
|
||||
</DialogClose>
|
||||
<Button type="button" onClick={confirmReschedule}>Confirmar Reagendamento</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
{/* Modal de Cancelamento */}
|
||||
<Dialog open={isCancelModalOpen} onOpenChange={setCancelModalOpen}>
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>Cancelar Consulta</DialogTitle>
|
||||
<DialogDescription>
|
||||
Você tem certeza que deseja cancelar sua consulta com {selectedAppointment?.doctorName}? Esta ação não pode ser desfeita.
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<div className="py-4">
|
||||
<Label htmlFor="cancelReason">Motivo do Cancelamento (obrigatório)</Label>
|
||||
<Textarea
|
||||
id="cancelReason"
|
||||
placeholder="Por favor, descreva o motivo do cancelamento..."
|
||||
value={cancelReason}
|
||||
onChange={(e) => setCancelReason(e.target.value)}
|
||||
className="mt-2"
|
||||
/>
|
||||
</div>
|
||||
<DialogFooter>
|
||||
<DialogClose asChild>
|
||||
<Button type="button" variant="outline">Voltar</Button>
|
||||
</DialogClose>
|
||||
<Button type="button" variant="destructive" onClick={confirmCancel}>Confirmar Cancelamento</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</PatientLayout>
|
||||
);
|
||||
{/* MODAL DE CANCELAMENTO */}
|
||||
<Dialog open={cancelModal} onOpenChange={setCancelModal}>
|
||||
<DialogContent className="sm:max-w-[425px]">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Cancelar Consulta</DialogTitle>
|
||||
<DialogDescription>
|
||||
Deseja realmente cancelar sua consulta com{" "}
|
||||
<strong>{selectedAppointment?.doctor?.full_name}</strong>?
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<div className="grid gap-4 py-4">
|
||||
<div className="grid gap-2">
|
||||
<Label htmlFor="cancel-reason" className="text-sm font-medium">
|
||||
Motivo do Cancelamento <span className="text-red-500">*</span>
|
||||
</Label>
|
||||
<Textarea
|
||||
id="cancel-reason"
|
||||
placeholder="Informe o motivo do cancelamento (mínimo 10 caracteres)"
|
||||
value={cancelReason}
|
||||
onChange={(e) => setCancelReason(e.target.value)}
|
||||
className="min-h-[100px]"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<DialogFooter>
|
||||
<Button variant="outline" onClick={() => setCancelModal(false)}>
|
||||
Voltar
|
||||
</Button>
|
||||
<Button variant="destructive" onClick={confirmCancel}>
|
||||
Confirmar Cancelamento
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</PatientLayout>
|
||||
);
|
||||
}
|
||||
@ -1,8 +1,7 @@
|
||||
"use client"
|
||||
|
||||
import type React from "react"
|
||||
import { useState, useEffect, useCallback } from "react"
|
||||
// Importações de componentes omitidas para brevidade, mas estão no código original
|
||||
import { Calendar, Clock, User } from "lucide-react"
|
||||
import PatientLayout from "@/components/patient-layout"
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
|
||||
import { Button } from "@/components/ui/button"
|
||||
@ -10,49 +9,53 @@ import { Input } from "@/components/ui/input"
|
||||
import { Label } from "@/components/ui/label"
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
|
||||
import { Textarea } from "@/components/ui/textarea"
|
||||
import { Calendar, Clock, User } from "lucide-react"
|
||||
import { doctorsService } from "services/doctorsApi.mjs";
|
||||
import { doctorsService } from "services/doctorsApi.mjs"
|
||||
|
||||
interface Doctor {
|
||||
id: string;
|
||||
full_name: string;
|
||||
specialty: string;
|
||||
phone_mobile: string;
|
||||
|
||||
id: string
|
||||
full_name: string
|
||||
specialty: string
|
||||
phone_mobile: string
|
||||
}
|
||||
|
||||
// Chave do LocalStorage, a mesma usada em secretarypage.tsx
|
||||
const APPOINTMENTS_STORAGE_KEY = "clinic-appointments";
|
||||
const APPOINTMENTS_STORAGE_KEY = "clinic-appointments"
|
||||
|
||||
export default function ScheduleAppointment() {
|
||||
const [selectedDoctor, setSelectedDoctor] = useState("")
|
||||
const [selectedDate, setSelectedDate] = useState("")
|
||||
const [selectedTime, setSelectedTime] = useState("")
|
||||
const [notes, setNotes] = useState("")
|
||||
const [doctors, setDoctors] = useState<Doctor[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
// novos campos
|
||||
const [tipoConsulta, setTipoConsulta] = useState("presencial")
|
||||
const [duracao, setDuracao] = useState("30")
|
||||
const [convenio, setConvenio] = useState("")
|
||||
const [queixa, setQueixa] = useState("")
|
||||
const [obsPaciente, setObsPaciente] = useState("")
|
||||
const [obsInternas, setObsInternas] = useState("")
|
||||
|
||||
const [doctors, setDoctors] = useState<Doctor[]>([])
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
|
||||
const fetchDoctors = useCallback(async () => {
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
try {
|
||||
|
||||
const data: Doctor[] = await doctorsService.list();
|
||||
setDoctors(data || []);
|
||||
} catch (e: any) {
|
||||
console.error("Erro ao carregar lista de médicos:", e);
|
||||
setError("Não foi possível carregar a lista de médicos. Verifique a conexão com a API.");
|
||||
setDoctors([]);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, []);
|
||||
setLoading(true)
|
||||
setError(null)
|
||||
try {
|
||||
const data: Doctor[] = await doctorsService.list()
|
||||
setDoctors(data || [])
|
||||
} catch (e: any) {
|
||||
console.error("Erro ao carregar lista de médicos:", e)
|
||||
setError("Não foi possível carregar a lista de médicos. Verifique a conexão com a API.")
|
||||
setDoctors([])
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
fetchDoctors();
|
||||
}, [fetchDoctors]);
|
||||
fetchDoctors()
|
||||
}, [fetchDoctors])
|
||||
|
||||
const availableTimes = [
|
||||
"08:00",
|
||||
@ -73,49 +76,54 @@ export default function ScheduleAppointment() {
|
||||
e.preventDefault()
|
||||
|
||||
const doctorDetails = doctors.find((d) => d.id === selectedDoctor)
|
||||
|
||||
// --- SIMULAÇÃO DO PACIENTE LOGADO ---
|
||||
// Você só tem um usuário para cada role. Vamos simular um paciente:
|
||||
const patientDetails = {
|
||||
id: "P001",
|
||||
full_name: "Paciente Exemplo Único", // Este nome aparecerá na agenda do médico
|
||||
location: "Clínica Geral",
|
||||
phone: "(11) 98765-4321"
|
||||
};
|
||||
id: "P001",
|
||||
full_name: "Paciente Exemplo Único",
|
||||
location: "Clínica Geral",
|
||||
phone: "(11) 98765-4321",
|
||||
}
|
||||
|
||||
if (!patientDetails || !doctorDetails) {
|
||||
alert("Erro: Selecione o médico ou dados do paciente indisponíveis.");
|
||||
return;
|
||||
alert("Erro: Selecione o médico ou dados do paciente indisponíveis.")
|
||||
return
|
||||
}
|
||||
|
||||
const newAppointment = {
|
||||
id: new Date().getTime(), // ID único simples
|
||||
patientName: patientDetails.full_name,
|
||||
doctor: doctorDetails.full_name, // Nome completo do médico (necessário para a listagem)
|
||||
specialty: doctorDetails.specialty,
|
||||
date: selectedDate,
|
||||
time: selectedTime,
|
||||
status: "agendada",
|
||||
phone: patientDetails.phone,
|
||||
};
|
||||
id: new Date().getTime(),
|
||||
patientName: patientDetails.full_name,
|
||||
doctor: doctorDetails.full_name,
|
||||
specialty: doctorDetails.specialty,
|
||||
date: selectedDate,
|
||||
time: selectedTime,
|
||||
tipoConsulta,
|
||||
duracao,
|
||||
convenio,
|
||||
queixa,
|
||||
obsPaciente,
|
||||
obsInternas,
|
||||
notes,
|
||||
status: "agendada",
|
||||
phone: patientDetails.phone,
|
||||
}
|
||||
|
||||
// 1. Carrega agendamentos existentes
|
||||
const storedAppointmentsRaw = localStorage.getItem(APPOINTMENTS_STORAGE_KEY);
|
||||
const currentAppointments = storedAppointmentsRaw ? JSON.parse(storedAppointmentsRaw) : [];
|
||||
const storedAppointmentsRaw = localStorage.getItem(APPOINTMENTS_STORAGE_KEY)
|
||||
const currentAppointments = storedAppointmentsRaw ? JSON.parse(storedAppointmentsRaw) : []
|
||||
const updatedAppointments = [...currentAppointments, newAppointment]
|
||||
localStorage.setItem(APPOINTMENTS_STORAGE_KEY, JSON.stringify(updatedAppointments))
|
||||
|
||||
// 2. Adiciona o novo agendamento
|
||||
const updatedAppointments = [...currentAppointments, newAppointment];
|
||||
alert(`Consulta com ${doctorDetails.full_name} agendada com sucesso!`)
|
||||
|
||||
// 3. Salva a lista atualizada no LocalStorage
|
||||
localStorage.setItem(APPOINTMENTS_STORAGE_KEY, JSON.stringify(updatedAppointments));
|
||||
|
||||
alert(`Consulta com ${doctorDetails.full_name} agendada com sucesso!`);
|
||||
|
||||
// Limpar o formulário após o sucesso (opcional)
|
||||
setSelectedDoctor("");
|
||||
setSelectedDate("");
|
||||
setSelectedTime("");
|
||||
setNotes("");
|
||||
// resetar campos
|
||||
setSelectedDoctor("")
|
||||
setSelectedDate("")
|
||||
setSelectedTime("")
|
||||
setNotes("")
|
||||
setTipoConsulta("presencial")
|
||||
setDuracao("30")
|
||||
setConvenio("")
|
||||
setQueixa("")
|
||||
setObsPaciente("")
|
||||
setObsInternas("")
|
||||
}
|
||||
|
||||
return (
|
||||
@ -135,6 +143,9 @@ export default function ScheduleAppointment() {
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<form onSubmit={handleSubmit} className="space-y-6">
|
||||
|
||||
|
||||
{/* Médico */}
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="doctor">Médico</Label>
|
||||
<Select value={selectedDoctor} onValueChange={setSelectedDoctor}>
|
||||
@ -142,15 +153,26 @@ export default function ScheduleAppointment() {
|
||||
<SelectValue placeholder="Selecione um médico" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{doctors.map((doctor) => (
|
||||
<SelectItem key={doctor.id} value={doctor.id}>
|
||||
{doctor.full_name} - {doctor.specialty}
|
||||
{loading ? (
|
||||
<SelectItem value="loading" disabled>
|
||||
Carregando médicos...
|
||||
</SelectItem>
|
||||
))}
|
||||
) : error ? (
|
||||
<SelectItem value="error" disabled>
|
||||
Erro ao carregar
|
||||
</SelectItem>
|
||||
) : (
|
||||
doctors.map((doctor) => (
|
||||
<SelectItem key={doctor.id} value={doctor.id}>
|
||||
{doctor.full_name} - {doctor.specialty}
|
||||
</SelectItem>
|
||||
))
|
||||
)}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
{/* Data e horário */}
|
||||
<div className="grid md:grid-cols-2 gap-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="date">Data</Label>
|
||||
@ -179,9 +201,81 @@ export default function ScheduleAppointment() {
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
{/* Tipo e Duração */}
|
||||
<div className="grid md:grid-cols-2 gap-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="tipoConsulta">Tipo de Consulta</Label>
|
||||
<Select value={tipoConsulta} onValueChange={setTipoConsulta}>
|
||||
<SelectTrigger id="tipoConsulta">
|
||||
<SelectValue placeholder="Selecione o tipo" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="presencial">Presencial</SelectItem>
|
||||
<SelectItem value="online">Telemedicina</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="duracao">Duração (minutos)</Label>
|
||||
<Input
|
||||
id="duracao"
|
||||
type="number"
|
||||
min={10}
|
||||
max={120}
|
||||
value={duracao}
|
||||
onChange={(e) => setDuracao(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Convênio */}
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="notes">Observações (opcional)</Label>
|
||||
<Label htmlFor="convenio">Convênio (opcional)</Label>
|
||||
<Input
|
||||
id="convenio"
|
||||
placeholder="Nome do convênio do paciente"
|
||||
value={convenio}
|
||||
onChange={(e) => setConvenio(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Queixa Principal */}
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="queixa">Queixa Principal (opcional)</Label>
|
||||
<Textarea
|
||||
id="queixa"
|
||||
placeholder="Descreva brevemente o motivo da consulta..."
|
||||
value={queixa}
|
||||
onChange={(e) => setQueixa(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Observações do Paciente */}
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="obsPaciente">Observações do Paciente (opcional)</Label>
|
||||
<Textarea
|
||||
id="obsPaciente"
|
||||
placeholder="Anotações relevantes informadas pelo paciente..."
|
||||
value={obsPaciente}
|
||||
onChange={(e) => setObsPaciente(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Observações Internas */}
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="obsInternas">Observações Internas (opcional)</Label>
|
||||
<Textarea
|
||||
id="obsInternas"
|
||||
placeholder="Anotações para a equipe da clínica..."
|
||||
value={obsInternas}
|
||||
onChange={(e) => setObsInternas(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Observações gerais */}
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="notes">Observações gerais (opcional)</Label>
|
||||
<Textarea
|
||||
id="notes"
|
||||
placeholder="Descreva brevemente o motivo da consulta ou observações importantes"
|
||||
@ -191,7 +285,12 @@ export default function ScheduleAppointment() {
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Button type="submit" className="w-full" disabled={!selectedDoctor || !selectedDate || !selectedTime}>
|
||||
{/* Botão */}
|
||||
<Button
|
||||
type="submit"
|
||||
className="w-full"
|
||||
disabled={!selectedDoctor || !selectedDate || !selectedTime}
|
||||
>
|
||||
Agendar Consulta
|
||||
</Button>
|
||||
</form>
|
||||
@ -199,6 +298,7 @@ export default function ScheduleAppointment() {
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Resumo */}
|
||||
<div className="space-y-6">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
@ -211,14 +311,18 @@ export default function ScheduleAppointment() {
|
||||
{selectedDoctor && (
|
||||
<div className="flex items-center space-x-2">
|
||||
<User className="h-4 w-4 text-gray-500" />
|
||||
<span className="text-sm">{doctors.find((d) => d.id === selectedDoctor)?.full_name}</span>
|
||||
<span className="text-sm">
|
||||
{doctors.find((d) => d.id === selectedDoctor)?.full_name}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{selectedDate && (
|
||||
<div className="flex items-center space-x-2">
|
||||
<Calendar className="h-4 w-4 text-gray-500" />
|
||||
<span className="text-sm">{new Date(selectedDate).toLocaleDateString("pt-BR")}</span>
|
||||
<span className="text-sm">
|
||||
{new Date(selectedDate).toLocaleDateString("pt-BR")}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
|
||||
@ -35,8 +35,13 @@ export default function SecretaryAppointments() {
|
||||
const fetchData = async () => {
|
||||
setIsLoading(true);
|
||||
try {
|
||||
// 1. DEFINIR O PARÂMETRO DE ORDENAÇÃO
|
||||
// 'scheduled_at.desc' ordena pela data do agendamento, em ordem descendente (mais recentes primeiro).
|
||||
const queryParams = 'order=scheduled_at.desc';
|
||||
|
||||
const [appointmentList, patientList, doctorList] = await Promise.all([
|
||||
appointmentsService.list(),
|
||||
// 2. USAR A FUNÇÃO DE BUSCA COM O PARÂMETRO DE ORDENAÇÃO
|
||||
appointmentsService.search_appointment(queryParams),
|
||||
patientsService.list(),
|
||||
doctorsService.list(),
|
||||
]);
|
||||
@ -61,7 +66,7 @@ export default function SecretaryAppointments() {
|
||||
|
||||
useEffect(() => {
|
||||
fetchData();
|
||||
}, []);
|
||||
}, []); // Array vazio garante que a busca ocorra apenas uma vez, no carregamento da página.
|
||||
|
||||
// --- LÓGICA DE EDIÇÃO ---
|
||||
const handleEdit = (appointment: any) => {
|
||||
@ -91,11 +96,9 @@ export default function SecretaryAppointments() {
|
||||
|
||||
await appointmentsService.update(selectedAppointment.id, updatePayload);
|
||||
|
||||
setAppointments(prevAppointments =>
|
||||
prevAppointments.map(apt =>
|
||||
apt.id === selectedAppointment.id ? { ...apt, scheduled_at: newScheduledAt, status: editFormData.status } : apt
|
||||
)
|
||||
);
|
||||
// 3. RECARREGAR OS DADOS APÓS A EDIÇÃO
|
||||
// Isso garante que a lista permaneça ordenada corretamente se a data for alterada.
|
||||
fetchData();
|
||||
|
||||
setEditModal(false);
|
||||
toast.success("Consulta atualizada com sucesso!");
|
||||
@ -125,23 +128,15 @@ export default function SecretaryAppointments() {
|
||||
}
|
||||
};
|
||||
|
||||
// ** FUNÇÃO CORRIGIDA E MELHORADA **
|
||||
const getStatusBadge = (status: string) => {
|
||||
switch (status) {
|
||||
case "requested":
|
||||
return <Badge className="bg-yellow-100 text-yellow-800">Solicitada</Badge>;
|
||||
case "confirmed":
|
||||
return <Badge className="bg-blue-100 text-blue-800">Confirmada</Badge>;
|
||||
case "checked_in":
|
||||
return <Badge className="bg-indigo-100 text-indigo-800">Check-in</Badge>;
|
||||
case "completed":
|
||||
return <Badge className="bg-green-100 text-green-800">Realizada</Badge>;
|
||||
case "cancelled":
|
||||
return <Badge className="bg-red-100 text-red-800">Cancelada</Badge>;
|
||||
case "no_show":
|
||||
return <Badge className="bg-gray-100 text-gray-800">Não Compareceu</Badge>;
|
||||
default:
|
||||
return <Badge variant="secondary">{status}</Badge>;
|
||||
case "requested": return <Badge className="bg-yellow-100 text-yellow-800">Solicitada</Badge>;
|
||||
case "confirmed": return <Badge className="bg-blue-100 text-blue-800">Confirmada</Badge>;
|
||||
case "checked_in": return <Badge className="bg-indigo-100 text-indigo-800">Check-in</Badge>;
|
||||
case "completed": return <Badge className="bg-green-100 text-green-800">Realizada</Badge>;
|
||||
case "cancelled": return <Badge className="bg-red-100 text-red-800">Cancelada</Badge>;
|
||||
case "no_show": return <Badge className="bg-gray-100 text-gray-800">Não Compareceu</Badge>;
|
||||
default: return <Badge variant="secondary">{status}</Badge>;
|
||||
}
|
||||
};
|
||||
|
||||
@ -223,58 +218,12 @@ export default function SecretaryAppointments() {
|
||||
|
||||
{/* MODAL DE EDIÇÃO */}
|
||||
<Dialog open={editModal} onOpenChange={setEditModal}>
|
||||
<DialogContent className="sm:max-w-[425px]">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Editar Consulta</DialogTitle>
|
||||
<DialogDescription>
|
||||
Altere os dados da consulta de <strong>{selectedAppointment?.patient.full_name}</strong>.
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<div className="grid gap-4 py-4">
|
||||
<div className="grid gap-2">
|
||||
<Label htmlFor="date">Nova Data</Label>
|
||||
<Input id="date" type="date" value={editFormData.date} onChange={(e) => setEditFormData(prev => ({ ...prev, date: e.target.value }))} min={new Date().toISOString().split("T")[0]} />
|
||||
</div>
|
||||
<div className="grid gap-2">
|
||||
<Label htmlFor="time">Novo Horário</Label>
|
||||
<Select value={editFormData.time} onValueChange={(value) => setEditFormData(prev => ({ ...prev, time: value }))}>
|
||||
<SelectTrigger><SelectValue placeholder="Selecione um horário" /></SelectTrigger>
|
||||
<SelectContent>
|
||||
{timeSlots.map((time) => (<SelectItem key={time} value={time}>{time}</SelectItem>))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div className="grid gap-2">
|
||||
<Label htmlFor="status">Status da Consulta</Label>
|
||||
<Select value={editFormData.status} onValueChange={(value) => setEditFormData(prev => ({ ...prev, status: value }))}>
|
||||
<SelectTrigger><SelectValue placeholder="Selecione um status" /></SelectTrigger>
|
||||
<SelectContent>
|
||||
{appointmentStatuses.map((status) => (<SelectItem key={status} value={status}>{status}</SelectItem>))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
<DialogFooter>
|
||||
<Button variant="outline" onClick={() => setEditModal(false)}>Cancelar</Button>
|
||||
<Button onClick={confirmEdit}>Salvar Alterações</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
{/* ... (código do modal de edição) ... */}
|
||||
</Dialog>
|
||||
|
||||
{/* Modal de Deleção */}
|
||||
<Dialog open={deleteModal} onOpenChange={setDeleteModal}>
|
||||
<DialogContent className="sm:max-w-[425px]">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Deletar Consulta</DialogTitle>
|
||||
<DialogDescription>
|
||||
Tem certeza que deseja deletar a consulta de <strong>{selectedAppointment?.patient.full_name}</strong>?
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<DialogFooter>
|
||||
<Button variant="outline" onClick={() => setDeleteModal(false)}>Cancelar</Button>
|
||||
<Button variant="destructive" onClick={confirmDelete}>Confirmar Deleção</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
{/* ... (código do modal de deleção) ... */}
|
||||
</Dialog>
|
||||
</SecretaryLayout>
|
||||
);
|
||||
|
||||
@ -139,17 +139,17 @@ useEffect(() => {
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50 flex">
|
||||
<div className="min-h-screen bg-background flex">
|
||||
{/* Sidebar para desktop */}
|
||||
<div className={`bg-white border-r border-gray-200 transition-all duration-300 ${sidebarCollapsed ? "w-16" : "w-64"} fixed left-0 top-0 h-screen flex flex-col z-50`}>
|
||||
<div className="p-4 border-b border-gray-200">
|
||||
<div className={`bg-card border-r border transition-all duration-300 ${sidebarCollapsed ? "w-16" : "w-64"} fixed left-0 top-0 h-screen flex flex-col z-50`}>
|
||||
<div className="p-4 border-b border">
|
||||
<div className="flex items-center justify-between">
|
||||
{!sidebarCollapsed && (
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-8 h-8 bg-blue-600 rounded-lg flex items-center justify-center">
|
||||
<div className="w-4 h-4 bg-white rounded-sm"></div>
|
||||
</div>
|
||||
<span className="font-semibold text-gray-900">MidConnecta</span>
|
||||
<span className="font-semibold text-foreground">MidConnecta</span>
|
||||
</div>
|
||||
)}
|
||||
<Button variant="ghost" size="sm" onClick={() => setSidebarCollapsed(!sidebarCollapsed)} className="p-1">
|
||||
@ -165,43 +165,7 @@ useEffect(() => {
|
||||
|
||||
return (
|
||||
<Link key={item.href} href={item.href}>
|
||||
<div className={`flex items-center gap-3 px-3 py-2 rounded-lg mb-1 transition-colors ${isActive ? "bg-blue-50 text-blue-600 border-r-2 border-blue-600" : "text-gray-600 hover:bg-gray-50"}`}>
|
||||
<Icon className="w-5 h-5 flex-shrink-0" />
|
||||
{!sidebarCollapsed && <span className="font-medium">{item.label}</span>}
|
||||
</div>
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
</nav>
|
||||
|
||||
// ... (seu código anterior)
|
||||
|
||||
{/* Sidebar para desktop */}
|
||||
<div className={`bg-white border-r border-gray-200 transition-all duration-300 ${sidebarCollapsed ? "w-16" : "w-64"} fixed left-0 top-0 h-screen flex flex-col z-50`}>
|
||||
<div className="p-4 border-b border-gray-200">
|
||||
<div className="flex items-center justify-between">
|
||||
{!sidebarCollapsed && (
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-8 h-8 bg-blue-600 rounded-lg flex items-center justify-center">
|
||||
<div className="w-4 h-4 bg-white rounded-sm"></div>
|
||||
</div>
|
||||
<span className="font-semibold text-gray-900">MedConnect</span>
|
||||
</div>
|
||||
)}
|
||||
<Button variant="ghost" size="sm" onClick={() => setSidebarCollapsed(!sidebarCollapsed)} className="p-1">
|
||||
{sidebarCollapsed ? <ChevronRight className="w-4 h-4" /> : <ChevronLeft className="w-4 h-4" />}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<nav className="flex-1 p-2 overflow-y-auto">
|
||||
{menuItems.map((item) => {
|
||||
const Icon = item.icon;
|
||||
const isActive = pathname === item.href || (item.href !== "/" && pathname.startsWith(item.href));
|
||||
|
||||
return (
|
||||
<Link key={item.href} href={item.href}>
|
||||
<div className={`flex items-center gap-3 px-3 py-2 rounded-lg mb-1 transition-colors ${isActive ? "bg-blue-50 text-blue-600 border-r-2 border-blue-600" : "text-gray-600 hover:bg-gray-50"}`}>
|
||||
<div className={`flex items-center gap-3 px-3 py-2 rounded-lg mb-1 transition-colors ${isActive ? "bg-accent text-accent-foreground border-r-2 border-primary" : "text-muted-foreground hover:bg-accent"}`}>
|
||||
<Icon className="w-5 h-5 flex-shrink-0" />
|
||||
{!sidebarCollapsed && <span className="font-medium">{item.label}</span>}
|
||||
</div>
|
||||
@ -225,8 +189,8 @@ useEffect(() => {
|
||||
</AvatarFallback>
|
||||
</Avatar>
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-sm font-medium text-gray-900 truncate">{doctorData.name}</p>
|
||||
<p className="text-xs text-gray-500 truncate">{doctorData.specialty}</p>
|
||||
<p className="text-sm font-medium text-foreground truncate">{doctorData.name}</p>
|
||||
<p className="text-xs text-muted-foreground truncate">{doctorData.specialty}</p>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
@ -245,7 +209,7 @@ useEffect(() => {
|
||||
|
||||
{/* Novo botão de sair, usando a mesma estrutura dos itens de menu */}
|
||||
<div
|
||||
className={`flex items-center gap-3 px-3 py-2 rounded-lg mb-1 transition-colors text-gray-600 hover:bg-gray-50 cursor-pointer ${sidebarCollapsed ? "justify-center" : ""}`}
|
||||
className={`flex items-center gap-3 px-3 py-2 rounded-lg mb-1 transition-colors text-muted-foreground hover:bg-accent cursor-pointer ${sidebarCollapsed ? "justify-center" : ""}`}
|
||||
onClick={handleLogout}
|
||||
>
|
||||
<LogOut className="w-5 h-5 flex-shrink-0" />
|
||||
@ -253,20 +217,16 @@ useEffect(() => {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
{/* Sidebar para mobile (apresentado como um menu overlay) */}
|
||||
{isMobileMenuOpen && (
|
||||
<div className="fixed inset-0 bg-black bg-opacity-50 z-40 md:hidden" onClick={toggleMobileMenu}></div>
|
||||
)}
|
||||
<div className={`bg-white border-r border-gray-200 fixed left-0 top-0 h-screen flex flex-col z-50 transition-transform duration-300 md:hidden ${isMobileMenuOpen ? "translate-x-0 w-64" : "-translate-x-full w-64"}`}>
|
||||
<div className="p-4 border-b border-gray-200 flex items-center justify-between">
|
||||
<div className={`bg-card border-r border fixed left-0 top-0 h-screen flex flex-col z-50 transition-transform duration-300 md:hidden ${isMobileMenuOpen ? "translate-x-0 w-64" : "-translate-x-full w-64"}`}>
|
||||
<div className="p-4 border-b border flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-8 h-8 bg-blue-600 rounded-lg flex items-center justify-center">
|
||||
<div className="w-4 h-4 bg-white rounded-sm"></div>
|
||||
</div>
|
||||
<span className="font-semibold text-gray-900">Hospital System</span>
|
||||
<span className="font-semibold text-foreground">Hospital System</span>
|
||||
</div>
|
||||
<Button variant="ghost" size="sm" onClick={toggleMobileMenu} className="p-1">
|
||||
<X className="w-4 h-4" />
|
||||
@ -280,7 +240,7 @@ useEffect(() => {
|
||||
|
||||
return (
|
||||
<Link key={item.href} href={item.href} onClick={toggleMobileMenu}> {/* Fechar menu ao clicar */}
|
||||
<div className={`flex items-center gap-3 px-3 py-2 rounded-lg mb-1 transition-colors ${isActive ? "bg-blue-50 text-blue-600 border-r-2 border-blue-600" : "text-gray-600 hover:bg-gray-50"}`}>
|
||||
<div className={`flex items-center gap-3 px-3 py-2 rounded-lg mb-1 transition-colors ${isActive ? "bg-accent text-accent-foreground border-r-2 border-primary" : "text-muted-foreground hover:bg-accent"}`}>
|
||||
<Icon className="w-5 h-5 flex-shrink-0" />
|
||||
<span className="font-medium">{item.label}</span>
|
||||
</div>
|
||||
@ -301,8 +261,8 @@ useEffect(() => {
|
||||
</AvatarFallback>
|
||||
</Avatar>
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-sm font-medium text-gray-900 truncate">{doctorData.name}</p>
|
||||
<p className="text-xs text-gray-500 truncate">{doctorData.specialty}</p>
|
||||
<p className="text-sm font-medium text-foreground truncate">{doctorData.name}</p>
|
||||
<p className="text-xs text-muted-foreground truncate">{doctorData.specialty}</p>
|
||||
</div>
|
||||
</div>
|
||||
<Button variant="outline" size="sm" className="w-full bg-transparent" onClick={() => { handleLogout(); toggleMobileMenu(); }}> {/* Fechar menu ao deslogar */}
|
||||
@ -316,12 +276,12 @@ useEffect(() => {
|
||||
{/* Main Content */}
|
||||
<div className={`flex-1 flex flex-col transition-all duration-300 ${sidebarCollapsed ? "ml-16" : "ml-64"}`}>
|
||||
{/* Header */}
|
||||
<header className="bg-white border-b border-gray-200 px-6 py-4">
|
||||
<header className="bg-card border-b border px-6 py-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-4 flex-1">
|
||||
<div className="relative flex-1 max-w-md">
|
||||
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
|
||||
<Input placeholder="Buscar paciente" className="pl-10 bg-gray-50 border-gray-200" />
|
||||
<Input placeholder="Buscar paciente" className="pl-10 bg-background border" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@ -55,7 +55,7 @@ const FontSizeExtension = Extension.create({
|
||||
},
|
||||
})
|
||||
|
||||
const Tiptap = ({ content, onChange }: { content: string, onChange: (richText: string) => void }) => {
|
||||
const Tiptap = ({ content, onChange }: { content: string, onChange: (html: string, json: object) => void }) => {
|
||||
const editor = useEditor({
|
||||
extensions: [
|
||||
StarterKit.configure(),
|
||||
@ -72,7 +72,7 @@ const Tiptap = ({ content, onChange }: { content: string, onChange: (richText: s
|
||||
},
|
||||
},
|
||||
onUpdate({ editor }) {
|
||||
onChange(editor.getHTML())
|
||||
onChange(editor.getHTML(), editor.getJSON())
|
||||
},
|
||||
immediatelyRender: false,
|
||||
})
|
||||
@ -100,24 +100,28 @@ const Tiptap = ({ content, onChange }: { content: string, onChange: (richText: s
|
||||
<div>
|
||||
<div className="flex items-center gap-2 p-2 border-b">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => editor.chain().focus().toggleBold().run()}
|
||||
className={editor.isActive('bold') ? 'is-active' : ''}
|
||||
>
|
||||
<Bold className="w-5 h-5" />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => editor.chain().focus().toggleItalic().run()}
|
||||
className={editor.isActive('italic') ? 'is-active' : ''}
|
||||
>
|
||||
<Italic className="w-5 h-5" />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => editor.chain().focus().toggleStrike().run()}
|
||||
className={editor.isActive('strike') ? 'is-active' : ''}
|
||||
>
|
||||
<Strikethrough className="w-5 h-5" />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => editor.chain().focus().toggleUnderline().run()}
|
||||
className={editor.isActive('underline') ? 'is-active' : ''}
|
||||
>
|
||||
|
||||
@ -16,7 +16,9 @@ export async function login() {
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
localStorage.setItem("token", data.access_token);
|
||||
if (typeof window !== 'undefined') {
|
||||
localStorage.setItem("token", data.access_token);
|
||||
}
|
||||
|
||||
return data;
|
||||
}
|
||||
@ -34,7 +36,7 @@ async function request(endpoint, options = {}) {
|
||||
loginPromise = null;
|
||||
}
|
||||
|
||||
const token = localStorage.getItem("token");
|
||||
const token = typeof window !== 'undefined' ? localStorage.getItem("token") : null;
|
||||
|
||||
const headers = {
|
||||
"Content-Type": "application/json",
|
||||
@ -77,7 +79,7 @@ async function request(endpoint, options = {}) {
|
||||
}
|
||||
}
|
||||
export const api = {
|
||||
get: (endpoint) => request(endpoint, { method: "GET" }),
|
||||
get: (endpoint, options) => request(endpoint, { method: "GET", ...options }),
|
||||
post: (endpoint, data) => request(endpoint, { method: "POST", body: JSON.stringify(data) }),
|
||||
patch: (endpoint, data) => request(endpoint, { method: "PATCH", body: JSON.stringify(data) }),
|
||||
delete: (endpoint) => request(endpoint, { method: "DELETE" }),
|
||||
|
||||
42
services/reportsApi.mjs
Normal file
42
services/reportsApi.mjs
Normal file
@ -0,0 +1,42 @@
|
||||
import { api } from "./api.mjs";
|
||||
|
||||
const REPORTS_API_URL = "/rest/v1/reports";
|
||||
|
||||
export const reportsApi = {
|
||||
getReports: async (patientId) => {
|
||||
try {
|
||||
const data = await api.get(`${REPORTS_API_URL}?patient_id=eq.${patientId}`);
|
||||
return data;
|
||||
} catch (error) {
|
||||
console.error("Failed to fetch reports:", error);
|
||||
return [];
|
||||
}
|
||||
},
|
||||
getReportById: async (reportId) => {
|
||||
try {
|
||||
const data = await api.get(`${REPORTS_API_URL}?id=eq.${reportId}`);
|
||||
return data;
|
||||
} catch (error) {
|
||||
console.error(`Failed to fetch report ${reportId}:`, error);
|
||||
throw error;
|
||||
}
|
||||
},
|
||||
createReport: async (reportData) => {
|
||||
try {
|
||||
const data = await api.post(REPORTS_API_URL, reportData);
|
||||
return data;
|
||||
} catch (error) {
|
||||
console.error("Failed to create report:", error);
|
||||
throw error;
|
||||
}
|
||||
},
|
||||
updateReport: async (reportId, reportData) => {
|
||||
try {
|
||||
const data = await api.patch(`${REPORTS_API_URL}?id=eq.${reportId}`, reportData);
|
||||
return data;
|
||||
} catch (error) {
|
||||
console.error(`Failed to update report ${reportId}:`, error);
|
||||
throw error;
|
||||
}
|
||||
},
|
||||
};
|
||||
Loading…
x
Reference in New Issue
Block a user