fixed commit for accountArea

src/app/account/AccountCard.tsx

@@ -20,7 +20,7 @@ export function AccountCard({ params, children }: AccountCardProps) {
       {children}
     </Card>
   );
-}
+} 
 
 export function AccountCardBody({ children }: { children: React.ReactNode }) {
   return <div className="p-4">{children}</div>;

src/app/account/Modal.tsx

@@ -0,0 +1,39 @@
+import React, { ReactNode } from 'react';
+
+interface ModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  children: ReactNode;
+}
+
+const Modal: React.FC<ModalProps> = ({ isOpen, onClose, children }) => {
+  if (!isOpen) return null;
+
+  return (
+    <div style={{
+      position: 'fixed',
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      backgroundColor: 'rgba(0, 0, 0, 0.5)',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      zIndex: 2,
+    }}>
+      <div style={{
+        padding: '20px',
+        backgroundColor: 'white',
+        borderRadius: '8px',
+        width: '400px',
+        minHeight: '200px'
+      }}>
+        <button onClick={onClose} style={{ position: 'absolute', top: '10px', right: '10px' }}>Close</button>
+        {children}
+      </div>
+    </div>
+  );
+};
+
+export default Modal;

src/app/account/NotificationPreferencesCard.tsx

@@ -0,0 +1,81 @@
+import React, { useState } from 'react';
+import { AccountCard, AccountCardBody, AccountCardFooter } from './AccountCard';
+import { LabeledCheckbox } from '@/components/ui/labeledCheckbox';  // Ensure this import is correct
+import { Button } from '@/components/ui/button';
+import { useToast } from '@/components/ui/use-toast';
+import { useTransition } from 'react';
+import { FormSubmitHandler } from './accountTypes';
+import Tooltip from './Tooltip';
+
+export default function NotificationPreferencesCard() {
+  const { toast } = useToast();
+  const [isPending, startTransition] = useTransition();
+
+  // States for each notification preference
+  const [emailNotifications, setEmailNotifications] = useState(false);
+  const [smsNotifications, setSmsNotifications] = useState(false);
+  const [pushNotifications, setPushNotifications] = useState(false);
+
+  const handleSave: FormSubmitHandler = async () => {
+    startTransition(async () => {
+      const preferences = { emailNotifications, smsNotifications, pushNotifications };
+      const res = await fetch("/api/account/notifications", {
+        method: "PUT",
+        body: JSON.stringify(preferences),
+        headers: { "Content-Type": "application/json" },
+      });
+      if (res.ok) {
+        toast({ description: "Notification preferences updated successfully!" });
+      } else {
+        toast({ description: "Failed to update preferences.", variant: "destructive" });
+      }
+    });
+  };
+
+  return (
+    <AccountCard
+      params={{
+        header: "Notification Preferences",
+        description: "Customize how you want to receive notifications.",
+      }}
+    >
+      <form onSubmit={(e) => { e.preventDefault(); handleSave(); }}>
+        <AccountCardBody>
+        <Tooltip text="Emails will be sent once a day.">
+          <LabeledCheckbox
+            label="Email Notifications"
+            name="emailNotifications"
+            checked={emailNotifications}
+            onCheckedChange={setEmailNotifications}
+          />
+        </Tooltip>
+        <span>&nbsp;&nbsp;</span>
+        <span>&nbsp;&nbsp;</span>
+        <span>&nbsp;&nbsp;</span>
+        <Tooltip text="SMS will be sent immediately, but might arrive delayed.">
+          <LabeledCheckbox
+            label="SMS Notifications"
+            name="smsNotifications"
+            checked={smsNotifications}
+            onCheckedChange={setSmsNotifications}
+          />
+        </Tooltip>
+        <span>&nbsp;&nbsp;</span>
+        <span>&nbsp;&nbsp;</span>
+        <span>&nbsp;&nbsp;</span>
+        <Tooltip text="Activate Push Notifications for real-time Updates.">
+          <LabeledCheckbox
+            label="Push Notifications"
+            name="pushNotifications"
+            checked={pushNotifications}
+            onCheckedChange={setPushNotifications}
+          />
+        </Tooltip>
+        </AccountCardBody>
+        <AccountCardFooter description="">
+          <Button type="submit" disabled={isPending}>Save Preferences</Button>
+        </AccountCardFooter>
+      </form>
+    </AccountCard>
+  );
+}

