Hackathons/HoyaHax2025
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Doctor Patient Edit Form Update

Browse Source
This commit is contained in:
Sir Blob
2025-01-25 13:52:46 -05:00
parent 163444e3ae
commit 070d6c81fd
5 changed files with 216 additions and 155 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@@ -11,6 +11,7 @@
}, },
"dependencies": { "dependencies": {
"@clerk/nextjs": "^6.10.2", "@clerk/nextjs": "^6.10.2",
"@radix-ui/react-collapsible": "^1.1.2",
"@radix-ui/react-dialog": "^1.1.5", "@radix-ui/react-dialog": "^1.1.5",
"@radix-ui/react-dropdown-menu": "^2.1.5", "@radix-ui/react-dropdown-menu": "^2.1.5",
"@radix-ui/react-label": "^2.1.1", "@radix-ui/react-label": "^2.1.1",

120
src/app/(panels)/suite/doctor/account/PatientForm.tsx Normal file
View File

@@ -0,0 +1,120 @@
"use client"
import { useState } from "react"
import axios from "axios"
import { Card, CardContent, CardFooter, CardHeader } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
export function PersonForm({ person }: any) {
const [medications, setMedications] = useState(person.medications || [])
async function onSubmit(event: React.FormEvent<HTMLFormElement>) {
event.preventDefault()
}
const [diagnoses, setDiagnoses] = useState(person.diagnoses || [])
const handleDiagnosesChange = (event: React.ChangeEvent<HTMLInputElement>) => {
const value = event.target.value
setDiagnoses(value.split(','))
}
const handleAddMedication = () => {
setMedications([...medications, { name: '', dosage: '', frequency: '' }])
}
const handleMedicationsChange = (index: number, field: string, value: string) => {
const updatedMedications = [...medications]
updatedMedications[index][field] = value
setMedications(updatedMedications)
}
const handleSave = async () => {
try {
await axios.put(`/api/patients?email=${person.email}`, {
medications,
medicalConditions: diagnoses,
});
alert('Patient data updated successfully');
} catch (error) {
console.error('Error updating patient data:', error);
alert('Failed to update patient data');
}
};
return (
<Card className="bg-neutral-100 dark:bg-neutral-950">
<CardHeader>
<h3 className="text-xl font-bold">Edit Patient: {person.name}</h3>
</CardHeader>
<CardContent>
<div className="mb-4">
<Label>Medications:</Label>
<br />
{medications.map((medication: any, index: number) => (
<div key={index} className="mb-2 grid grid-cols-3 gap-2">
<Input
type="text"
placeholder="Name"
value={medication.name}
onChange={(e) => handleMedicationsChange(index, 'name', e.target.value)}
className="mb-2"
/>
<Input
type="text"
placeholder="Dosage"
value={medication.dosage}
onChange={(e) => handleMedicationsChange(index, 'dosage', e.target.value)}
className="mb-2"
/>
<Input
type="text"
placeholder="Frequency"
value={medication.frequency}
onChange={(e) => handleMedicationsChange(index, 'frequency', e.target.value)}
className="mb-2"
/>
</div>
))}
<div className="mb-2 grid grid-cols-4 gap-2">
<Input
type="text"
placeholder="Name"
className="mb-2"
/>
<Input
type="text"
placeholder="Dosage"
className="mb-2"
/>
<Input
type="text"
placeholder="Frequency"
className="mb-2"
/>
<Button onClick={handleAddMedication}>Add Medication</Button>
</div>
</div>
<div className="mb-4">
<Label>Diagnoses:</Label>
<Input
type="text"
value={diagnoses.join(',')}
onChange={handleDiagnosesChange}
/>
</div>
</CardContent>
<CardFooter>
<Button className="mx-auto w-1/2" onClick={handleSave}>Save</Button>
</CardFooter>
</Card>
)
}

235
src/app/(panels)/suite/doctor/account/page.jsx
View File

@@ -2,170 +2,99 @@
import { useState, useEffect } from 'react'; import { useState, useEffect } from 'react';
import axios from 'axios'; import axios from 'axios';
import { useUser } from '@clerk/nextjs'; import { useUser } from '@clerk/nextjs';
import { Button } from '@/components/ui/button'; import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label'; import { Label } from '@/components/ui/label';
import { Card, CardHeader, CardContent, CardFooter } from '@/components/ui/card'; import { Card, CardHeader, CardContent } from '@/components/ui/card';
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible"
import { ChevronDown, ChevronUp } from "lucide-react"
import { PersonForm } from './PatientForm';
const AccountPage = () => { const AccountPage = () => {
const { user } = useUser(); const { user } = useUser();
const [userData, setUserData] = useState(null); const [userData, setUserData] = useState(null);
const [patients, setPatients] = useState([]); const [patients, setPatients] = useState([]);
const [selectedPatient, setSelectedPatient] = useState(null);
const [medications, setMedications] = useState([]);
const [diagnoses, setDiagnoses] = useState([]);
useEffect(() => { useEffect(() => {
if (user) { if (user) {
axios.get(`/api/user?userId=${user.id}`).then(response => { axios.get(`/api/user?userId=${user.id}`).then(response => {
setUserData(response.data); setUserData(response.data);
if (response.data.role === 'caregiver') { if (response.data.role === 'caregiver') {
axios.get('/api/patients').then(res => setPatients(res.data)); axios.get('/api/patients').then(res => setPatients(res.data));
} }
});
}
}, [user]);
const handleRoleChange = async () => {
const newRole = userData.role === 'patient' ? 'caregiver' : 'patient';
await axios.put(`/api/user?userId=${user.id}`, { role: newRole });
setUserData({ ...userData, role: newRole });
if (newRole === 'caregiver') {
axios.get('/api/patients').then(res => setPatients(res.data));
} else {
setPatients([]);
setSelectedPatient(null);
}
};
const handlePatientSelect = (patient) => {
setSelectedPatient(patient);
setMedications(patient.medications);
setDiagnoses(patient.medicalConditions);
};
const handleMedicationsChange = (index, field, value) => {
const updatedMedications = [...medications];
updatedMedications[index][field] = value;
setMedications(updatedMedications);
};
const handleDiagnosesChange = (e) => {
setDiagnoses(e.target.value.split(','));
};
const handleAddMedication = () => {
setMedications([...medications, { name: '', dosage: '', frequency: '' }]);
};
const handleSave = async () => {
try {
await axios.put(`/api/patients?email=${selectedPatient.email}`, {
medications,
medicalConditions: diagnoses,
}); });
alert('Patient data updated successfully'); }
} catch (error) { }, [user]);
console.error('Error updating patient data:', error);
alert('Failed to update patient data'); const handleRoleChange = async () => {
const newRole = userData.role === 'patient' ? 'caregiver' : 'patient';
await axios.put(`/api/user?userId=${user.id}`, { role: newRole });
setUserData({ ...userData, role: newRole });
if (newRole === 'caregiver') {
axios.get('/api/patients').then(res => setPatients(res.data));
} else {
setPatients([]);
setSelectedPatient(null);
} }
}; };
if (!userData) return <div>Loading...</div>; if (!userData) return <div>Loading...</div>;
return ( return (
<div className="container mx-auto p-4"> <div className="container mx-auto p-4">
<Card> <Card>
<CardHeader> <CardHeader>
<h1 className="text-2xl font-bold">Account Page</h1> <h1 className="text-2xl font-bold">Account Page</h1>
</CardHeader> </CardHeader>
<CardContent> <CardContent>
<div className="mb-4"> <div className="mb-4">
<Label>Name:</Label> <Label>Name:</Label>
<p>{userData.name}</p> <p>{userData.name}</p>
</div> </div>
<div className="mb-4"> <div className="mb-4">
<Label>Email:</Label> <Label>Email:</Label>
<p>{userData.email}</p> <p>{userData.email}</p>
</div> </div>
<div className="mb-4"> <div className="mb-4">
<Label>Role:</Label> <Label>Role:</Label>
<p>{userData.role}</p> <p>{userData.role}</p>
</div> </div>
<Button onClick={handleRoleChange} className="mb-4"> <Button onClick={handleRoleChange} className="mb-4">
Change role to {userData.role === 'patient' ? 'caregiver' : 'patient'} Change role to {userData.role === 'patient' ? 'caregiver' : 'patient'}
</Button> </Button>
{userData.role === 'caregiver' && ( {userData.role === 'caregiver' && (
<div> <div>
<h2 className="text-xl font-bold mb-4">Patients</h2> <h2 className="text-xl font-bold mb-4">Patients</h2>
<ul className="mb-4"> <ul className="mb-4">
{patients.map(patient => ( {patients.map(patient => (
<li <Collapsible key={patient.id}>
key={patient.email} <div className="flex items-center justify-between p-2 bg-gray-100 dark:bg-neutral-800 rounded-t-lg">
onClick={() => handlePatientSelect(patient)} <div>
className="cursor-pointer hover:bg-gray-200 p-2" <h2 className="text-lg font-semibold">{patient.name}</h2>
> <p className="text-sm text-gray-400">{patient.role}</p>
{patient.name} </div>
</li> <CollapsibleTrigger asChild>
))} <Button variant="ghost" size="sm">
</ul> <ChevronDown className="h-4 w-4" />
<span className="sr-only">Toggle</span>
{selectedPatient && ( </Button>
<Card> </CollapsibleTrigger>
<CardHeader> </div>
<h3 className="text-xl font-bold">Edit Patient: {selectedPatient.name}</h3> <CollapsibleContent className="p-4 border border-t-0 rounded-b-lg">
</CardHeader> <PersonForm person={patient} />
<CardContent> </CollapsibleContent>
<div className="mb-4"> </Collapsible>
<Label>Medications:</Label> ))}
{medications.map((medication, index) => ( </ul>
<div key={index} className="mb-2"> </div>
<Input )}
type="text" </CardContent>
placeholder="Name" </Card>
value={medication.name} </div>
onChange={(e) => handleMedicationsChange(index, 'name', e.target.value)}
className="mb-2"
/>
<Input
type="text"
placeholder="Dosage"
value={medication.dosage}
onChange={(e) => handleMedicationsChange(index, 'dosage', e.target.value)}
className="mb-2"
/>
<Input
type="text"
placeholder="Frequency"
value={medication.frequency}
onChange={(e) => handleMedicationsChange(index, 'frequency', e.target.value)}
className="mb-2"
/>
</div>
))}
<Button onClick={handleAddMedication} className="mt-2">Add Medication</Button>
</div>
<div className="mb-4">
<Label>Diagnoses:</Label>
<Input
type="text"
value={diagnoses.join(',')}
onChange={handleDiagnosesChange}
/>
</div>
</CardContent>
<CardFooter>
<Button onClick={handleSave}>Save</Button>
</CardFooter>
</Card>
)}
</div>
)}
</CardContent>
</Card>
</div>
); );
}; };
export default AccountPage; export default AccountPage;

4
src/components/panel-ui/patient/app-chat.tsx
View File

@@ -1,7 +1,7 @@
import Image from "next/image" import Image from "next/image"
// @ts-ignore
export function Message({ avatarUrl, message, sender }) { export function Message({ avatarUrl, message, sender }: { avatarUrl: string, message: string, sender: string }) {
return ( return (
<div className="flex items-start space-x-4 p-4"> <div className="flex items-start space-x-4 p-4">
<Image <Image

11
src/components/ui/collapsible.tsx Normal file
View File

@@ -0,0 +1,11 @@
"use client"
import * as CollapsiblePrimitive from "@radix-ui/react-collapsible"
const Collapsible = CollapsiblePrimitive.Root
const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger
const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent
export { Collapsible, CollapsibleTrigger, CollapsibleContent }