patient accounts page

package.json

@@ -28,7 +28,7 @@
     "https-localhost": "^4.7.1",
     "lucide-react": "^0.474.0",
     "mongoose": "^8.9.5",
-    "multer": "^1.4.5-lts.1",
+    "multer": "1.4.5-lts.1",
     "next": "15.1.6",
     "next-themes": "^0.4.4",
     "openai-whisper": "^1.0.2",

src/app/(panels)/suite/patient/account/PatientForm.tsx

@@ -0,0 +1,115 @@
+"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 }: { person: { email: string, name: string, medications: any[], diagnoses: string[] } }) {
+
+    const [medications, setMedications] = useState(person.medications || [])
+
+    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: { name: string, dosage: string, frequency:string }, 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>
+    )
+}
+

src/app/(panels)/suite/patient/account/page.jsx

@@ -0,0 +1,100 @@
+"use client"
+import { useState, useEffect } from 'react';
+import axios from 'axios';
+import { useUser } from '@clerk/nextjs';
+
+import { Button } from '@/components/ui/button';
+import { Label } from '@/components/ui/label';
+import { Card, CardHeader, CardContent } from '@/components/ui/card';
+
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible"
+import { ChevronDown } from "lucide-react"
+
+import { PersonForm } from './PatientForm';
+
+const AccountPage = () => {
+	const { user } = useUser();
+	const [userData, setUserData] = useState(null);
+	const [patients, setPatients] = useState([]);
+
+	useEffect(() => {
+		if (user) {
+			axios.get(`/api/user?userId=${user.id}`).then(response => {
+				setUserData(response.data);
+				if (response.data.role === 'caregiver') {
+					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);
+		}
+	};
+
+	if (!userData) return <div>Loading...</div>;
+
+	return (
+		<div className="container mx-auto p-4">
+			<Card>
+				<CardHeader>
+					<h1 className="text-2xl font-bold">Account Page</h1>
+				</CardHeader>
+				<CardContent>
+					<div className="mb-4">
+						<Label>Name:</Label>
+						<p>{userData.name}</p>
+					</div>
+					<div className="mb-4">
+						<Label>Email:</Label>
+						<p>{userData.email}</p>
+					</div>
+					<div className="mb-4">
+						<Label>Role:</Label>
+						<p>{userData.role}</p>
+					</div>
+					<Button onClick={handleRoleChange} className="mb-4">
+						Change role to {userData.role === 'patient' ? 'caregiver' : 'patient'}
+					</Button>
+
+					{userData.role === 'caregiver' && (
+						<div>
+							<h2 className="text-xl font-bold mb-4">Patients</h2>
+							<ul className="mb-4">
+								{patients.map(patient => (
+									<Collapsible key={patient.id}>
+										<div className="flex items-center justify-between p-2 bg-gray-100 dark:bg-neutral-800 rounded-t-lg">
+											<div>
+												<h2 className="text-lg font-semibold">{patient.name}</h2>
+												<p className="text-sm text-gray-400">{patient.role}</p>
+											</div>
+											<CollapsibleTrigger asChild>
+												<Button variant="ghost" size="sm">
+													<ChevronDown className="h-4 w-4" />
+													<span className="sr-only">Toggle</span>
+												</Button>
+											</CollapsibleTrigger>
+										</div>
+										<CollapsibleContent className="p-4 border border-t-0 rounded-b-lg">
+											<PersonForm person={patient} />
+										</CollapsibleContent>
+									</Collapsible>
+								))}
+							</ul>
+						</div>
+					)}
+				</CardContent>
+			</Card>
+		</div>
+	);
+};
+
+export default AccountPage;