feat(added notes in procedureCodes dialog)

This commit is contained in:
2026-01-25 01:00:38 +05:30
parent e2b67b26fe
commit 1b66474913
4 changed files with 214 additions and 16 deletions

View File

@@ -1,6 +1,5 @@
import { Router, Request, Response } from "express";
import { storage } from "../storage";
import { prisma } from "@repo/db/client";
import {
insertAppointmentProcedureSchema,
updateAppointmentProcedureSchema,

View File

@@ -49,7 +49,7 @@ router.get("/day", async (req: Request, res: Response): Promise<any> => {
// dedupe patient ids referenced by those appointments
const patientIds = Array.from(
new Set(appointments.map((a) => a.patientId).filter(Boolean))
new Set(appointments.map((a) => a.patientId).filter(Boolean)),
);
const patients = patientIds.length
@@ -76,6 +76,43 @@ router.get("/recent", async (req: Request, res: Response) => {
}
});
/**
* GET /api/appointments/:id/procedure-notes
*/
router.get("/:id/procedure-notes", async (req: Request, res: Response) => {
const appointmentId = Number(req.params.id);
if (isNaN(appointmentId)) {
return res.status(400).json({ message: "Invalid appointment ID" });
}
const appointment = await storage.getAppointment(appointmentId);
if (!appointment) {
return res.status(404).json({ message: "Appointment not found" });
}
return res.json({
procedureNotes: appointment.procedureCodeNotes ?? "",
});
});
/**
* PUT /api/appointments/:id/procedure-notes
*/
router.put("/:id/procedure-notes", async (req: Request, res: Response) => {
const appointmentId = Number(req.params.id);
if (isNaN(appointmentId)) {
return res.status(400).json({ message: "Invalid appointment ID" });
}
const { procedureNotes } = req.body as { procedureNotes?: string };
const updated = await storage.updateAppointment(appointmentId, {
procedureCodeNotes: procedureNotes ?? null,
});
return res.json(updated);
});
// Get a single appointment by ID
router.get(
"/:id",
@@ -101,7 +138,7 @@ router.get(
} catch (error) {
res.status(500).json({ message: "Failed to retrieve appointment" });
}
}
},
);
// Get all appointments for a specific patient
@@ -128,7 +165,7 @@ router.get(
} catch (err) {
res.status(500).json({ message: "Failed to get patient appointments" });
}
}
},
);
/**
@@ -162,7 +199,7 @@ router.get(
.status(500)
.json({ message: "Failed to retrieve patient for appointment" });
}
}
},
);
// Create a new appointment
@@ -202,7 +239,7 @@ router.post(
await storage.getPatientAppointmentByDateTime(
appointmentData.patientId,
appointmentData.date,
currentStartTime
currentStartTime,
);
// Check staff conflict at this time
@@ -210,7 +247,7 @@ router.post(
appointmentData.staffId,
appointmentData.date,
currentStartTime,
sameDayAppointment?.id // Ignore self if updating
sameDayAppointment?.id, // Ignore self if updating
);
if (!staffConflict) {
@@ -231,7 +268,7 @@ router.post(
if (sameDayAppointment?.id !== undefined) {
const updated = await storage.updateAppointment(
sameDayAppointment.id,
payload
payload,
);
responseData = {
...updated,
@@ -276,7 +313,7 @@ router.post(
if (error instanceof z.ZodError) {
console.log(
"Validation error details:",
JSON.stringify(error.format(), null, 2)
JSON.stringify(error.format(), null, 2),
);
return res.status(400).json({
message: "Validation error",
@@ -289,7 +326,7 @@ router.post(
error: error instanceof Error ? error.message : String(error),
});
}
}
},
);
// Update an existing appointment
@@ -343,7 +380,7 @@ router.put(
existingAppointment.patientId,
date,
startTime,
appointmentId
appointmentId,
);
if (patientConflict) {
@@ -356,7 +393,7 @@ router.put(
staffId,
date,
startTime,
appointmentId
appointmentId,
);
if (staffConflict) {
@@ -381,7 +418,7 @@ router.put(
// Update appointment
const updatedAppointment = await storage.updateAppointment(
appointmentId,
updatePayload
updatePayload,
);
return res.json(updatedAppointment);
} catch (error) {
@@ -390,7 +427,7 @@ router.put(
if (error instanceof z.ZodError) {
console.log(
"Validation error details:",
JSON.stringify(error.format(), null, 2)
JSON.stringify(error.format(), null, 2),
);
return res.status(400).json({
message: "Validation error",
@@ -403,7 +440,7 @@ router.put(
error: error instanceof Error ? error.message : String(error),
});
}
}
},
);
// Delete an appointment

View File

@@ -0,0 +1,156 @@
import { useEffect, useState, useRef } from "react";
import { useQuery, useMutation } from "@tanstack/react-query";
import { Button } from "@/components/ui/button";
import { apiRequest, queryClient } from "@/lib/queryClient";
import { Save, Pencil, X } from "lucide-react";
import { useToast } from "@/hooks/use-toast";
interface Props {
appointmentId: number;
enabled: boolean;
}
export function AppointmentProcedureNotes({
appointmentId,
enabled,
}: Props) {
const { toast } = useToast();
const [notes, setNotes] = useState("");
const [originalNotes, setOriginalNotes] = useState("");
const [isEditing, setIsEditing] = useState(false);
const textareaRef = useRef<HTMLTextAreaElement>(null);
// -------------------------
// Load procedure notes
// -------------------------
useQuery({
queryKey: ["appointment-procedure-notes", appointmentId],
enabled: enabled && !!appointmentId,
queryFn: async () => {
const res = await apiRequest(
"GET",
`/api/appointments/${appointmentId}/procedure-notes`
);
if (!res.ok) throw new Error("Failed to load notes");
const data = await res.json();
const value = data.procedureNotes ?? "";
setNotes(value);
setOriginalNotes(value);
setIsEditing(false);
return data;
},
});
// -------------------------
// Save procedure notes
// -------------------------
const saveMutation = useMutation({
mutationFn: async () => {
const res = await apiRequest(
"PUT",
`/api/appointments/${appointmentId}/procedure-notes`,
{ procedureNotes: notes }
);
if (!res.ok) throw new Error("Failed to save notes");
},
onSuccess: () => {
toast({ title: "Procedure notes saved" });
setOriginalNotes(notes);
setIsEditing(false);
queryClient.invalidateQueries({
queryKey: ["appointment-procedure-notes", appointmentId],
});
},
onError: (err: any) => {
toast({
title: "Error",
description: err.message ?? "Failed to save notes",
variant: "destructive",
});
},
});
// Autofocus textarea when editing
useEffect(() => {
if (isEditing) {
textareaRef.current?.focus();
}
}, [isEditing]);
const handleCancel = () => {
setNotes(originalNotes);
setIsEditing(false);
};
const hasChanges = notes !== originalNotes;
return (
<div className="border rounded-lg p-4 bg-muted/20 space-y-2">
{/* Header */}
<div className="flex items-center justify-between">
<div className="text-sm font-medium">Procedure Notes</div>
{!isEditing ? (
<Button
size="sm"
variant="outline"
onClick={() => setIsEditing(true)}
>
<Pencil className="h-4 w-4 mr-1" />
Edit
</Button>
) : (
<div className="flex gap-2">
<Button
size="sm"
variant="ghost"
onClick={handleCancel}
>
<X className="h-4 w-4 mr-1" />
Cancel
</Button>
<Button
size="sm"
onClick={() => saveMutation.mutate()}
disabled={saveMutation.isPending || !hasChanges}
>
<Save className="h-4 w-4 mr-1" />
Save
</Button>
</div>
)}
</div>
{/* Textarea */}
<textarea
ref={textareaRef}
className={`w-full min-h-[90px] rounded-md border px-3 py-2 text-sm transition
focus:outline-none focus:ring-2 focus:ring-ring
${
isEditing
? "bg-background text-foreground"
: "bg-white text-foreground border-dashed border-muted-foreground/40 cursor-default"
}
`}
placeholder='Example: "#20 DO filling"'
value={notes}
onChange={(e) => setNotes(e.target.value)}
readOnly={!isEditing}
/>
{/* View-mode hint */}
{!isEditing && (
<div className="text-xs text-muted-foreground">
View only click <span className="font-medium">Edit</span> to modify
</div>
)}
</div>
);
}

View File

@@ -24,6 +24,7 @@ import {
DirectComboButtons,
RegularComboButtons,
} from "@/components/procedure/procedure-combo-buttons";
import { AppointmentProcedureNotes } from "./appointment-procedure-notes";
interface Props {
open: boolean;
@@ -294,6 +295,11 @@ export function AppointmentProceduresDialog({
</DialogTitle>
</DialogHeader>
<AppointmentProcedureNotes
appointmentId={appointmentId}
enabled={open}
/>
{/* ================= COMBOS ================= */}
<div className="space-y-8 pointer-events-auto">
<DirectComboButtons
@@ -480,7 +486,7 @@ export function AppointmentProceduresDialog({
<Save className="h-4 w-4" />
</Button>
</div>
<div className="flex justify-center">
<Button size="icon" variant="ghost" onClick={cancelEdit}>
<X className="h-4 w-4" />