add medication button

src/app/(web)/account/page.jsx

@@ -1,12 +1,7 @@
-"use client"
 import { useState, useEffect } from 'react';
 import axios from 'axios';
-import { useUser } from '@clerk/nextjs';
+import { useUser } from '@clerk/clerk-react';
-import { Button } from '../../../components/ui/button';
+import { Button, Input, Label, Card, CardHeader, CardContent, CardFooter } from 'components/ui';
-import { Input } from '../../../components/ui/input';
-import { Label } from '../../../components/ui/label';
-import { Card, CardHeader, CardContent, CardFooter } from '../../../components/ui/card';
-
 
 const AccountPage = () => {
   const { user } = useUser();
@@ -55,17 +50,16 @@ const AccountPage = () => {
     setDiagnoses(e.target.value.split(','));
   };
 
+  const handleAddMedication = () => {
+    setMedications([...medications, { name: '', dosage: '', frequency: '' }]);
+  };
+
   const handleSave = async () => {
-		try {
+    await axios.put(`/api/patients/${selectedPatient.email}`, {
-			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>;
@@ -141,6 +135,7 @@ const AccountPage = () => {
                           />
                         </div>
                       ))}
+                      <Button onClick={handleAddMedication} className="mt-2">Add Medication</Button>
                     </div>
                     <div className="mb-4">
                       <Label>Diagnoses:</Label>