Spaces:
Running
Running
| "use client" | |
| import { useState, useEffect } from "react" | |
| import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" | |
| import { Input } from "@/components/ui/input" | |
| import { Label } from "@/components/ui/label" | |
| import { Button } from "@/components/ui/button" | |
| import { RichTextEditor } from "./rich-text-editor" | |
| import { FormNavigation } from "./form-navigation" | |
| import { User, Activity, ClipboardList, Heart, FileText } from "lucide-react" | |
| export function ProgressNotesForm() { | |
| const [activeSection, setActiveSection] = useState("basic-info") | |
| const [formData, setFormData] = useState({ | |
| basicInfo: "", | |
| vitals: "", | |
| assessment: "", | |
| plan: "", | |
| notes: "", | |
| }) | |
| const sections = [ | |
| { id: "basic-info", label: "Basic Info", icon: <User className="w-4 h-4" /> }, | |
| { id: "vitals", label: "Vitals", icon: <Activity className="w-4 h-4" /> }, | |
| { id: "assessment", label: "Assessment", icon: <ClipboardList className="w-4 h-4" /> }, | |
| { id: "plan", label: "Plan", icon: <Heart className="w-4 h-4" /> }, | |
| { id: "notes", label: "Notes", icon: <FileText className="w-4 h-4" /> }, | |
| ] | |
| useEffect(() => { | |
| const handleScroll = () => { | |
| const sectionElements = sections.map((section) => ({ | |
| id: section.id, | |
| element: document.getElementById(section.id), | |
| })) | |
| const currentSection = sectionElements.find(({ element }) => { | |
| if (!element) return false | |
| const rect = element.getBoundingClientRect() | |
| return rect.top <= 100 && rect.bottom >= 100 | |
| }) | |
| if (currentSection) { | |
| setActiveSection(currentSection.id) | |
| } | |
| } | |
| window.addEventListener("scroll", handleScroll) | |
| return () => window.removeEventListener("scroll", handleScroll) | |
| }, []) | |
| const updateFormData = (field: string, value: string) => { | |
| setFormData((prev) => ({ ...prev, [field]: value })) | |
| } | |
| return ( | |
| <div className="relative"> | |
| <FormNavigation sections={sections} activeSection={activeSection} onSectionChange={setActiveSection} /> | |
| <div className="max-w-4xl mx-auto space-y-6 pl-0 md:pl-16"> | |
| {/* Basic Info Section */} | |
| <Card id="basic-info" className="scroll-mt-20"> | |
| <CardHeader className="bg-blue-50 border-b"> | |
| <CardTitle className="flex items-center gap-2 text-blue-800"> | |
| <User className="w-5 h-5" /> | |
| Basic Information | |
| </CardTitle> | |
| </CardHeader> | |
| <CardContent className="p-6 space-y-4"> | |
| <div className="grid grid-cols-1 md:grid-cols-3 gap-4"> | |
| <div> | |
| <Label htmlFor="date">Date</Label> | |
| <Input id="date" type="date" /> | |
| </div> | |
| <div> | |
| <Label htmlFor="time">Time</Label> | |
| <Input id="time" type="time" /> | |
| </div> | |
| <div> | |
| <Label htmlFor="day-post-op">Day Post-Op</Label> | |
| <Input id="day-post-op" placeholder="e.g., POD #3" /> | |
| </div> | |
| </div> | |
| <div> | |
| <Label htmlFor="subjective">Subjective (Patient's Complaints)</Label> | |
| <RichTextEditor | |
| value={formData.basicInfo} | |
| onChange={(value) => updateFormData("basicInfo", value)} | |
| placeholder="Patient's subjective complaints and symptoms..." | |
| fieldType="chief-complaints" | |
| showAutofill={true} | |
| autofillSource="Patient Interview" | |
| autofillTimestamp="2024-01-15, 10:30 AM" | |
| /> | |
| </div> | |
| </CardContent> | |
| </Card> | |
| {/* Vitals Section */} | |
| <Card id="vitals" className="scroll-mt-20"> | |
| <CardHeader className="bg-green-50 border-b"> | |
| <CardTitle className="flex items-center gap-2 text-green-800"> | |
| <Activity className="w-5 h-5" /> | |
| Vital Signs & Objective Findings | |
| </CardTitle> | |
| </CardHeader> | |
| <CardContent className="p-6 space-y-4"> | |
| <div className="grid grid-cols-2 md:grid-cols-4 gap-4"> | |
| <div> | |
| <Label htmlFor="bp">Blood Pressure</Label> | |
| <Input id="bp" placeholder="120/80" /> | |
| </div> | |
| <div> | |
| <Label htmlFor="pulse">Pulse</Label> | |
| <Input id="pulse" placeholder="72 bpm" /> | |
| </div> | |
| <div> | |
| <Label htmlFor="temp">Temperature</Label> | |
| <Input id="temp" placeholder="98.6°F" /> | |
| </div> | |
| <div> | |
| <Label htmlFor="resp">Respiratory Rate</Label> | |
| <Input id="resp" placeholder="16/min" /> | |
| </div> | |
| </div> | |
| <div> | |
| <Label htmlFor="objective">Objective Findings</Label> | |
| <RichTextEditor | |
| value={formData.vitals} | |
| onChange={(value) => updateFormData("vitals", value)} | |
| placeholder="Physical examination findings, lab results, imaging..." | |
| fieldType="assessment" | |
| rows={5} | |
| showAutofill={true} | |
| autofillSource="Nursing Station" | |
| autofillTimestamp="2024-01-15, 11:00 AM" | |
| /> | |
| </div> | |
| </CardContent> | |
| </Card> | |
| {/* Assessment Section */} | |
| <Card id="assessment" className="scroll-mt-20"> | |
| <CardHeader className="bg-red-50 border-b"> | |
| <CardTitle className="flex items-center gap-2 text-red-800"> | |
| <ClipboardList className="w-5 h-5" /> | |
| Assessment | |
| </CardTitle> | |
| </CardHeader> | |
| <CardContent className="p-6 space-y-4"> | |
| <div> | |
| <Label htmlFor="clinical-assessment">Clinical Assessment</Label> | |
| <RichTextEditor | |
| value={formData.assessment} | |
| onChange={(value) => updateFormData("assessment", value)} | |
| placeholder="Current clinical status, progress, complications..." | |
| fieldType="assessment" | |
| rows={6} | |
| /> | |
| </div> | |
| </CardContent> | |
| </Card> | |
| {/* Plan Section */} | |
| <Card id="plan" className="scroll-mt-20"> | |
| <CardHeader className="bg-indigo-50 border-b"> | |
| <CardTitle className="flex items-center gap-2 text-indigo-800"> | |
| <Heart className="w-5 h-5" /> | |
| Plan | |
| </CardTitle> | |
| </CardHeader> | |
| <CardContent className="p-6 space-y-4"> | |
| <div> | |
| <Label htmlFor="treatment-plan">Treatment Plan</Label> | |
| <RichTextEditor | |
| value={formData.plan} | |
| onChange={(value) => updateFormData("plan", value)} | |
| placeholder="Treatment modifications, new orders, discharge planning..." | |
| fieldType="plan" | |
| rows={6} | |
| /> | |
| </div> | |
| </CardContent> | |
| </Card> | |
| {/* Additional Notes Section */} | |
| <Card id="notes" className="scroll-mt-20"> | |
| <CardHeader className="bg-gray-50 border-b"> | |
| <CardTitle className="flex items-center gap-2 text-gray-800"> | |
| <FileText className="w-5 h-5" /> | |
| Additional Notes | |
| </CardTitle> | |
| </CardHeader> | |
| <CardContent className="p-6 space-y-4"> | |
| <div> | |
| <Label htmlFor="additional-notes">Additional Notes</Label> | |
| <RichTextEditor | |
| value={formData.notes} | |
| onChange={(value) => updateFormData("notes", value)} | |
| placeholder="Any additional observations, communications, or instructions..." | |
| fieldType="general" | |
| rows={4} | |
| /> | |
| </div> | |
| </CardContent> | |
| </Card> | |
| {/* Form Actions */} | |
| <div className="flex justify-end gap-4 py-6"> | |
| <Button variant="outline">Save Draft</Button> | |
| <Button variant="outline">Print</Button> | |
| <Button>Submit Progress Note</Button> | |
| </div> | |
| </div> | |
| </div> | |
| ) | |
| } | |