src/app/account/PrivacySettingsCard.tsx

@@ -0,0 +1,69 @@
+import React from 'react';
+import { AccountCard, AccountCardBody, AccountCardFooter } from './AccountCard';
+import { Button } from '@/components/ui/button';
+import { useToast } from '@/components/ui/use-toast';
+import { useTransition } from 'react';
+import { PrivacySettings, FormSubmitHandler } from './accountTypes';
+import { LabeledCheckbox } from '@/components/ui/labeledCheckbox';
+import Tooltip from './Tooltip';
+
+export default function PrivacySettingsCard() {
+    const { toast } = useToast();
+    const [isPending, startTransition] = useTransition();
+
+    // Assuming you handle state for checkboxes
+    const [profileVisibility, setProfileVisibility] = React.useState(false);
+    const [dataDownload, setDataDownload] = React.useState(false);
+
+    const handleSave: FormSubmitHandler = async () => {
+        startTransition(async () => {
+            const privacySettings = { profileVisibility, dataDownload };
+            const res = await fetch("/api/account/privacy", {
+                method: "PUT",
+                body: JSON.stringify(privacySettings),
+                headers: { "Content-Type": "application/json" },
+            });
+            if (res.ok) {
+                toast({ description: "Privacy settings updated successfully!" });
+            } else {
+                toast({ description: "Failed to update settings.", variant: "destructive" });
+            }
+        });
+    };
+
+    return (
+      <AccountCard
+        params={{
+          header: "Privacy Settings",
+          description: "Manage your privacy settings here."
+        }}
+      >
+        <form onSubmit={(e) => { e.preventDefault(); handleSave(); }}>
+          <AccountCardBody>
+          <Tooltip text="Define how private or public you want your profile to be.">
+            <LabeledCheckbox
+                label="Profile Visibility"
+                name="profileVisibility"
+                checked={profileVisibility}
+                onCheckedChange={(newCheckedState) => setProfileVisibility(newCheckedState)}
+            />
+          </Tooltip>
+          <span>&nbsp;&nbsp;</span>
+          <span>&nbsp;&nbsp;</span>
+          <span>&nbsp;&nbsp;</span>
+          <Tooltip text="Request downloading an aggregated dataset that is based on your activity and other things.">
+            <LabeledCheckbox
+                label="Data Download"
+                name="dataDownload"
+                checked={dataDownload}
+                onCheckedChange={(newCheckedState) => setDataDownload(newCheckedState)}
+            />
+          </Tooltip>
+          </AccountCardBody>
+          <AccountCardFooter description="">
+            <Button type="submit" disabled={isPending}>Save Settings</Button>
+          </AccountCardFooter>
+        </form>
+      </AccountCard>
+    );
+  }

src/app/account/Tooltip.tsx

