From 070d6c81fda4517fe519421e91163ff609f3afd7 Mon Sep 17 00:00:00 2001
From: Sir Blob <76974209+GamerBoss101@users.noreply.github.com>
Date: Sat, 25 Jan 2025 13:52:46 -0500
Subject: [PATCH] Doctor Patient Edit Form Update

---
 package.json                                  |   1 +
 .../suite/doctor/account/PatientForm.tsx      | 120 +++++++++
 .../(panels)/suite/doctor/account/page.jsx    | 235 ++++++------------
 src/components/panel-ui/patient/app-chat.tsx  |   4 +-
 src/components/ui/collapsible.tsx             |  11 +
 5 files changed, 216 insertions(+), 155 deletions(-)
 create mode 100644 src/app/(panels)/suite/doctor/account/PatientForm.tsx
 create mode 100644 src/components/ui/collapsible.tsx

diff --git a/package.json b/package.json
index 9089a28..47194a3 100644
--- a/package.json
+++ b/package.json
@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "@clerk/nextjs": "^6.10.2",
+    "@radix-ui/react-collapsible": "^1.1.2",
     "@radix-ui/react-dialog": "^1.1.5",
     "@radix-ui/react-dropdown-menu": "^2.1.5",
     "@radix-ui/react-label": "^2.1.1",
diff --git a/src/app/(panels)/suite/doctor/account/PatientForm.tsx b/src/app/(panels)/suite/doctor/account/PatientForm.tsx
new file mode 100644
index 0000000..3cb246c
--- /dev/null
+++ b/src/app/(panels)/suite/doctor/account/PatientForm.tsx
@@ -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>
+    )
+}
+
diff --git a/src/app/(panels)/suite/doctor/account/page.jsx b/src/app/(panels)/suite/doctor/account/page.jsx
index f1d9fab..1107cab 100644
--- a/src/app/(panels)/suite/doctor/account/page.jsx
+++ b/src/app/(panels)/suite/doctor/account/page.jsx
@@ -2,170 +2,99 @@
 import { useState, useEffect } from 'react';
 import axios from 'axios';
 import { useUser } from '@clerk/nextjs';
+
 import { Button } from '@/components/ui/button';
-import { Input } from '@/components/ui/input';
 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 { user } = useUser();
 	const [userData, setUserData] = useState(null);
 	const [patients, setPatients] = useState([]);
-	const [selectedPatient, setSelectedPatient] = useState(null);
-	const [medications, setMedications] = useState([]);
-	const [diagnoses, setDiagnoses] = 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);
-	  }
-	};
-  
-	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,
+		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));
+				}
 			});
-			alert('Patient data updated successfully');
-		} catch (error) {
-			console.error('Error updating patient data:', error);
-			alert('Failed to update patient 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 => (
-					<li
-					  key={patient.email}
-					  onClick={() => handlePatientSelect(patient)}
-					  className="cursor-pointer hover:bg-gray-200 p-2"
-					>
-					  {patient.name}
-					</li>
-				  ))}
-				</ul>
-  
-				{selectedPatient && (
-				  <Card>
-					<CardHeader>
-					  <h3 className="text-xl font-bold">Edit Patient: {selectedPatient.name}</h3>
-					</CardHeader>
-					<CardContent>
-					  <div className="mb-4">
-						<Label>Medications:</Label>
-						{medications.map((medication, index) => (
-						  <div key={index} className="mb-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>
-						))}
-						<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>
+		<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;
\ No newline at end of file
+};
+
+export default AccountPage;
\ No newline at end of file
diff --git a/src/components/panel-ui/patient/app-chat.tsx b/src/components/panel-ui/patient/app-chat.tsx
index c6fa2cc..c8360b0 100644
--- a/src/components/panel-ui/patient/app-chat.tsx
+++ b/src/components/panel-ui/patient/app-chat.tsx
@@ -1,7 +1,7 @@
 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 (
         <div className="flex items-start space-x-4 p-4">
             <Image
diff --git a/src/components/ui/collapsible.tsx b/src/components/ui/collapsible.tsx
new file mode 100644
index 0000000..9fa4894
--- /dev/null
+++ b/src/components/ui/collapsible.tsx
@@ -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 }