Spaces:
Running
Running
| "use client" | |
| 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 { RichTextEditor } from "./rich-text-editor" | |
| import { Plus, Calendar, Sun, Sunset, Moon, Clock } from "lucide-react" | |
| interface ProgressNotesProps { | |
| patient: any | |
| } | |
| export function ProgressNotes({ patient }: ProgressNotesProps) { | |
| const [showAddNote, setShowAddNote] = useState(false) | |
| const [currentDate, setCurrentDate] = useState(new Date().toISOString().split("T")[0]) | |
| const [morningShift, setMorningShift] = useState({ | |
| complaints: "", | |
| findings: "", | |
| vitals: "", | |
| events: "", | |
| doctor: "", | |
| }) | |
| const [eveningShift, setEveningShift] = useState({ | |
| complaints: "", | |
| findings: "", | |
| vitals: "", | |
| events: "", | |
| doctor: "", | |
| }) | |
| const [nightShift, setNightShift] = useState({ | |
| complaints: "", | |
| findings: "", | |
| vitals: "", | |
| events: "", | |
| doctor: "", | |
| }) | |
| const handleShiftChange = (shift: string, field: string, value: string) => { | |
| if (shift === "morning") { | |
| setMorningShift((prev) => ({ ...prev, [field]: value })) | |
| } else if (shift === "evening") { | |
| setEveningShift((prev) => ({ ...prev, [field]: value })) | |
| } else if (shift === "night") { | |
| setNightShift((prev) => ({ ...prev, [field]: value })) | |
| } | |
| } | |
| const ShiftCard = ({ | |
| title, | |
| icon: Icon, | |
| bgColor, | |
| shift, | |
| shiftData, | |
| }: { | |
| title: string | |
| icon: any | |
| bgColor: string | |
| shift: string | |
| shiftData: any | |
| }) => ( | |
| <Card className={`${bgColor} border-2`}> | |
| <CardHeader> | |
| <CardTitle className="flex items-center gap-2"> | |
| <Icon className="w-5 h-5" /> | |
| {title} | |
| </CardTitle> | |
| </CardHeader> | |
| <CardContent className="space-y-4"> | |
| <div> | |
| <Label className="text-sm font-medium">Chief Complaints</Label> | |
| <RichTextEditor | |
| value={shiftData.complaints} | |
| onChange={(value) => handleShiftChange(shift, "complaints", value)} | |
| placeholder="Enter chief complaints for this shift..." | |
| rows={2} | |
| fieldType="chief-complaints" | |
| /> | |
| </div> | |
| <div> | |
| <Label className="text-sm font-medium">Findings (Systemic examination)</Label> | |
| <RichTextEditor | |
| value={shiftData.findings} | |
| onChange={(value) => handleShiftChange(shift, "findings", value)} | |
| placeholder="Enter examination findings..." | |
| rows={3} | |
| fieldType="assessment" | |
| /> | |
| </div> | |
| <div> | |
| <Label className="text-sm font-medium">Vital Parameters</Label> | |
| <RichTextEditor | |
| value={shiftData.vitals} | |
| onChange={(value) => handleShiftChange(shift, "vitals", value)} | |
| placeholder="BP: 120/80, Pulse: 72, Temp: 98.6°F, RR: 16" | |
| rows={2} | |
| fieldType="general" | |
| /> | |
| </div> | |
| <div> | |
| <Label className="text-sm font-medium">Specific Event</Label> | |
| <RichTextEditor | |
| value={shiftData.events} | |
| onChange={(value) => handleShiftChange(shift, "events", value)} | |
| placeholder="Any specific events or observations..." | |
| rows={2} | |
| fieldType="general" | |
| /> | |
| </div> | |
| <div> | |
| <Label className="text-sm font-medium">Doctor Name</Label> | |
| <Input | |
| value={shiftData.doctor} | |
| onChange={(e) => handleShiftChange(shift, "doctor", e.target.value)} | |
| placeholder="Enter doctor name" | |
| className="bg-white" | |
| /> | |
| </div> | |
| </CardContent> | |
| </Card> | |
| ) | |
| return ( | |
| <div className="space-y-6"> | |
| {/* Header */} | |
| <div className="flex items-center justify-between"> | |
| <div> | |
| <h2 className="text-xl font-semibold">Daily Progress Notes</h2> | |
| <p className="text-sm text-gray-600">Three-shift monitoring for {patient.name}</p> | |
| </div> | |
| <Button onClick={() => setShowAddNote(!showAddNote)} className="gap-2"> | |
| <Plus className="w-4 h-4" /> | |
| Add Progress Note | |
| </Button> | |
| </div> | |
| {/* Add New Note Form */} | |
| {showAddNote && ( | |
| <Card className="border-blue-200 bg-blue-50"> | |
| <CardHeader> | |
| <div className="flex items-center justify-between"> | |
| <CardTitle className="flex items-center gap-2"> | |
| <Calendar className="w-5 h-5" /> | |
| New Daily Progress Note | |
| </CardTitle> | |
| <div className="flex items-center gap-2"> | |
| <Label>Date:</Label> | |
| <Input | |
| type="date" | |
| value={currentDate} | |
| onChange={(e) => setCurrentDate(e.target.value)} | |
| className="bg-white" | |
| /> | |
| </div> | |
| </div> | |
| </CardHeader> | |
| <CardContent className="space-y-6"> | |
| {/* Patient Info */} | |
| <div className="bg-white p-3 rounded border"> | |
| <Label className="font-medium">Patient Label:</Label> | |
| <div className="text-sm text-gray-700 mt-1"> | |
| <strong>{patient.name}</strong> | MRN: {patient.mrn} | {patient.age}Y {patient.gender} | Ward:{" "} | |
| {patient.ward} | Bed: {patient.bed} | |
| </div> | |
| </div> | |
| {/* Three Shifts */} | |
| <div className="space-y-6"> | |
| <ShiftCard | |
| title="Morning" | |
| icon={Sun} | |
| bgColor="bg-yellow-50 border-yellow-200" | |
| shift="morning" | |
| shiftData={morningShift} | |
| /> | |
| <ShiftCard | |
| title="Evening" | |
| icon={Sunset} | |
| bgColor="bg-orange-50 border-orange-200" | |
| shift="evening" | |
| shiftData={eveningShift} | |
| /> | |
| <ShiftCard | |
| title="Night" | |
| icon={Moon} | |
| bgColor="bg-indigo-50 border-indigo-200" | |
| shift="night" | |
| shiftData={nightShift} | |
| /> | |
| </div> | |
| <div className="flex gap-2"> | |
| <Button className="gap-2"> | |
| <Calendar className="w-4 h-4" /> | |
| Save Progress Note | |
| </Button> | |
| <Button variant="outline" onClick={() => setShowAddNote(false)}> | |
| Cancel | |
| </Button> | |
| </div> | |
| </CardContent> | |
| </Card> | |
| )} | |
| {/* Existing Notes */} | |
| <Card> | |
| <CardHeader> | |
| <CardTitle>Progress Notes History</CardTitle> | |
| </CardHeader> | |
| <CardContent> | |
| <div className="text-center py-8 text-gray-500"> | |
| <Clock className="w-12 h-12 mx-auto mb-4 text-gray-400" /> | |
| <h3 className="text-lg font-medium mb-2">No Progress Notes</h3> | |
| <p className="text-sm">Start documenting daily progress with three-shift monitoring.</p> | |
| </div> | |
| </CardContent> | |
| </Card> | |
| </div> | |
| ) | |
| } | |