profile settings part 1

Author: NettyDev

bun.lock

@@ -60,6 +60,7 @@
     "@radix-ui/react-slot": "^1.2.3",
     "@radix-ui/react-switch": "^1.2.5",
     "@radix-ui/react-tabs": "^1.1.12",
+    "@radix-ui/react-tooltip": "^1.2.7",
     "@react-email/components": "^0.0.41",
     "better-auth": "^1.2.8",
     "class-variance-authority": "^0.7.1",
@@ -77,6 +78,7 @@
     "react-hook-form": "^7.57.0",
     "sonner": "^2.0.5",
     "tailwind-merge": "^3.3.0",
+    "use-debounce": "^10.0.5",
     "zod": "^3.25.51"
   },
   "devDependencies": {

package.json

@@ -0,0 +1,89 @@
+import { NextRequest } from "next/server";
+import { prisma } from "@/lib/database";
+import { auth } from "@/lib/auth";
+import { headers } from "next/headers";
+
+export async function POST(request: NextRequest) {
+  const { address } = await request.json();
+  const session = await auth.api.getSession({
+    headers: await headers()
+  });
+
+  if (!address) {
+    return Response.json({ status: "ERROR", message: "Invalid address data" }, { status: 400 });
+  }
+  if (!session || !session.user) {
+    return Response.json({ status: "ERROR", message: "Unauthorized" }, { status: 401 });
+  }
+
+  try {
+    const result = await prisma.address.findFirst({ where: { userId: session.user.id } });
+    if (result) {
+      await prisma.address.update({
+        where: { id: result.id },
+        data: {
+          street: address.street,
+          suite: address.suite,
+          zipcode: address.zipcode,
+          city: address.city
+        }
+      });
+    } else {
+      await prisma.address.create({
+        data: {
+          user: { connect: { id: session.user.id } },
+          street: address.street,
+          suite: address.suite,
+          zipcode: address.zipcode,
+          city: address.city
+        }
+      });
+    }
+
+    return Response.json({ status: "OK", address });
+  } catch (error) {
+    console.error("Error saving address:", error);
+    return Response.json({ status: "ERROR", message: "Failed to save address" }, { status: 500 });
+  }
+}
+
+export async function GET(request: NextRequest) {
+  const session = await auth.api.getSession({
+    headers: await headers()
+  });
+
+  if (!session || !session.user) {
+    return Response.json({ status: "ERROR", message: "Unauthorized" }, { status: 401 });
+  }
+
+  try {
+    const address = await prisma.address.findFirst({
+      where: { userId: session.user.id }
+    });
+
+    if (!address) {
+      return Response.json({
+        status: "OK",
+        address: {
+          street: "",
+          suite: "",
+          postalCode: "",
+          city: ""
+        }
+      });
+    }
+
+    return Response.json({
+      status: "OK",
+      address: {
+        street: address.street,
+        suite: address.suite,
+        zipCode: address.zipcode,
+        city: address.city
+      }
+    });
+  } catch (error) {
+    console.error("Error fetching address:", error);
+    return Response.json({ status: "ERROR", message: "Failed to fetch address" }, { status: 500 });
+  }
+}

src/app/api/profile/address/route.ts

@@ -72,7 +72,11 @@ function Profile() {
         <div className="flex flex-col md:flex-row md:items-start gap-6 md:gap-8 lg:gap-10">
           <div className="w-full md:w-auto md:min-w-[260px] lg:min-w-[300px] flex flex-col gap-6 md:gap-8 mb-6 md:mb-0">
             <div className="flex items-center gap-4 p-2 md:p-0">
-              <UserAvatar user={{ name: imie, image: null }} className="h-14 w-14 sm:h-16 sm:w-16" />
+              <UserAvatar
+                user={{ name: imie, image: null }}
+                className="h-14 w-14 sm:h-16 sm:w-16"
+                fallbackClassName="text-2xl"
+              />
               <div className="flex flex-col min-w-0">
                 <span className="text-sm text-shadow-xs">Cześć,</span>
                 <span className="text-lg sm:text-xl font-semibold text-red-700 leading-tight truncate">{imie}</span>

src/app/api/profile/company/route.ts

@@ -1,5 +1,6 @@
 import { cn } from "@/lib/utils";
 import { Label } from "@/components/ui/label";
+import clsx from "clsx";
 
 interface FormInputProps {
   label: string;
@@ -9,6 +10,7 @@ interface FormInputProps {
   required?: boolean;
   className?: string;
   value?: string;
+  disabled?: boolean;
   onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
 }
 
@@ -20,6 +22,7 @@ export default function FormInput({
   required = false,
   className = "",
   value,
+  disabled = false,
   onChange
 }: FormInputProps) {
   return (
@@ -34,9 +37,13 @@ export default function FormInput({
         placeholder={placeholder}
         required={required}
         value={value}
+        disabled={disabled}
         onChange={onChange}
-        className="border border-stone-300 rounded-md p-2.5 text-sm focus:ring-2 focus:ring-red-500 focus:border-red-500 transition-colors duration-200"
+        className={clsx(
+          disabled && "bg-stone-100 cursor-not-allowed",
+          "border border-stone-300 rounded-md p-2.5 text-sm focus:ring-2 focus:ring-red-500 focus:border-red-500 transition-colors duration-200"
+        )}
       />
     </div>
   );
-}
+}

src/app/profile/page.tsx

@@ -170,7 +170,7 @@ export const CartProvider = ({
   );
 };
 
-function deepEqual(obj1: { [x: string]: any } | null, obj2: { [x: string]: any } | null) {
+export function deepEqual(obj1: { [x: string]: any } | null, obj2: { [x: string]: any } | null) {
   if (obj1 === obj2) {
     return true;
   }