@@ -0,0 +1,39 @@
+import React, { ReactNode, useState } from 'react';
+
+interface TooltipProps {
+  children: ReactNode;
+  text: string;
+}
+
+const Tooltip: React.FC<TooltipProps> = ({ children, text }) => {
+  const [isVisible, setIsVisible] = useState(false);
+
+  return (
+    <div
+      onMouseEnter={() => setIsVisible(true)}
+      onMouseLeave={() => setIsVisible(false)}
+      style={{ position: 'relative', display: 'inline-block' }}
+    >
+      {children}
+      {isVisible && (
+        <div style={{
+          position: 'absolute',
+          width: '120px',
+          bottom: '100%',
+          left: '50%',
+          marginLeft: '-60px',
+          backgroundColor: 'black',
+          color: 'white',
+          textAlign: 'center',
+          padding: '5px 0',
+          borderRadius: '6px',
+          zIndex: 1
+        }}>
+          {text}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default Tooltip;

src/app/account/UpdateEmailCard.tsx

@@ -4,6 +4,7 @@ import { Input } from "@/components/ui/input";
 import { useToast } from "@/components/ui/use-toast";
 import { useTransition } from "react";
 import { useRouter } from "next/navigation";
+import Tooltip from './Tooltip';
 
 export default function UpdateEmailCard({ email }: { email: string }) {
   const { toast } = useToast();
@@ -39,18 +40,21 @@ export default function UpdateEmailCard({ email }: { email: string }) {
     <AccountCard
       params={{
         header: "Your Email",
-        description:
-          "Please enter the email address you want to use with your account.",
+        description: "Please enter the email address you want to use with your account.",
       }}
     >
       <form onSubmit={handleSubmit}>
         <AccountCardBody>
-          <Input defaultValue={email ?? ""} name="email" disabled={true} />
+          <Tooltip text="Make sure to use an email you frequently check as important account notifications will be sent here.">
+            <Input defaultValue={email ?? ""} name="email" disabled={false} />
+          </Tooltip>
         </AccountCardBody>
-        <AccountCardFooter description="We will email vou to verify the change.">
-          <Button disabled={true}>Update Email</Button>
+        <AccountCardFooter description="We will email you to verify the change.">
+          <Button disabled={false}>Update Email</Button>
         </AccountCardFooter>
       </form>
     </AccountCard>
   );
+
 }
+

src/app/account/UpdateNameCard.tsx

@@ -5,6 +5,7 @@ import { Input } from "@/components/ui/input";
 import { useToast } from "@/components/ui/use-toast";
 import { useTransition } from "react";
 import { useRouter } from "next/navigation";
+import Tooltip from './Tooltip';
 
 export default function UpdateNameCard({ name }: { name: string }) {
   const { toast } = useToast();
@@ -45,10 +46,12 @@ export default function UpdateNameCard({ name }: { name: string }) {
     >
       <form onSubmit={handleSubmit}>
         <AccountCardBody>
-          <Input defaultValue={name ?? ""} name="name" disabled={true} />
+          <Tooltip text="This has to be your real Name until we added a Nickname feature.">
+            <Input defaultValue={name ?? ""} name="name" disabled={false} />
+          </Tooltip>
         </AccountCardBody>
         <AccountCardFooter description="64 characters maximum">
-          <Button disabled={true}>Update Name</Button>
+          <Button disabled={false}>Update Name</Button>
         </AccountCardFooter>
       </form>
     </AccountCard>

src/app/account/UpdatePasswordCard.tsx

@@ -0,0 +1,58 @@
+import React, { useState } from 'react';
+import { AccountCard, AccountCardBody, AccountCardFooter } from './AccountCard';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { useToast } from '@/components/ui/use-toast';
+import { useTransition } from 'react';
+import Modal from './Modal';
+
+export default function UpdatePasswordCard() {
+  const { toast } = useToast();
+  const [isPending, startTransition] = useTransition();
+  const [isModalOpen, setModalOpen] = useState(false); 
+  const handleSubmit = async (event: React.SyntheticEvent) => {
+    event.preventDefault();
+    const target = event.target as HTMLFormElement;
+    const form = new FormData(target);
+    const newPassword = form.get('newPassword') as string;
+
+    // Add password validation logic here
+
+    startTransition(async () => {
+      const res = await fetch("/api/account/password", {
+        method: "PUT",
+        body: JSON.stringify({ newPassword }),
+        headers: { "Content-Type": "application/json" },
+      });
+      if (res.ok) {
+        toast({ description: "Password updated successfully!" });
+        setModalOpen(false);
+      } else {
+        toast({ description: "Failed to update password.", variant: "destructive" });
+      }
+    });
+  };
+
+  return (
+    <>
+      <Button onClick={() => setModalOpen(true)}>Change Password</Button>
+      <Modal isOpen={isModalOpen} onClose={() => setModalOpen(false)}>
+        <AccountCard
+          params={{
+            header: "Update Password",
+            description: "Enter your new password below.",
+          }}
+        >
+          <form onSubmit={handleSubmit}>
+            <AccountCardBody>
+              <Input type="password" name="newPassword" required />
+            </AccountCardBody>
+            <AccountCardFooter description="">
+              <Button type="submit" disabled={isPending}>Update Password</Button>
+            </AccountCardFooter>
+          </form>
+        </AccountCard>
+      </Modal>
+    </>
+  );
+}