Merge branch 'main' of https://github.com/GamerBoss101/HoyaHax2025

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",

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>
+    )
+}
+

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

@@ -2,18 +2,20 @@
 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) {
@@ -38,39 +40,6 @@ const AccountPage = () => {
 		}
 	};
 
-	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) {
-			console.error('Error updating patient data:', error);
-			alert('Failed to update patient data');
-		}
-	};
-	  
 	if (!userData) return <div>Loading...</div>;
 
 	return (
@@ -101,65 +70,25 @@ const AccountPage = () => {
 							<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>
+									<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>
-  
-				{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>

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

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 }