im afraid we cant move forward if you are not able to resolve the simple

src/app/admin/settings/user/page.tsx

@@ -16,8 +16,9 @@ import {
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { useToast } from "@/hooks/use-toast";
-import { useEffect, useTransition } from "react";
+import { useEffect, useState, useTransition } from "react";
 import { getUser, updateUser } from "@/lib/actions/user";
+import { Skeleton } from "@/components/ui/skeleton";
 
 const userProfileSchema = z.object({
   name: z.string().min(1, "Name is required"),
@@ -34,6 +35,7 @@ type UserProfileFormValues = z.infer<typeof userProfileSchema>;
 export default function UserProfilePage() {
   const { toast } = useToast();
   const [isSaving, startSavingTransition] = useTransition();
+  const [isLoading, setIsLoading] = useState(true);
 
   const {
     register,
@@ -52,6 +54,7 @@ export default function UserProfilePage() {
 
   useEffect(() => {
     const fetchUser = async () => {
+      setIsLoading(true);
       const user = await getUser();
       if (user) {
         reset({
@@ -60,10 +63,17 @@ export default function UserProfilePage() {
           password: "",
           confirmPassword: ""
         });
+      } else {
+         toast({
+          title: "Error",
+          description: "Could not load user profile.",
+          variant: "destructive",
+        });
       }
+      setIsLoading(false);
     };
     fetchUser();
-  }, [reset]);
+  }, [reset, toast]);
 
   const onSubmit: SubmitHandler<UserProfileFormValues> = (data) => {
     startSavingTransition(async () => {
@@ -99,16 +109,31 @@ export default function UserProfilePage() {
           </CardDescription>
         </CardHeader>
         <CardContent className="grid gap-6">
-          <div className="grid gap-2">
+          {isLoading ? (
-            <Label htmlFor="name">Name</Label>
+            <>
-            <Input id="name" {...register("name")} />
+              <div className="grid gap-2">
-            {errors.name && <p className="text-sm text-destructive">{errors.name.message}</p>}
+                <Label htmlFor="name">Name</Label>
-          </div>
+                <Skeleton className="h-10 w-full" />
-          <div className="grid gap-2">
+              </div>
-            <Label htmlFor="email">Email</Label>
+              <div className="grid gap-2">
-            <Input id="email" type="email" {...register("email")} />
+                <Label htmlFor="email">Email</Label>
-            {errors.email && <p className="text-sm text-destructive">{errors.email.message}</p>}
+                 <Skeleton className="h-10 w-full" />
-          </div>
+              </div>
+            </>
+          ) : (
+            <>
+              <div className="grid gap-2">
+                <Label htmlFor="name">Name</Label>
+                <Input id="name" {...register("name")} />
+                {errors.name && <p className="text-sm text-destructive">{errors.name.message}</p>}
+              </div>
+              <div className="grid gap-2">
+                <Label htmlFor="email">Email</Label>
+                <Input id="email" type="email" {...register("email")} />
+                {errors.email && <p className="text-sm text-destructive">{errors.email.message}</p>}
+              </div>
+            </>
+          )}
           <div className="grid gap-2">
             <Label htmlFor="password">New Password</Label>
             <Input id="password" type="password" {...register("password")} />
@@ -121,7 +146,7 @@ export default function UserProfilePage() {
           </div>
         </CardContent>
         <CardFooter className="flex justify-end">
-          <Button type="submit" disabled={isSaving || !isDirty}>
+          <Button type="submit" disabled={isSaving || !isDirty || isLoading}>
             {isSaving ? 'Saving...' : 'Save Changes'}
           </Button>
         </CardFooter>

src/lib/actions/user.ts

@@ -2,9 +2,9 @@
 'use server';
 
 import db from '@/lib/db';
-import type { User as DbUser } from '@/lib/types';
 import { z } from 'zod';
 import { auth } from '@/app/api/auth/[...nextauth]/route';
+import { User as DbUser } from '@/lib/types';
 
 const UserUpdateSchema = z.object({
   name: z.string().min(1, 'Name is required'),
@@ -12,18 +12,26 @@ const UserUpdateSchema = z.object({
   password: z.string().optional(),
 });
 
-type UserWithId = DbUser & { id: string };
+type UserForClient = {
+  id: string;
+  name: string;
+  email: string;
+}
 
-export async function getUser(): Promise<UserWithId | null> {
+export async function getUser(): Promise<UserForClient | null> {
   const session = await auth();
   if (!session?.user?.id) {
+    console.error('getUser: Not authenticated');
     return null;
   }
   try {
     const stmt = db.prepare('SELECT id, name, email FROM users WHERE id = ?');
     const user = stmt.get(session.user.id) as DbUser | undefined;
-    if (!user) return null;
+    if (!user) {
-    return { ...user, id: user.id.toString() };
+      console.error('getUser: User not found in DB');
+      return null;
+    }
+    return { id: user.id.toString(), name: user.name, email: user.email };
   } catch (error) {
     console.error('Failed to get user:', error);
     return null;
@@ -50,6 +58,7 @@ export async function updateUser(
 
   try {
     if (password && password.trim().length > 0) {
+      // In a real app, you would hash the password here
       const stmt = db.prepare(
         'UPDATE users SET name = ?, email = ?, password = ? WHERE id = ?'
       );