From 07c422c5c4170e8b9c7eb498f0d4a149933dfcce Mon Sep 17 00:00:00 2001
From: Dev Sharma <devsharmasoe@gmail.com>
Date: Thu, 24 Oct 2024 20:11:37 +0530
Subject: [PATCH 01/14] added the forms ui

---
 package.json                                  |   1 +
 src/app/newProfile/layout.tsx                 |  40 ++
 src/app/newProfile/page.tsx                   |  26 ++
 src/components/profile/ProfileAboutMe.tsx     | 126 +++++++
 .../profile/ProfileAccountSheet.tsx           | 156 ++++++++
 src/components/profile/ProfileEducation.tsx   | 250 +++++++++++++
 src/components/profile/ProfileExperience.tsx  | 321 ++++++++++++++++
 src/components/profile/ProfileHeroSection.tsx | 346 ++++++++++++++++++
 src/components/profile/ProfileHireme.tsx      |  35 ++
 src/components/profile/ProfileProjects.tsx    | 244 ++++++++++++
 src/components/profile/ProfileResume.tsx      | 158 ++++++++
 src/components/profile/ProfileSkills.tsx      |  58 +++
 .../ProfileEmptyContainers.tsx                |   7 +
 src/lib/constant/profile.constant.ts          |  10 +
 src/lib/validators/user.profile.validator.ts  |  84 +++++
 15 files changed, 1862 insertions(+)
 create mode 100644 src/app/newProfile/layout.tsx
 create mode 100644 src/app/newProfile/page.tsx
 create mode 100644 src/components/profile/ProfileAboutMe.tsx
 create mode 100644 src/components/profile/ProfileAccountSheet.tsx
 create mode 100644 src/components/profile/ProfileEducation.tsx
 create mode 100644 src/components/profile/ProfileExperience.tsx
 create mode 100644 src/components/profile/ProfileHeroSection.tsx
 create mode 100644 src/components/profile/ProfileHireme.tsx
 create mode 100644 src/components/profile/ProfileProjects.tsx
 create mode 100644 src/components/profile/ProfileResume.tsx
 create mode 100644 src/components/profile/ProfileSkills.tsx
 create mode 100644 src/components/profile/emptycontainers/ProfileEmptyContainers.tsx
 create mode 100644 src/lib/constant/profile.constant.ts

diff --git a/package.json b/package.json
index c8c006cd..587d6a45 100644
--- a/package.json
+++ b/package.json
@@ -79,6 +79,7 @@
     "react": "^18",
     "react-day-picker": "^8.10.1",
     "react-dom": "^18",
+    "react-dropzone": "^14.2.10",
     "react-hook-form": "^7.52.2",
     "react-icons": "^5.2.1",
     "react-quill": "^2.0.0",
diff --git a/src/app/newProfile/layout.tsx b/src/app/newProfile/layout.tsx
new file mode 100644
index 00000000..cf6617ca
--- /dev/null
+++ b/src/app/newProfile/layout.tsx
@@ -0,0 +1,40 @@
+'use client';
+import { getUserDetails } from '@/actions/user.profile.actions';
+import APP_PATHS from '@/config/path.config';
+import { useSession } from 'next-auth/react';
+import { useRouter } from 'next/navigation';
+import React, { useEffect } from 'react';
+
+const ProfileLayout = ({ children }: { children: React.ReactNode }) => {
+  const router = useRouter();
+  const session = useSession();
+  useEffect(() => {
+    if (session.status !== 'loading' && session.status === 'unauthenticated')
+      router.push(`${APP_PATHS.SIGNIN}?redirectTo=/profile`);
+  }, [session.status, router]);
+  useEffect(() => {
+    async function fetchUserDetails() {
+      try {
+        const res = await getUserDetails();
+        if (res.status) {
+          localStorage.setItem(
+            'skills',
+            JSON.stringify(res.additional?.skills)
+          );
+          localStorage.setItem(
+            'resume',
+            JSON.stringify(res.additional?.resume)
+          );
+        }
+      } catch (_error) {}
+    }
+    fetchUserDetails();
+  }, []);
+  return (
+    <div className="flex flex-col w-full container md:gap-6 md:pt-6 relative">
+      {children}
+    </div>
+  );
+};
+
+export default ProfileLayout;
diff --git a/src/app/newProfile/page.tsx b/src/app/newProfile/page.tsx
new file mode 100644
index 00000000..79434ef7
--- /dev/null
+++ b/src/app/newProfile/page.tsx
@@ -0,0 +1,26 @@
+import ProfileAboutMe from '@/components/profile/ProfileAboutMe';
+import ProfileEducation from '@/components/profile/ProfileEducation';
+import ProfileExperience from '@/components/profile/ProfileExperience';
+import ProfileHeroSection from '@/components/profile/ProfileHeroSection';
+import ProfileHireme from '@/components/profile/ProfileHireme';
+import ProfileProjects from '@/components/profile/ProfileProjects';
+import ProfileResume from '@/components/profile/ProfileResume';
+import ProfileSkills from '@/components/profile/ProfileSkills';
+import React from 'react';
+
+const page = () => {
+  return (
+    <>
+      <ProfileHeroSection />
+      <ProfileAboutMe />
+      <ProfileResume />
+      <ProfileSkills />
+      <ProfileProjects />
+      <ProfileExperience />
+      <ProfileEducation />
+      <ProfileHireme />
+    </>
+  );
+};
+
+export default page;
diff --git a/src/components/profile/ProfileAboutMe.tsx b/src/components/profile/ProfileAboutMe.tsx
new file mode 100644
index 00000000..e8c32397
--- /dev/null
+++ b/src/components/profile/ProfileAboutMe.tsx
@@ -0,0 +1,126 @@
+'use client';
+import { FileText } from 'lucide-react';
+import React, { useState } from 'react';
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+} from '@/components/ui/sheet';
+import { useForm } from 'react-hook-form';
+import {
+  aboutMeSchema,
+  AboutMeSchemaType,
+} from '@/lib/validators/user.profile.validator';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { Button } from '@/components/ui/button';
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+} from '@/components/ui/form';
+import { Textarea } from '../ui/textarea';
+
+const ProfileAboutMe = () => {
+  const [isSheetOpen, setIsSheetOpen] = useState<boolean>(false);
+
+  const handleClose = () => {
+    setIsSheetOpen(false);
+  };
+  const handleOpen = () => {
+    setIsSheetOpen(true);
+  };
+  const form = useForm<AboutMeSchemaType>({
+    resolver: zodResolver(aboutMeSchema),
+    defaultValues: {
+      aboutMe: '',
+    },
+  });
+
+  // function onSubmit(values: AboutMeSchemaType) {
+  //   console.log(values)
+  // }
+  function onSubmit() {}
+
+  const handleFormClose = () => {
+    form.reset();
+    handleClose();
+  };
+
+  return (
+    <>
+      <h3 className="font-bold text-2xl">About Me</h3>
+      <div className="border rounded-2xl  h-80 overflow-hidden flex flex-col gap-y-4 px-6 items-center justify-center">
+        <FileText width={32} height={32} />
+        <div className="text-center">
+          <h4 className="font-bold text-xl">
+            You haven’t added an about me yet
+          </h4>
+          <p className="text-sm font-medium text-gray-500">
+            Share a brief introduction to let companies know who you are.
+          </p>
+        </div>
+        <Button onClick={handleOpen} className="text-white rounded-sm">
+          Add About Me
+        </Button>
+      </div>
+      <Sheet open={isSheetOpen} onOpenChange={handleClose}>
+        <SheetContent className="flex flex-col pb-0">
+          <SheetHeader>
+            <SheetTitle className="text-2xl">Add About Me</SheetTitle>
+            <SheetDescription>
+              Share a brief introduction to let companies know who you are.
+            </SheetDescription>
+          </SheetHeader>
+          <div className="mt-5 flex-1 relative">
+            <Form {...form}>
+              <form
+                onSubmit={form.handleSubmit(onSubmit)}
+                className="space-y-8 h-full flex flex-col justify-between"
+              >
+                <div>
+                  <FormField
+                    control={form.control}
+                    name="aboutMe"
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormControl>
+                          <Textarea placeholder="Write here" {...field} />
+                        </FormControl>
+                        <FormDescription>
+                          Describe yourself between 50 to 255 characters.
+                        </FormDescription>
+                      </FormItem>
+                    )}
+                  />
+                </div>
+                <div className="py-4 flex gap-4 justify-end">
+                  <Button
+                    onClick={handleFormClose}
+                    variant={'outline'}
+                    className="mt-0 text-white rounded-[8px]"
+                  >
+                    {' '}
+                    Cancel{' '}
+                  </Button>
+                  <Button
+                    type="submit"
+                    className="mt-0 text-white rounded-[8px]"
+                  >
+                    {' '}
+                    Add About Me{' '}
+                  </Button>
+                </div>
+              </form>
+            </Form>
+          </div>
+        </SheetContent>
+      </Sheet>
+    </>
+  );
+};
+
+export default ProfileAboutMe;
diff --git a/src/components/profile/ProfileAccountSheet.tsx b/src/components/profile/ProfileAccountSheet.tsx
new file mode 100644
index 00000000..85c024f8
--- /dev/null
+++ b/src/components/profile/ProfileAccountSheet.tsx
@@ -0,0 +1,156 @@
+import React from 'react';
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+} from '@/components/ui/sheet';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+} from '@/components/ui/form';
+import {
+  UserPasswordSchema,
+  UserPasswordSchemaType,
+} from '@/lib/validators/user.profile.validator';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useForm } from 'react-hook-form';
+import { Input } from '../ui/input';
+import { Button } from '../ui/button';
+import { TriangleAlert } from 'lucide-react';
+
+const ProfileAccountSheet = ({
+  isOpen,
+  handleClose,
+}: {
+  isOpen: boolean;
+  handleClose: () => void;
+}) => {
+  const form = useForm<UserPasswordSchemaType>({
+    resolver: zodResolver(UserPasswordSchema),
+    defaultValues: {
+      confirmNewPassword: '',
+      currentPassword: '',
+      newPassword: '',
+    },
+  });
+
+  const onSubmit = () => {};
+
+  const handleFormClose = () => {
+    form.clearErrors();
+    form.reset();
+    handleClose();
+  };
+
+  return (
+    <Sheet open={isOpen} onOpenChange={handleClose}>
+      <SheetContent className="flex flex-col pb-0 overflow-y-auto no-scrollbar">
+        <SheetHeader>
+          <SheetTitle className="text-2xl">Account Settings</SheetTitle>
+          <SheetDescription>
+            Manage your account preferences, update your password, or delete
+            your account. Keep your profile secure and up-to-date.
+          </SheetDescription>
+        </SheetHeader>
+        <div className=" flex-1 relative">
+          <h2 className="text-xl mb-4 font-bold">Change password</h2>
+          <Form {...form}>
+            <form
+              onSubmit={form.handleSubmit(onSubmit)}
+              className="space-y-8 flex flex-col justify-between border px-3 py-3 rounded-sm"
+            >
+              <div className="flex flex-col gap-y-4">
+                <FormField
+                  control={form.control}
+                  name="currentPassword"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel> Current Password </FormLabel>
+                      <FormControl>
+                        <Input
+                          placeholder="Current Password"
+                          type="password"
+                          {...field}
+                          className="rounded-[8px]"
+                        />
+                      </FormControl>
+                    </FormItem>
+                  )}
+                />
+                <FormField
+                  control={form.control}
+                  name="newPassword"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>New Password</FormLabel>
+                      <FormControl>
+                        <Input
+                          placeholder="New Password"
+                          type="password"
+                          {...field}
+                          className="rounded-[8px]"
+                        />
+                      </FormControl>
+                    </FormItem>
+                  )}
+                />
+                <FormField
+                  control={form.control}
+                  name="confirmNewPassword"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>Confirm New Password</FormLabel>
+                      <FormControl>
+                        <Input
+                          placeholder="Confirm New Password"
+                          {...field}
+                          className="rounded-[8px]"
+                          type="password"
+                        />
+                      </FormControl>
+                    </FormItem>
+                  )}
+                />
+                <div className="py-4 flex gap-4 justify-end">
+                  <Button
+                    type="reset"
+                    onClick={handleFormClose}
+                    variant={'outline'}
+                    className="mt-0 text-white rounded-[8px]"
+                  >
+                    Cancel
+                  </Button>
+                  <Button
+                    type="submit"
+                    className="mt-0 text-white rounded-[8px]"
+                  >
+                    Update Password
+                  </Button>
+                </div>
+              </div>
+            </form>
+          </Form>
+
+          <div className="h-60 bg-red-600 bg-opacity-10 mt-5 rounded-md flex flex-col justify-center items-center p-6 text-center ">
+            <TriangleAlert height={32} width={32} className="text-[#DD503F]" />
+            <h4 className="text-xl font-bold text-slate-50">Delete account</h4>
+            <p className="text-slate-400 text-sm">
+              Permanently delete your account and all associated data. This
+              action cannot be undone.
+            </p>
+            <Button variant={'destructive'} className="mt-3">
+              Delete my account
+            </Button>
+          </div>
+        </div>
+      </SheetContent>
+    </Sheet>
+  );
+};
+
+export default ProfileAccountSheet;
diff --git a/src/components/profile/ProfileEducation.tsx b/src/components/profile/ProfileEducation.tsx
new file mode 100644
index 00000000..b2874d25
--- /dev/null
+++ b/src/components/profile/ProfileEducation.tsx
@@ -0,0 +1,250 @@
+'use client';
+import { Info } from 'lucide-react';
+import React, { useState } from 'react';
+import { Button } from '../ui/button';
+import { useForm } from 'react-hook-form';
+import {
+  DegreeEnum,
+  FieldOfStudyEnum,
+  profileEducationSchema,
+  profileEducationType,
+} from '@/lib/validators/user.profile.validator';
+import { zodResolver } from '@hookform/resolvers/zod';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/components/ui/form';
+import { Input } from '../ui/input';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '../ui/select';
+import _ from 'lodash';
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+} from '@/components/ui/sheet';
+
+const ProfileEducation = () => {
+  const [isSheetOpen, setIsSheetOpen] = useState<boolean>(false);
+
+  const handleClose = () => {
+    setIsSheetOpen(false);
+  };
+  const handleOpen = () => {
+    setIsSheetOpen(true);
+  };
+
+  const form = useForm<profileEducationType>({
+    resolver: zodResolver(profileEducationSchema),
+    defaultValues: {
+      instituteName: '',
+      degree: DegreeEnum.BTech,
+      fieldOfStudy: FieldOfStudyEnum.CS,
+      startDate: undefined,
+      endDate: undefined,
+    },
+  });
+
+  const handleFormClose = () => {
+    form.reset();
+    form.clearErrors();
+    handleClose();
+  };
+
+  const onSubmit = () => {};
+
+  return (
+    <>
+      <h3 className="font-bold text-2xl">Education</h3>
+      <div className="border rounded-2xl  h-80 overflow-hidden flex flex-col gap-y-4 px-6 items-center justify-center">
+        <Info width={32} height={32} />
+        <div className="text-center">
+          <h4 className="font-bold text-xl">You haven’t added education yet</h4>
+          <p className="text-sm font-medium text-gray-500">
+            Provide your education background to complete your profile.
+          </p>
+        </div>
+        <Button onClick={handleOpen} className="text-white rounded-sm">
+          Add your education
+        </Button>
+      </div>
+
+      <Sheet open={isSheetOpen} onOpenChange={handleClose}>
+        <SheetContent className="flex flex-col pb-0">
+          <SheetHeader>
+            <SheetTitle className="text-2xl">Add New Project</SheetTitle>
+            <SheetDescription>
+              Highlight key project that demonstrate your technical abilities
+              and innovative problem-solving.
+            </SheetDescription>
+          </SheetHeader>
+          <div className="mt-5 flex-1 relative">
+            <Form {...form}>
+              <form
+                onSubmit={form.handleSubmit(onSubmit)}
+                className="space-y-8 h-full flex flex-col justify-between"
+              >
+                <div className=" flex flex-col gap-y-4">
+                  <FormField
+                    control={form.control}
+                    name="instituteName"
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel> Project Name </FormLabel>
+                        <FormControl>
+                          <Input
+                            placeholder="Enter Institute Name"
+                            {...field}
+                          />
+                        </FormControl>
+                      </FormItem>
+                    )}
+                  />
+                  <FormField
+                    control={form.control}
+                    name="degree"
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel>Employment Type</FormLabel>
+                        <Select
+                          onValueChange={field.onChange}
+                          defaultValue={field.value}
+                        >
+                          <FormControl>
+                            <SelectTrigger>
+                              <SelectValue />
+                            </SelectTrigger>
+                          </FormControl>
+                          <SelectContent>
+                            {Object.values(DegreeEnum).map((type) => (
+                              <SelectItem key={type} value={type}>
+                                {_.startCase(type)}
+                              </SelectItem>
+                            ))}
+                          </SelectContent>
+                        </Select>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+                  <FormField
+                    control={form.control}
+                    name="fieldOfStudy"
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel>Employment Type</FormLabel>
+                        <Select
+                          onValueChange={field.onChange}
+                          defaultValue={field.value}
+                        >
+                          <FormControl>
+                            <SelectTrigger>
+                              <SelectValue />
+                            </SelectTrigger>
+                          </FormControl>
+                          <SelectContent>
+                            {Object.values(FieldOfStudyEnum).map((type) => (
+                              <SelectItem key={type} value={type}>
+                                {_.startCase(type)}
+                              </SelectItem>
+                            ))}
+                          </SelectContent>
+                        </Select>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+
+                  <FormField
+                    control={form.control}
+                    name="startDate"
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel>Start Date</FormLabel>
+                        <FormControl>
+                          <Input
+                            type="date"
+                            {...field}
+                            value={
+                              field.value
+                                ? field.value.toISOString().split('T')[0]
+                                : ''
+                            }
+                            onChange={(e) =>
+                              field.onChange(new Date(e.target.value))
+                            }
+                          />
+                        </FormControl>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+
+                  <FormField
+                    control={form.control}
+                    name="endDate"
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel>End Date</FormLabel>
+                        <FormControl>
+                          <Input
+                            type="date"
+                            {...field}
+                            value={
+                              field.value
+                                ? field.value.toISOString().split('T')[0]
+                                : ''
+                            }
+                            onChange={(e) =>
+                              field.onChange(
+                                e.target.value
+                                  ? new Date(e.target.value)
+                                  : undefined
+                              )
+                            }
+                          />
+                        </FormControl>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+                </div>
+                <div className="py-4 flex gap-4 justify-end">
+                  <Button
+                    type="reset"
+                    onClick={handleFormClose}
+                    variant={'outline'}
+                    className="mt-0 text-white rounded-[8px]"
+                  >
+                    {' '}
+                    Cancel{' '}
+                  </Button>
+                  <Button
+                    type="submit"
+                    className="mt-0 text-white rounded-[8px]"
+                  >
+                    {' '}
+                    Add Education{' '}
+                  </Button>
+                </div>
+              </form>
+            </Form>
+          </div>
+        </SheetContent>
+      </Sheet>
+    </>
+  );
+};
+
+export default ProfileEducation;
diff --git a/src/components/profile/ProfileExperience.tsx b/src/components/profile/ProfileExperience.tsx
new file mode 100644
index 00000000..a77fb0f5
--- /dev/null
+++ b/src/components/profile/ProfileExperience.tsx
@@ -0,0 +1,321 @@
+'use client';
+import { Info } from 'lucide-react';
+import React, { useState } from 'react';
+import { Button } from '../ui/button';
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+} from '@/components/ui/sheet';
+import { useForm } from 'react-hook-form';
+import {
+  expFormSchemaType,
+  expFormSchema,
+} from '@/lib/validators/user.profile.validator';
+import { zodResolver } from '@hookform/resolvers/zod';
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/components/ui/form';
+import { Textarea } from '../ui/textarea';
+import { Input } from '../ui/input';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '../ui/select';
+import _ from 'lodash';
+import { EmployementType, WorkMode } from '@prisma/client';
+import { Switch } from '../ui/switch';
+
+const ProfileExperience = () => {
+  const [isSheetOpen, setIsSheetOpen] = useState<boolean>(false);
+
+  const handleClose = () => {
+    setIsSheetOpen(false);
+  };
+  const handleOpen = () => {
+    setIsSheetOpen(true);
+  };
+  const form = useForm<expFormSchemaType>({
+    resolver: zodResolver(expFormSchema),
+    defaultValues: {
+      companyName: '',
+      designation: '',
+      EmploymentType: 'Full_time',
+      address: '',
+      workMode: 'office',
+      currentWorkStatus: false,
+      startDate: undefined,
+      endDate: undefined,
+      description: '',
+    },
+  });
+  const WatchCurrentWorkStatus = form.watch('currentWorkStatus');
+  const onSubmit = () => {};
+
+  const handleFormClose = () => {
+    form.reset();
+    form.clearErrors();
+    handleClose();
+  };
+  return (
+    <>
+      <h3 className="font-bold text-2xl">Work Experience</h3>
+      <div className="border rounded-2xl  h-80 overflow-hidden flex flex-col gap-y-4 px-6 items-center justify-center">
+        <Info width={32} height={32} />
+        <div className="text-center">
+          <h4 className="font-bold text-xl">
+            You haven’t added work experience yet
+          </h4>
+          <p className="text-sm font-medium text-gray-500">
+            Share your experience to attract the right companies.
+          </p>
+        </div>
+        <Button onClick={handleOpen} className="text-white rounded-sm">
+          Add your work experience
+        </Button>
+      </div>
+      <Sheet open={isSheetOpen} onOpenChange={handleClose}>
+        <SheetContent className="flex flex-col pb-0">
+          <SheetHeader>
+            <SheetTitle className="text-2xl">Add Work Experience</SheetTitle>
+            <SheetDescription>
+              Share your work history to highlight your career journey and
+              expertise for employers.
+            </SheetDescription>
+          </SheetHeader>
+          <div className=" flex-1 relative overflow-y-auto no-scrollbar">
+            <Form {...form}>
+              <form
+                onSubmit={form.handleSubmit(onSubmit)}
+                className="space-y-4 h-full flex flex-col justify-between"
+              >
+                <div className="flex flex-col gap-y-4">
+                  <FormField
+                    control={form.control}
+                    name="companyName"
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel>Company Name</FormLabel>
+                        <FormControl>
+                          <Input {...field} />
+                        </FormControl>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+
+                  <FormField
+                    control={form.control}
+                    name="designation"
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel>Designation</FormLabel>
+                        <FormControl>
+                          <Input {...field} />
+                        </FormControl>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+
+                  <FormField
+                    control={form.control}
+                    name="EmploymentType"
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel>Employment Type</FormLabel>
+                        <Select
+                          onValueChange={field.onChange}
+                          defaultValue={field.value}
+                        >
+                          <FormControl>
+                            <SelectTrigger>
+                              <SelectValue />
+                            </SelectTrigger>
+                          </FormControl>
+                          <SelectContent>
+                            {Object.values(EmployementType).map((type) => (
+                              <SelectItem key={type} value={type}>
+                                {_.startCase(type)}
+                              </SelectItem>
+                            ))}
+                          </SelectContent>
+                        </Select>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+
+                  <FormField
+                    control={form.control}
+                    name="address"
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel>Address</FormLabel>
+                        <FormControl>
+                          <Input {...field} />
+                        </FormControl>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+
+                  <FormField
+                    control={form.control}
+                    name="workMode"
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel>Work Mode</FormLabel>
+                        <Select
+                          onValueChange={field.onChange}
+                          defaultValue={field.value}
+                        >
+                          <FormControl>
+                            <SelectTrigger>
+                              <SelectValue />
+                            </SelectTrigger>
+                          </FormControl>
+                          <SelectContent>
+                            {Object.values(WorkMode).map((mode) => (
+                              <SelectItem key={mode} value={mode}>
+                                {_.startCase(mode)}
+                              </SelectItem>
+                            ))}
+                          </SelectContent>
+                        </Select>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+
+                  <FormField
+                    control={form.control}
+                    name="currentWorkStatus"
+                    render={({ field }) => (
+                      <FormItem className="flex flex-row items-start space-x-3 space-y-0">
+                        <FormControl>
+                          <Switch
+                            checked={field.value}
+                            onCheckedChange={field.onChange}
+                            className="data-[state=checked]:bg-gray-300 data-[state=unchecked]:bg-gray-400"
+                          />
+                        </FormControl>
+                        <div className="space-y-1 leading-none">
+                          <FormLabel>Currently working here</FormLabel>
+                        </div>
+                      </FormItem>
+                    )}
+                  />
+
+                  <FormField
+                    control={form.control}
+                    name="startDate"
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel>Start Date</FormLabel>
+                        <FormControl>
+                          <Input
+                            type="date"
+                            {...field}
+                            value={
+                              field.value
+                                ? field.value.toISOString().split('T')[0]
+                                : ''
+                            }
+                            onChange={(e) =>
+                              field.onChange(new Date(e.target.value))
+                            }
+                          />
+                        </FormControl>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+
+                  {!WatchCurrentWorkStatus && (
+                    <FormField
+                      control={form.control}
+                      name="endDate"
+                      render={({ field }) => (
+                        <FormItem>
+                          <FormLabel>End Date</FormLabel>
+                          <FormControl>
+                            <Input
+                              type="date"
+                              {...field}
+                              value={
+                                field.value
+                                  ? field.value.toISOString().split('T')[0]
+                                  : ''
+                              }
+                              onChange={(e) =>
+                                field.onChange(
+                                  e.target.value
+                                    ? new Date(e.target.value)
+                                    : undefined
+                                )
+                              }
+                            />
+                          </FormControl>
+                          <FormMessage />
+                        </FormItem>
+                      )}
+                    />
+                  )}
+
+                  <FormField
+                    control={form.control}
+                    name="description"
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel>Description</FormLabel>
+                        <FormControl>
+                          <Textarea {...field} />
+                        </FormControl>
+                        <FormDescription>
+                          Describe your role and responsibilities (50-255
+                          characters)
+                        </FormDescription>
+                      </FormItem>
+                    )}
+                  />
+                </div>
+                <div className="py-4 flex gap-4 justify-end">
+                  <Button
+                    type="reset"
+                    onClick={handleFormClose}
+                    variant={'outline'}
+                    className="mt-0 text-white rounded-[8px]"
+                  >
+                    {' '}
+                    Cancel{' '}
+                  </Button>
+                  <Button
+                    type="submit"
+                    className="mt-0 text-white rounded-[8px]"
+                  >
+                    {' '}
+                    Add Project{' '}
+                  </Button>
+                </div>
+              </form>
+            </Form>
+          </div>
+        </SheetContent>
+      </Sheet>
+    </>
+  );
+};
+
+export default ProfileExperience;
diff --git a/src/components/profile/ProfileHeroSection.tsx b/src/components/profile/ProfileHeroSection.tsx
new file mode 100644
index 00000000..54ec148c
--- /dev/null
+++ b/src/components/profile/ProfileHeroSection.tsx
@@ -0,0 +1,346 @@
+'use client';
+import React, { useRef, useState } from 'react';
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+} from '@/components/ui/sheet';
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
+import { Button } from '@/components/ui/button';
+import { Pencil, Settings, Share2, X } from 'lucide-react';
+import {
+  profileSchema,
+  ProfileSchemaType,
+} from '@/lib/validators/user.profile.validator';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+} from '@/components/ui/form';
+import { Textarea } from '../ui/textarea';
+import { Input } from '../ui/input';
+import Image from 'next/image';
+import { FaFileUpload } from 'react-icons/fa';
+import { useToast } from '../ui/use-toast';
+import { uploadFileAction } from '@/actions/upload-to-cdn';
+import ProfileAccountSheet from './ProfileAccountSheet';
+
+const ProfileHeroSection = () => {
+  const [isSheetOpen, setIsSheetOpen] = useState<boolean>(false);
+  const [isAccountOpen, setIsAccountOpen] = useState<boolean>(false);
+
+  const handleClose = () => {
+    setIsSheetOpen(false);
+    setIsAccountOpen(false);
+  };
+
+  const { toast } = useToast();
+
+  const [file, setFile] = useState<File | null>(null);
+  const [previewImg, setPreviewImg] = useState<string | null>(null);
+
+  const form = useForm<ProfileSchemaType>({
+    resolver: zodResolver(profileSchema),
+    defaultValues: {
+      aboutMe: '',
+      username: '',
+      email: '',
+      contactEmail: '',
+      profileImage: '',
+      name: '',
+    },
+  });
+  const handleOpen = () => {
+    setIsSheetOpen(true);
+  };
+
+  const submitImage = async (file: File | null) => {
+    if (!file) return;
+
+    const formData = new FormData();
+    formData.append('file', file);
+
+    try {
+      const uniqueFileName = `${Date.now()}-${file.name}`;
+      formData.append('uniqueFileName', uniqueFileName);
+
+      const res = await uploadFileAction(formData, 'webp');
+      if (!res) {
+        throw new Error('Failed to upload image');
+      }
+
+      const uploadRes = res;
+      return uploadRes.url;
+    } catch (error) {
+      console.error('Image upload failed:', error);
+    }
+  };
+
+  const onSubmit = async (data: ProfileSchemaType) => {
+    data.profileImage = (await submitImage(file)) ?? '/main.svg';
+  };
+
+  const handleFormClose = () => {
+    form.reset();
+    form.clearErrors();
+    handleClose();
+  };
+  const profileImageRef = useRef<HTMLImageElement>(null);
+
+  const handleClick = () => {
+    const fileInput = document.getElementById('fileInput') as HTMLInputElement;
+
+    if (fileInput) {
+      fileInput.click();
+    }
+  };
+
+  const clearLogoImage = () => {
+    const fileInput = document.getElementById('fileInput') as HTMLInputElement;
+
+    if (fileInput) {
+      fileInput.value = '';
+    }
+    setPreviewImg(null);
+    setFile(null);
+  };
+  const handleFileChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    const selectedFile = e.target.files ? e.target.files[0] : null;
+    if (!selectedFile) {
+      return;
+    }
+    if (!selectedFile.type.includes('image')) {
+      toast({
+        title:
+          'Invalid file format. Please upload an image file (e.g., .png, .jpg, .jpeg, .svg ) for the company logo',
+        variant: 'destructive',
+      });
+      return;
+    }
+    const reader = new FileReader();
+    reader.onload = () => {
+      if (profileImageRef.current) {
+        profileImageRef.current.src = reader.result as string;
+      }
+      setPreviewImg(reader.result as string);
+    };
+    reader.readAsDataURL(selectedFile);
+    if (selectedFile) {
+      setFile(selectedFile);
+    }
+  };
+
+  return (
+    <>
+      <div className="border rounded-2xl  h-72 overflow-hidden">
+        <div className="w-full h-32 bg-gradient-to-r from-blue-500 to-indigo-500"></div>
+        <div className="p-6 relative flex-col flex gap-y-3">
+          <Avatar className="h-32 w-32 absolute -top-16">
+            <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
+            <AvatarFallback>CN</AvatarFallback>
+          </Avatar>
+          <div className="w-full flex justify-end gap-2">
+            <Button
+              variant={'outline'}
+              className="px-3 py-2 rounded-sm"
+              onClick={handleOpen}
+            >
+              <Pencil height={16} width={16} />
+            </Button>
+            <Button
+              onClick={() => setIsAccountOpen(true)}
+              variant={'outline'}
+              className="px-3 py-2 rounded-sm"
+            >
+              <Settings height={16} width={16} />
+            </Button>
+            <Button variant={'outline'} className="px-3 py-2 rounded-sm">
+              <Share2 height={16} width={16} />
+            </Button>
+          </div>
+          <div>
+            <h2 className="text-4xl font-bold">Jhone Doe</h2>
+            <a href="#" className="text-sm text-primary font-semibold">
+              @jhonedoe
+            </a>
+          </div>
+        </div>
+      </div>
+      <Sheet open={isSheetOpen} onOpenChange={handleClose}>
+        <SheetContent className="flex flex-col pb-0 overflow-y-auto no-scrollbar">
+          <SheetHeader>
+            <SheetTitle className="text-2xl">Edit Your Profile</SheetTitle>
+            <SheetDescription>
+              Update your personal information, contact details, and social
+              links to keep your profile current and professional.
+            </SheetDescription>
+          </SheetHeader>
+          <div className="mt-5 flex-1 relative">
+            <Form {...form}>
+              <form
+                onSubmit={form.handleSubmit(onSubmit)}
+                className="space-y-8 h-full flex flex-col justify-between"
+              >
+                <div className="flex flex-col gap-y-4">
+                  <FormLabel> Profile Picture </FormLabel>
+                  <div className="flex justify-center">
+                    <div
+                      className="w-40 h-40 dark:bg-gray-700 bg-gray-300 border border-dashed border-gray-500 rounded-md flex items-center justify-center cursor-pointer mb-2"
+                      onClick={handleClick}
+                    >
+                      {previewImg ? (
+                        <Image
+                          src={previewImg}
+                          ref={profileImageRef}
+                          className="object-contain w-full h-full rounded-md overflow-hidden"
+                          alt="Company Logo"
+                          width={160}
+                          height={160}
+                        />
+                      ) : (
+                        <FaFileUpload
+                          height={80}
+                          width={80}
+                          className="text-white h-10 w-10"
+                        />
+                      )}
+                    </div>
+                    {previewImg && (
+                      <button
+                        type="button"
+                        onClick={clearLogoImage}
+                        className="absolute top-0 right-0 w-5 h-5 bg-red-500 rounded-full items-center flex justify-center cursor-pointer translate-x-1/2 -translate-y-1/2"
+                      >
+                        <X size="16" />
+                      </button>
+                    )}
+
+                    <input
+                      id="fileInput"
+                      className="hidden"
+                      type="file"
+                      accept="image/*"
+                      onChange={handleFileChange}
+                    />
+                  </div>
+
+                  <FormField
+                    control={form.control}
+                    name="name"
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel>Name</FormLabel>
+                        <FormControl>
+                          <Input
+                            placeholder="name"
+                            {...field}
+                            className="rounded-[8px]"
+                          />
+                        </FormControl>
+                      </FormItem>
+                    )}
+                  />
+                  <FormField
+                    control={form.control}
+                    name="username"
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel>Username</FormLabel>
+                        <FormControl>
+                          <Input
+                            placeholder="username"
+                            {...field}
+                            className="rounded-[8px]"
+                          />
+                        </FormControl>
+                      </FormItem>
+                    )}
+                  />
+                  <FormField
+                    control={form.control}
+                    name="email"
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel>Email</FormLabel>
+                        <FormControl>
+                          <Input
+                            placeholder="email@gmail.com"
+                            {...field}
+                            className="rounded-[8px]"
+                          />
+                        </FormControl>
+                      </FormItem>
+                    )}
+                  />
+                  <FormField
+                    control={form.control}
+                    name="contactEmail"
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel>Contact Email</FormLabel>
+                        <FormControl>
+                          <Input
+                            placeholder="contact@gmail.com"
+                            {...field}
+                            className="rounded-[8px]"
+                          />
+                        </FormControl>
+                      </FormItem>
+                    )}
+                  />
+                  <FormField
+                    control={form.control}
+                    name="aboutMe"
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel>About Me</FormLabel>
+                        <FormControl>
+                          <Textarea
+                            placeholder="Write here"
+                            {...field}
+                            className="rounded-[8px]"
+                          />
+                        </FormControl>
+                        <FormDescription>
+                          Describe yourself between 50 to 255 characters.
+                        </FormDescription>
+                      </FormItem>
+                    )}
+                  />
+                </div>
+                <div className="py-4 flex gap-4 justify-end">
+                  <Button
+                    type="reset"
+                    onClick={handleFormClose}
+                    variant={'outline'}
+                    className="mt-0 text-white rounded-[8px]"
+                  >
+                    {' '}
+                    Cancel{' '}
+                  </Button>
+                  <Button
+                    type="submit"
+                    className="mt-0 text-white rounded-[8px]"
+                  >
+                    {' '}
+                    Update Profile{' '}
+                  </Button>
+                </div>
+              </form>
+            </Form>
+          </div>
+        </SheetContent>
+      </Sheet>
+      <ProfileAccountSheet isOpen={isAccountOpen} handleClose={handleClose} />
+    </>
+  );
+};
+
+export default ProfileHeroSection;
diff --git a/src/components/profile/ProfileHireme.tsx b/src/components/profile/ProfileHireme.tsx
new file mode 100644
index 00000000..a2485f16
--- /dev/null
+++ b/src/components/profile/ProfileHireme.tsx
@@ -0,0 +1,35 @@
+import { ArrowRight, Mail } from 'lucide-react';
+import React from 'react';
+import { Button } from '../ui/button';
+
+const ProfileHireme = () => {
+  return (
+    <>
+      <div className="border rounded-2xl bg-gradient-to-b from-gray-800 to-gray-900  h-40 overflow-hidden flex flex-col gap-y-4 px-6 items-center justify-center">
+        <div className="text-center">
+          <h4 className="font-bold text-xl">
+            Hire Me, Let’s Make Magic Happen!
+          </h4>
+          <p className="text-sm font-medium text-gray-500">
+            Searching for talent that can drive success? I’m ready to contribute
+            to your goals!
+          </p>
+        </div>
+        <div className="flex gap-2 items-center">
+          <Button className="text-white rounded-sm flex gap-1">
+            <Mail /> <p> Contact Me</p>
+          </Button>
+          <Button
+            className="text-white rounded-sm flex gap-1 bg-transparent"
+            variant={'outline'}
+          >
+            Contact Me
+            <ArrowRight />
+          </Button>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default ProfileHireme;
diff --git a/src/components/profile/ProfileProjects.tsx b/src/components/profile/ProfileProjects.tsx
new file mode 100644
index 00000000..62da4c18
--- /dev/null
+++ b/src/components/profile/ProfileProjects.tsx
@@ -0,0 +1,244 @@
+'use client';
+import { CirclePlus, Info, X } from 'lucide-react';
+import React, { useCallback, useState } from 'react';
+import { useDropzone } from 'react-dropzone';
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+} from '@/components/ui/sheet';
+import { useForm } from 'react-hook-form';
+import {
+  ProfileProjectType,
+  profileProjectSchema,
+} from '@/lib/validators/user.profile.validator';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { Button } from '@/components/ui/button';
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+} from '@/components/ui/form';
+import { Textarea } from '../ui/textarea';
+import { Input } from '../ui/input';
+import { useToast } from '../ui/use-toast';
+import Image from 'next/image';
+
+const ProfileProjects = () => {
+  const [isSheetOpen, setIsSheetOpen] = useState<boolean>(false);
+  const [file, setFiles] = useState<File | null>(null);
+  const [previewImg, setPreviewImg] = useState<null | string>(null);
+
+  const { toast } = useToast();
+
+  const onDrop = useCallback(
+    (acceptedFiles: File[]) => {
+      if (
+        acceptedFiles[0].size < 1024 * 1024 * 5 &&
+        acceptedFiles[0].type.includes('image')
+      ) {
+        setFiles(acceptedFiles[0]);
+        setPreviewImg(URL.createObjectURL(acceptedFiles[0]));
+      } else {
+        toast({
+          variant: 'destructive',
+          title: 'Project thumbnail should be a image and not more than 5 MB.',
+        });
+      }
+    },
+    [toast]
+  );
+
+  const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDrop });
+
+  const handleClose = () => {
+    setIsSheetOpen(false);
+  };
+  const handleOpen = () => {
+    setIsSheetOpen(true);
+  };
+  const form = useForm<ProfileProjectType>({
+    resolver: zodResolver(profileProjectSchema),
+    defaultValues: {
+      projectThumbnail: '',
+      projectDescription: '',
+      projectFeatured: false,
+      projectGithub: '',
+      projectLiveLink: '',
+      projectName: '',
+    },
+  });
+
+  // function onSubmit(values: ProfileProjectType) {
+  //   console.log(values)
+  // }
+  function onSubmit() {}
+
+  const handleFormClose = () => {
+    form.reset();
+    form.clearErrors();
+    handleClose();
+    setFiles(null);
+  };
+  const handleImageReset = () => {
+    setFiles(null);
+    setPreviewImg(null);
+  };
+  return (
+    <>
+      <h3 className="font-bold text-2xl">Projects</h3>
+      <div className="border rounded-2xl  h-80 overflow-hidden flex flex-col gap-y-4 px-6 items-center justify-center">
+        <Info width={32} height={32} />
+        <div className="text-center">
+          <h4 className="font-bold text-xl">
+            You haven’t added any projects yet
+          </h4>
+          <p className="text-sm font-medium text-gray-500">
+            Showcase your projects to demonstrate your skills and expertise.
+          </p>
+        </div>
+        <Button className="text-white rounded-sm" onClick={handleOpen}>
+          Add your projects
+        </Button>
+      </div>
+      <Sheet open={isSheetOpen} onOpenChange={handleClose}>
+        <SheetContent className="flex flex-col pb-0">
+          <SheetHeader>
+            <SheetTitle className="text-2xl">Add New Project</SheetTitle>
+            <SheetDescription>
+              Highlight key project that demonstrate your technical abilities
+              and innovative problem-solving.
+            </SheetDescription>
+          </SheetHeader>
+          <div className="mt-5 flex-1 relative">
+            <Form {...form}>
+              <form
+                onSubmit={form.handleSubmit(onSubmit)}
+                className="space-y-8 h-full flex flex-col justify-between"
+              >
+                <div className=" flex flex-col gap-y-4">
+                  <div>
+                    <FormLabel>Upload project thumbnail</FormLabel>
+                    <div
+                      {...getRootProps()}
+                      className={`w-full overflow-hidden h-44 flex justify-center items-center flex-col bg-slate-900 rounded-[8px] border border-transparent text-center mt-2 relative ${isDragActive && 'animate-pulse border-white'}`}
+                    >
+                      {file && previewImg && (
+                        <div
+                          onClick={handleImageReset}
+                          className="absolute top-1 right-1 bg-red-500 text-white rounded-full h-5 w-5 flex items-center justify-center cursor-pointer"
+                        >
+                          {' '}
+                          <X height={16} width={16} />{' '}
+                        </div>
+                      )}
+                      {!file && (
+                        <>
+                          <input {...getInputProps({ accept: 'images' })} />
+                          <CirclePlus height={24} width={24} />
+                          <p className="font-medium text-base leading-6 block mt-2">
+                            Drag and drop an image <br />
+                            or click to upload
+                          </p>
+                          <p className="text-slate-400 text-xs">
+                            Supported formats: JPEG, PNG. <br />
+                            Maximum file size: 5MB
+                          </p>
+                        </>
+                      )}
+                      {file && previewImg && (
+                        <Image
+                          src={previewImg}
+                          alt="project-image"
+                          width={300}
+                          height={300}
+                          className="object-cover !w-full !h-full "
+                        />
+                      )}
+                    </div>
+                  </div>
+                  <FormField
+                    control={form.control}
+                    name="projectName"
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel> Project Name </FormLabel>
+                        <FormControl>
+                          <Input placeholder="Enter project name" {...field} />
+                        </FormControl>
+                      </FormItem>
+                    )}
+                  />
+                  <FormField
+                    control={form.control}
+                    name="projectLiveLink"
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel> Live Link </FormLabel>
+                        <FormControl>
+                          <Input placeholder="Enter Live Link" {...field} />
+                        </FormControl>
+                      </FormItem>
+                    )}
+                  />
+                  <FormField
+                    control={form.control}
+                    name="projectGithub"
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel> Github Link </FormLabel>
+                        <FormControl>
+                          <Input placeholder="Enter Github Link" {...field} />
+                        </FormControl>
+                      </FormItem>
+                    )}
+                  />
+                  <FormField
+                    control={form.control}
+                    name="projectDescription"
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel> Project Description </FormLabel>
+                        <FormControl>
+                          <Textarea placeholder="Write here" {...field} />
+                        </FormControl>
+                        <FormDescription>
+                          Describe your project between 50 to 255 characters.
+                        </FormDescription>
+                      </FormItem>
+                    )}
+                  />
+                </div>
+                <div className="py-4 flex gap-4 justify-end">
+                  <Button
+                    type="reset"
+                    onClick={handleFormClose}
+                    variant={'outline'}
+                    className="mt-0 text-white rounded-[8px]"
+                  >
+                    {' '}
+                    Cancel{' '}
+                  </Button>
+                  <Button
+                    type="submit"
+                    className="mt-0 text-white rounded-[8px]"
+                  >
+                    {' '}
+                    Add Project{' '}
+                  </Button>
+                </div>
+              </form>
+            </Form>
+          </div>
+        </SheetContent>
+      </Sheet>
+    </>
+  );
+};
+
+export default ProfileProjects;
diff --git a/src/components/profile/ProfileResume.tsx b/src/components/profile/ProfileResume.tsx
new file mode 100644
index 00000000..96392cb6
--- /dev/null
+++ b/src/components/profile/ProfileResume.tsx
@@ -0,0 +1,158 @@
+'use client';
+import { CirclePlus, FileText } from 'lucide-react';
+import React, { useCallback, useState } from 'react';
+import { useDropzone } from 'react-dropzone';
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+} from '@/components/ui/sheet';
+import { Form, FormLabel } from '@/components/ui/form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { Button } from '@/components/ui/button';
+import { useForm } from 'react-hook-form';
+import {
+  profileResumeSchema,
+  ProfileResumeType,
+} from '@/lib/validators/user.profile.validator';
+import { useToast } from '../ui/use-toast';
+
+const ProfileResume = () => {
+  const [file, setFiles] = useState<File | null>(null);
+  const [isSheetOpen, setIsSheetOpen] = useState<boolean>(false);
+
+  const { toast } = useToast();
+
+  const onDrop = useCallback(
+    (acceptedFiles: File[]) => {
+      if (
+        acceptedFiles[0].size < 1048576 &&
+        acceptedFiles[0].type.includes('pdf')
+      ) {
+        setFiles(acceptedFiles[0]);
+      } else {
+        toast({
+          variant: 'destructive',
+          title: 'Resume should be a pdf type and not more than 1 MB.',
+        });
+      }
+    },
+    [toast]
+  );
+
+  const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDrop });
+
+  const handleClose = () => {
+    setIsSheetOpen(false);
+  };
+  const handleOpen = () => {
+    setIsSheetOpen(true);
+  };
+  const form = useForm<ProfileResumeType>({
+    resolver: zodResolver(profileResumeSchema),
+    defaultValues: {
+      resume: '',
+    },
+  });
+
+  // function onSubmit(values: ProfileResumeType) {
+  //   console.log(values)
+  // }
+  function onSubmit() {}
+
+  const handleFormClose = () => {
+    form.reset();
+    handleClose();
+  };
+  return (
+    <>
+      <h3 className="font-bold text-2xl">Resume</h3>
+      <div className="border rounded-2xl  h-80 overflow-hidden flex flex-col gap-y-4 px-6 items-center justify-center">
+        <FileText width={32} height={32} />
+        <div className="text-center">
+          <h4 className="font-bold text-xl">
+            You haven’t uploaded a resume yet
+          </h4>
+          <p className="text-sm font-medium text-gray-500">
+            Upload your resume to showcase your skills and experiences to
+            recruiters.
+          </p>
+        </div>
+        <Button className="text-white rounded-sm" onClick={handleOpen}>
+          Upload your resume
+        </Button>
+      </div>
+      <Sheet open={isSheetOpen} onOpenChange={handleClose}>
+        <SheetContent className="flex flex-col pb-0 w-[488px]">
+          <SheetHeader>
+            <SheetTitle className="text-2xl">Upload Your Resume</SheetTitle>
+            <SheetDescription>
+              Share your resume to give employers a full view of your
+              qualifications and experiences.
+            </SheetDescription>
+          </SheetHeader>
+          <div className="mt-5 flex-1 relative">
+            <Form {...form}>
+              <form
+                onSubmit={form.handleSubmit(onSubmit)}
+                className="space-y-8 h-full flex flex-col justify-between"
+              >
+                <div>
+                  <FormLabel>Upload resume</FormLabel>
+                  <div
+                    {...getRootProps()}
+                    className={`w-full h-44 flex justify-center items-center flex-col bg-slate-900 rounded-[8px] border border-transparent text-center mt-2 ${isDragActive && 'animate-pulse border-white'}`}
+                  >
+                    <input {...getInputProps()} />
+                    {!file && (
+                      <>
+                        <CirclePlus height={24} width={24} />
+                        <p className="font-medium text-base leading-6 block mt-2">
+                          Drag and drop an image <br />
+                          or click to upload
+                        </p>
+                        <p className="text-slate-400 text-xs">
+                          Supported format : PDF <br />
+                          Maximum file size: 1MB
+                        </p>
+                      </>
+                    )}
+                    {file && (
+                      <>
+                        <FileText height={24} width={24} />
+                        <p className="font-medium text-base leading-6 block mt-2">
+                          Selected File:
+                        </p>
+                        <p className="text-slate-400 text-xs">{file.name}</p>
+                      </>
+                    )}
+                  </div>
+                  <div></div>
+                </div>
+                <div className="py-4 flex gap-4 justify-end">
+                  <Button
+                    onClick={handleFormClose}
+                    variant={'outline'}
+                    className="mt-0 text-white rounded-[8px]"
+                  >
+                    Cancel
+                  </Button>
+                  <Button
+                    type="submit"
+                    className="mt-0 text-white rounded-[8px]"
+                  >
+                    Add Resume
+                  </Button>
+                </div>
+              </form>
+            </Form>
+          </div>
+        </SheetContent>
+      </Sheet>
+    </>
+  );
+};
+
+export default ProfileResume;
diff --git a/src/components/profile/ProfileSkills.tsx b/src/components/profile/ProfileSkills.tsx
new file mode 100644
index 00000000..0d59d881
--- /dev/null
+++ b/src/components/profile/ProfileSkills.tsx
@@ -0,0 +1,58 @@
+'use client';
+import { Info } from 'lucide-react';
+import React, { useState } from 'react';
+import { Button } from '../ui/button';
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+} from '@/components/ui/sheet';
+import { AddSkills } from '../user-multistep-form/add-skills-form';
+
+const ProfileSkills = () => {
+  const [isSheetOpen, setIsSheetOpen] = useState<boolean>(false);
+
+  const handleClose = () => {
+    setIsSheetOpen(false);
+  };
+  const handleOpen = () => {
+    setIsSheetOpen(true);
+  };
+  return (
+    <>
+      <h3 className="font-bold text-2xl">Skills</h3>
+      <div className="border rounded-2xl  h-80 overflow-hidden flex flex-col gap-y-4 px-6 items-center justify-center">
+        <Info width={32} height={32} />
+        <div className="text-center">
+          <h4 className="font-bold text-xl">
+            You haven’t added any skills yet
+          </h4>
+          <p className="text-sm font-medium text-gray-500">
+            Highlight your skills to stand out to potential employers.
+          </p>
+        </div>
+        <Button onClick={handleOpen} className="text-white rounded-sm">
+          Add your skills
+        </Button>
+      </div>
+      <Sheet open={isSheetOpen} onOpenChange={handleClose}>
+        <SheetContent className="flex flex-col pb-0">
+          <SheetHeader>
+            <SheetTitle className="text-2xl">Add Your Skills</SheetTitle>
+            <SheetDescription>
+              Showcase your strongest skills to make your profile stand out to
+              recruiters.
+            </SheetDescription>
+          </SheetHeader>
+          <div className="mt-5 flex-1 relative">
+            <AddSkills />
+          </div>
+        </SheetContent>
+      </Sheet>
+    </>
+  );
+};
+
+export default ProfileSkills;
diff --git a/src/components/profile/emptycontainers/ProfileEmptyContainers.tsx b/src/components/profile/emptycontainers/ProfileEmptyContainers.tsx
new file mode 100644
index 00000000..5c2909b5
--- /dev/null
+++ b/src/components/profile/emptycontainers/ProfileEmptyContainers.tsx
@@ -0,0 +1,7 @@
+import React from 'react';
+
+const ProfileEmptyContainers = () => {
+  return <div></div>;
+};
+
+export default ProfileEmptyContainers;
diff --git a/src/lib/constant/profile.constant.ts b/src/lib/constant/profile.constant.ts
new file mode 100644
index 00000000..5fefc646
--- /dev/null
+++ b/src/lib/constant/profile.constant.ts
@@ -0,0 +1,10 @@
+export const emptyProfileContainers = [
+  {
+    heading: 'You haven’t added an about me yet',
+    secondaryHeading:
+      'Share a brief introduction to let companies know who you are.',
+    icon: 'FileText',
+    buttonText: 'Add About me',
+    buttonAction: '',
+  },
+];
diff --git a/src/lib/validators/user.profile.validator.ts b/src/lib/validators/user.profile.validator.ts
index 8e7d94cd..d63b124e 100644
--- a/src/lib/validators/user.profile.validator.ts
+++ b/src/lib/validators/user.profile.validator.ts
@@ -1,6 +1,19 @@
 import { EmployementType, WorkMode } from '@prisma/client';
 import { z } from 'zod';
 
+export enum DegreeEnum {
+  BTech = 'BTech',
+  MTech = 'MTech',
+  BCA = 'BCA',
+  MCA = 'MCA',
+}
+export enum FieldOfStudyEnum {
+  AI = 'AI',
+  CS = 'CS',
+  Electronics = 'Electronics',
+  Mechanical = 'Mechanical',
+}
+
 export const UserProfileSchema = z.object({
   name: z.string().min(1, 'Name is required'),
   email: z.string().email('Email is invalid').min(1, 'Email is required'),
@@ -74,10 +87,81 @@ export const projectSchema = z.object({
   ]),
 });
 
+export const aboutMeSchema = z.object({
+  aboutMe: z
+    .string()
+    .min(50, { message: 'Description must be at least 50 characters' })
+    .max(255, { message: 'Description cannot exceed 255 characters' }),
+});
+
+export const profileSchema = z.object({
+  profileImage: z.string(),
+  name: z.string().min(1, 'Name is required'),
+  username: z.string().min(1, 'Username is required'),
+  email: z.string().min(1, 'Email is required').email(),
+  contactEmail: z.string().min(1, 'Contact Email is required').email(),
+  aboutMe: z
+    .string()
+    .min(50, { message: 'Description must be at least 50 characters' })
+    .max(255, { message: 'Description cannot exceed 255 characters' }),
+});
+
+export const profileResumeSchema = z.object({
+  resume: z.string().min(1, 'Resume is required.'),
+});
+
+export const profileProjectSchema = z.object({
+  projectThumbnail: z.string().optional(),
+  projectName: z.string().min(1, 'Project name is required'),
+  projectDescription: z
+    .string()
+    .min(20, { message: 'Summary must be at least 20 characters' })
+    .max(255, { message: 'Summary cannot exceed 255 characters' }),
+  projectLiveLink: z
+    .string()
+    .url({ message: 'Invalid URL format' })
+    .refine((url) => url.startsWith('https://'), {
+      message: 'URL must be a https request',
+    })
+    .optional(),
+  projectGithub: z
+    .string({ message: 'Github Link is required' })
+    .url({ message: 'Invalid URL format' })
+    .refine((url) => url.startsWith('https://github.com/'), {
+      message: 'URL must be a GitHub link starting with "https://github.com/"',
+    }),
+  projectFeatured: z.boolean().default(false),
+});
+
+export const profileEducationSchema = z
+  .object({
+    instituteName: z.string().min(1, 'Institute Name is required.'),
+    degree: z.nativeEnum(DegreeEnum, {
+      message: 'Degree is required.',
+    }),
+    fieldOfStudy: z.nativeEnum(FieldOfStudyEnum, {
+      message: 'Field of Study is required.',
+    }),
+    startDate: z.date({
+      required_error: 'Start date is required',
+      invalid_type_error: 'Invalid date',
+    }),
+    endDate: z.date({ invalid_type_error: 'Invalid date' }).optional(),
+  })
+  .refine((data) => !data.endDate || data.startDate <= data.endDate, {
+    message: 'Start date cannot be later than end date.',
+    path: ['endDate'],
+  });
+
 export type projectSchemaType = z.infer<typeof projectSchema>;
 export type expFormSchemaType = z.infer<typeof expFormSchema>;
 export type addSkillsSchemaType = z.infer<typeof addSkillsSchema>;
 export type UserPasswordSchemaType = z.infer<typeof UserPasswordSchema>;
+export type AboutMeSchemaType = z.infer<typeof aboutMeSchema>;
+export type ProfileSchemaType = z.infer<typeof profileSchema>;
+export type ProfileResumeType = z.infer<typeof profileResumeSchema>;
+export type ProfileProjectType = z.infer<typeof profileProjectSchema>;
+export type profileEducationType = z.infer<typeof profileEducationSchema>;
 
 export const UserProfileDestroySchema = z.object({
   random: z

From a30e513c53a768b314feff80dd7b96c8a32f11cb Mon Sep 17 00:00:00 2001
From: Dev Sharma <devsharmasoe@gmail.com>
Date: Thu, 24 Oct 2024 22:53:40 +0530
Subject: [PATCH 02/14] refactor

---
 src/components/profile/ProfileAboutMe.tsx     | 100 +-----
 .../profile/ProfileAccountSheet.tsx           | 156 ---------
 src/components/profile/ProfileEducation.tsx   | 225 +------------
 src/components/profile/ProfileExperience.tsx  | 295 +----------------
 src/components/profile/ProfileHeroSection.tsx | 310 ++----------------
 src/components/profile/ProfileProjects.tsx    | 222 +------------
 src/components/profile/ProfileResume.tsx      | 135 +-------
 src/components/profile/ProfileSkills.tsx      |  33 +-
 .../profile/forms/AccountSeetingForm.tsx      | 129 ++++++++
 .../profile/forms/EditProfileForm.tsx         | 270 +++++++++++++++
 .../profile/forms/EducationForm.tsx           | 193 +++++++++++
 .../profile/forms/ExperienceForm.tsx          | 268 +++++++++++++++
 src/components/profile/forms/ProjectForm.tsx  | 196 +++++++++++
 src/components/profile/forms/ReadMeForm.tsx   |  76 +++++
 src/components/profile/forms/SkillsForm.tsx   |  77 +++++
 .../profile/forms/UploadResumeForm.tsx        | 111 +++++++
 .../profile/sheets/SheetWrapper.tsx           |  39 +++
 src/lib/constant/profile.constant.ts          |  60 +++-
 18 files changed, 1503 insertions(+), 1392 deletions(-)
 delete mode 100644 src/components/profile/ProfileAccountSheet.tsx
 create mode 100644 src/components/profile/forms/AccountSeetingForm.tsx
 create mode 100644 src/components/profile/forms/EditProfileForm.tsx
 create mode 100644 src/components/profile/forms/EducationForm.tsx
 create mode 100644 src/components/profile/forms/ExperienceForm.tsx
 create mode 100644 src/components/profile/forms/ProjectForm.tsx
 create mode 100644 src/components/profile/forms/ReadMeForm.tsx
 create mode 100644 src/components/profile/forms/SkillsForm.tsx
 create mode 100644 src/components/profile/forms/UploadResumeForm.tsx
 create mode 100644 src/components/profile/sheets/SheetWrapper.tsx

diff --git a/src/components/profile/ProfileAboutMe.tsx b/src/components/profile/ProfileAboutMe.tsx
index e8c32397..29b99cdd 100644
--- a/src/components/profile/ProfileAboutMe.tsx
+++ b/src/components/profile/ProfileAboutMe.tsx
@@ -1,28 +1,10 @@
 'use client';
 import { FileText } from 'lucide-react';
 import React, { useState } from 'react';
-import {
-  Sheet,
-  SheetContent,
-  SheetDescription,
-  SheetHeader,
-  SheetTitle,
-} from '@/components/ui/sheet';
-import { useForm } from 'react-hook-form';
-import {
-  aboutMeSchema,
-  AboutMeSchemaType,
-} from '@/lib/validators/user.profile.validator';
-import { zodResolver } from '@hookform/resolvers/zod';
 import { Button } from '@/components/ui/button';
-import {
-  Form,
-  FormControl,
-  FormDescription,
-  FormField,
-  FormItem,
-} from '@/components/ui/form';
-import { Textarea } from '../ui/textarea';
+import SheetWrapper from './sheets/SheetWrapper';
+import ReadMeForm from './forms/ReadMeForm';
+import { SHEETS } from '@/lib/constant/profile.constant';
 
 const ProfileAboutMe = () => {
   const [isSheetOpen, setIsSheetOpen] = useState<boolean>(false);
@@ -33,22 +15,6 @@ const ProfileAboutMe = () => {
   const handleOpen = () => {
     setIsSheetOpen(true);
   };
-  const form = useForm<AboutMeSchemaType>({
-    resolver: zodResolver(aboutMeSchema),
-    defaultValues: {
-      aboutMe: '',
-    },
-  });
-
-  // function onSubmit(values: AboutMeSchemaType) {
-  //   console.log(values)
-  // }
-  function onSubmit() {}
-
-  const handleFormClose = () => {
-    form.reset();
-    handleClose();
-  };
 
   return (
     <>
@@ -67,58 +33,14 @@ const ProfileAboutMe = () => {
           Add About Me
         </Button>
       </div>
-      <Sheet open={isSheetOpen} onOpenChange={handleClose}>
-        <SheetContent className="flex flex-col pb-0">
-          <SheetHeader>
-            <SheetTitle className="text-2xl">Add About Me</SheetTitle>
-            <SheetDescription>
-              Share a brief introduction to let companies know who you are.
-            </SheetDescription>
-          </SheetHeader>
-          <div className="mt-5 flex-1 relative">
-            <Form {...form}>
-              <form
-                onSubmit={form.handleSubmit(onSubmit)}
-                className="space-y-8 h-full flex flex-col justify-between"
-              >
-                <div>
-                  <FormField
-                    control={form.control}
-                    name="aboutMe"
-                    render={({ field }) => (
-                      <FormItem>
-                        <FormControl>
-                          <Textarea placeholder="Write here" {...field} />
-                        </FormControl>
-                        <FormDescription>
-                          Describe yourself between 50 to 255 characters.
-                        </FormDescription>
-                      </FormItem>
-                    )}
-                  />
-                </div>
-                <div className="py-4 flex gap-4 justify-end">
-                  <Button
-                    onClick={handleFormClose}
-                    variant={'outline'}
-                    className="mt-0 text-white rounded-[8px]"
-                  >
-                    {' '}
-                    Cancel{' '}
-                  </Button>
-                  <Button
-                    type="submit"
-                    className="mt-0 text-white rounded-[8px]"
-                  >
-                    {' '}
-                    Add About Me{' '}
-                  </Button>
-                </div>
-              </form>
-            </Form>
-          </div>
-        </SheetContent>
-      </Sheet>
+      <SheetWrapper
+        isOpen={isSheetOpen}
+        handleClose={handleClose}
+        title={SHEETS.aboutMe.title}
+        description={SHEETS.aboutMe.description}
+      >
+        <ReadMeForm handleClose={handleClose} />
+      </SheetWrapper>
     </>
   );
 };
diff --git a/src/components/profile/ProfileAccountSheet.tsx b/src/components/profile/ProfileAccountSheet.tsx
deleted file mode 100644
index 85c024f8..00000000
--- a/src/components/profile/ProfileAccountSheet.tsx
+++ /dev/null
@@ -1,156 +0,0 @@
-import React from 'react';
-import {
-  Sheet,
-  SheetContent,
-  SheetDescription,
-  SheetHeader,
-  SheetTitle,
-} from '@/components/ui/sheet';
-import {
-  Form,
-  FormControl,
-  FormField,
-  FormItem,
-  FormLabel,
-} from '@/components/ui/form';
-import {
-  UserPasswordSchema,
-  UserPasswordSchemaType,
-} from '@/lib/validators/user.profile.validator';
-import { zodResolver } from '@hookform/resolvers/zod';
-import { useForm } from 'react-hook-form';
-import { Input } from '../ui/input';
-import { Button } from '../ui/button';
-import { TriangleAlert } from 'lucide-react';
-
-const ProfileAccountSheet = ({
-  isOpen,
-  handleClose,
-}: {
-  isOpen: boolean;
-  handleClose: () => void;
-}) => {
-  const form = useForm<UserPasswordSchemaType>({
-    resolver: zodResolver(UserPasswordSchema),
-    defaultValues: {
-      confirmNewPassword: '',
-      currentPassword: '',
-      newPassword: '',
-    },
-  });
-
-  const onSubmit = () => {};
-
-  const handleFormClose = () => {
-    form.clearErrors();
-    form.reset();
-    handleClose();
-  };
-
-  return (
-    <Sheet open={isOpen} onOpenChange={handleClose}>
-      <SheetContent className="flex flex-col pb-0 overflow-y-auto no-scrollbar">
-        <SheetHeader>
-          <SheetTitle className="text-2xl">Account Settings</SheetTitle>
-          <SheetDescription>
-            Manage your account preferences, update your password, or delete
-            your account. Keep your profile secure and up-to-date.
-          </SheetDescription>
-        </SheetHeader>
-        <div className=" flex-1 relative">
-          <h2 className="text-xl mb-4 font-bold">Change password</h2>
-          <Form {...form}>
-            <form
-              onSubmit={form.handleSubmit(onSubmit)}
-              className="space-y-8 flex flex-col justify-between border px-3 py-3 rounded-sm"
-            >
-              <div className="flex flex-col gap-y-4">
-                <FormField
-                  control={form.control}
-                  name="currentPassword"
-                  render={({ field }) => (
-                    <FormItem>
-                      <FormLabel> Current Password </FormLabel>
-                      <FormControl>
-                        <Input
-                          placeholder="Current Password"
-                          type="password"
-                          {...field}
-                          className="rounded-[8px]"
-                        />
-                      </FormControl>
-                    </FormItem>
-                  )}
-                />
-                <FormField
-                  control={form.control}
-                  name="newPassword"
-                  render={({ field }) => (
-                    <FormItem>
-                      <FormLabel>New Password</FormLabel>
-                      <FormControl>
-                        <Input
-                          placeholder="New Password"
-                          type="password"
-                          {...field}
-                          className="rounded-[8px]"
-                        />
-                      </FormControl>
-                    </FormItem>
-                  )}
-                />
-                <FormField
-                  control={form.control}
-                  name="confirmNewPassword"
-                  render={({ field }) => (
-                    <FormItem>
-                      <FormLabel>Confirm New Password</FormLabel>
-                      <FormControl>
-                        <Input
-                          placeholder="Confirm New Password"
-                          {...field}
-                          className="rounded-[8px]"
-                          type="password"
-                        />
-                      </FormControl>
-                    </FormItem>
-                  )}
-                />
-                <div className="py-4 flex gap-4 justify-end">
-                  <Button
-                    type="reset"
-                    onClick={handleFormClose}
-                    variant={'outline'}
-                    className="mt-0 text-white rounded-[8px]"
-                  >
-                    Cancel
-                  </Button>
-                  <Button
-                    type="submit"
-                    className="mt-0 text-white rounded-[8px]"
-                  >
-                    Update Password
-                  </Button>
-                </div>
-              </div>
-            </form>
-          </Form>
-
-          <div className="h-60 bg-red-600 bg-opacity-10 mt-5 rounded-md flex flex-col justify-center items-center p-6 text-center ">
-            <TriangleAlert height={32} width={32} className="text-[#DD503F]" />
-            <h4 className="text-xl font-bold text-slate-50">Delete account</h4>
-            <p className="text-slate-400 text-sm">
-              Permanently delete your account and all associated data. This
-              action cannot be undone.
-            </p>
-            <Button variant={'destructive'} className="mt-3">
-              Delete my account
-            </Button>
-          </div>
-        </div>
-      </SheetContent>
-    </Sheet>
-  );
-};
-
-export default ProfileAccountSheet;
diff --git a/src/components/profile/ProfileEducation.tsx b/src/components/profile/ProfileEducation.tsx
index b2874d25..e9d32a83 100644
--- a/src/components/profile/ProfileEducation.tsx
+++ b/src/components/profile/ProfileEducation.tsx
@@ -2,38 +2,9 @@
 import { Info } from 'lucide-react';
 import React, { useState } from 'react';
 import { Button } from '../ui/button';
-import { useForm } from 'react-hook-form';
-import {
-  DegreeEnum,
-  FieldOfStudyEnum,
-  profileEducationSchema,
-  profileEducationType,
-} from '@/lib/validators/user.profile.validator';
-import { zodResolver } from '@hookform/resolvers/zod';
-import {
-  Form,
-  FormControl,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} from '@/components/ui/form';
-import { Input } from '../ui/input';
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '../ui/select';
-import _ from 'lodash';
-import {
-  Sheet,
-  SheetContent,
-  SheetDescription,
-  SheetHeader,
-  SheetTitle,
-} from '@/components/ui/sheet';
+import SheetWrapper from './sheets/SheetWrapper';
+import { SHEETS } from '@/lib/constant/profile.constant';
+import EducationForm from './forms/EducationForm';
 
 const ProfileEducation = () => {
   const [isSheetOpen, setIsSheetOpen] = useState<boolean>(false);
@@ -45,25 +16,6 @@ const ProfileEducation = () => {
     setIsSheetOpen(true);
   };
 
-  const form = useForm<profileEducationType>({
-    resolver: zodResolver(profileEducationSchema),
-    defaultValues: {
-      instituteName: '',
-      degree: DegreeEnum.BTech,
-      fieldOfStudy: FieldOfStudyEnum.CS,
-      startDate: undefined,
-      endDate: undefined,
-    },
-  });
-
-  const handleFormClose = () => {
-    form.reset();
-    form.clearErrors();
-    handleClose();
-  };
-
-  const onSubmit = () => {};
-
   return (
     <>
       <h3 className="font-bold text-2xl">Education</h3>
@@ -80,169 +32,14 @@ const ProfileEducation = () => {
         </Button>
       </div>
 
-      <Sheet open={isSheetOpen} onOpenChange={handleClose}>
-        <SheetContent className="flex flex-col pb-0">
-          <SheetHeader>
-            <SheetTitle className="text-2xl">Add New Project</SheetTitle>
-            <SheetDescription>
-              Highlight key project that demonstrate your technical abilities
-              and innovative problem-solving.
-            </SheetDescription>
-          </SheetHeader>
-          <div className="mt-5 flex-1 relative">
-            <Form {...form}>
-              <form
-                onSubmit={form.handleSubmit(onSubmit)}
-                className="space-y-8 h-full flex flex-col justify-between"
-              >
-                <div className=" flex flex-col gap-y-4">
-                  <FormField
-                    control={form.control}
-                    name="instituteName"
-                    render={({ field }) => (
-                      <FormItem>
-                        <FormLabel> Project Name </FormLabel>
-                        <FormControl>
-                          <Input
-                            placeholder="Enter Institute Name"
-                            {...field}
-                          />
-                        </FormControl>
-                      </FormItem>
-                    )}
-                  />
-                  <FormField
-                    control={form.control}
-                    name="degree"
-                    render={({ field }) => (
-                      <FormItem>
-                        <FormLabel>Employment Type</FormLabel>
-                        <Select
-                          onValueChange={field.onChange}
-                          defaultValue={field.value}
-                        >
-                          <FormControl>
-                            <SelectTrigger>
-                              <SelectValue />
-                            </SelectTrigger>
-                          </FormControl>
-                          <SelectContent>
-                            {Object.values(DegreeEnum).map((type) => (
-                              <SelectItem key={type} value={type}>
-                                {_.startCase(type)}
-                              </SelectItem>
-                            ))}
-                          </SelectContent>
-                        </Select>
-                        <FormMessage />
-                      </FormItem>
-                    )}
-                  />
-                  <FormField
-                    control={form.control}
-                    name="fieldOfStudy"
-                    render={({ field }) => (
-                      <FormItem>
-                        <FormLabel>Employment Type</FormLabel>
-                        <Select
-                          onValueChange={field.onChange}
-                          defaultValue={field.value}
-                        >
-                          <FormControl>
-                            <SelectTrigger>
-                              <SelectValue />
-                            </SelectTrigger>
-                          </FormControl>
-                          <SelectContent>
-                            {Object.values(FieldOfStudyEnum).map((type) => (
-                              <SelectItem key={type} value={type}>
-                                {_.startCase(type)}
-                              </SelectItem>
-                            ))}
-                          </SelectContent>
-                        </Select>
-                        <FormMessage />
-                      </FormItem>
-                    )}
-                  />
-
-                  <FormField
-                    control={form.control}
-                    name="startDate"
-                    render={({ field }) => (
-                      <FormItem>
-                        <FormLabel>Start Date</FormLabel>
-                        <FormControl>
-                          <Input
-                            type="date"
-                            {...field}
-                            value={
-                              field.value
-                                ? field.value.toISOString().split('T')[0]
-                                : ''
-                            }
-                            onChange={(e) =>
-                              field.onChange(new Date(e.target.value))
-                            }
-                          />
-                        </FormControl>
-                        <FormMessage />
-                      </FormItem>
-                    )}
-                  />
-
-                  <FormField
-                    control={form.control}
-                    name="endDate"
-                    render={({ field }) => (
-                      <FormItem>
-                        <FormLabel>End Date</FormLabel>
-                        <FormControl>
-                          <Input
-                            type="date"
-                            {...field}
-                            value={
-                              field.value
-                                ? field.value.toISOString().split('T')[0]
-                                : ''
-                            }
-                            onChange={(e) =>
-                              field.onChange(
-                                e.target.value
-                                  ? new Date(e.target.value)
-                                  : undefined
-                              )
-                            }
-                          />
-                        </FormControl>
-                        <FormMessage />
-                      </FormItem>
-                    )}
-                  />
-                </div>
-                <div className="py-4 flex gap-4 justify-end">
-                  <Button
-                    type="reset"
-                    onClick={handleFormClose}
-                    variant={'outline'}
-                    className="mt-0 text-white rounded-[8px]"
-                  >
-                    {' '}
-                    Cancel{' '}
-                  </Button>
-                  <Button
-                    type="submit"
-                    className="mt-0 text-white rounded-[8px]"
-                  >
-                    {' '}
-                    Add Education{' '}
-                  </Button>
-                </div>
-              </form>
-            </Form>
-          </div>
-        </SheetContent>
-      </Sheet>
+      <SheetWrapper
+        isOpen={isSheetOpen}
+        handleClose={handleClose}
+        title={SHEETS.education.title}
+        description={SHEETS.education.description}
+      >
+        <EducationForm handleClose={handleClose} />
+      </SheetWrapper>
     </>
   );
 };
diff --git a/src/components/profile/ProfileExperience.tsx b/src/components/profile/ProfileExperience.tsx
index a77fb0f5..a1778608 100644
--- a/src/components/profile/ProfileExperience.tsx
+++ b/src/components/profile/ProfileExperience.tsx
@@ -2,40 +2,9 @@
 import { Info } from 'lucide-react';
 import React, { useState } from 'react';
 import { Button } from '../ui/button';
-import {
-  Sheet,
-  SheetContent,
-  SheetDescription,
-  SheetHeader,
-  SheetTitle,
-} from '@/components/ui/sheet';
-import { useForm } from 'react-hook-form';
-import {
-  expFormSchemaType,
-  expFormSchema,
-} from '@/lib/validators/user.profile.validator';
-import { zodResolver } from '@hookform/resolvers/zod';
-import {
-  Form,
-  FormControl,
-  FormDescription,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} from '@/components/ui/form';
-import { Textarea } from '../ui/textarea';
-import { Input } from '../ui/input';
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '../ui/select';
-import _ from 'lodash';
-import { EmployementType, WorkMode } from '@prisma/client';
-import { Switch } from '../ui/switch';
+import SheetWrapper from './sheets/SheetWrapper';
+import { SHEETS } from '@/lib/constant/profile.constant';
+import ExperienceForm from './forms/ExperienceForm';
 
 const ProfileExperience = () => {
   const [isSheetOpen, setIsSheetOpen] = useState<boolean>(false);
@@ -46,28 +15,7 @@ const ProfileExperience = () => {
   const handleOpen = () => {
     setIsSheetOpen(true);
   };
-  const form = useForm<expFormSchemaType>({
-    resolver: zodResolver(expFormSchema),
-    defaultValues: {
-      companyName: '',
-      designation: '',
-      EmploymentType: 'Full_time',
-      address: '',
-      workMode: 'office',
-      currentWorkStatus: false,
-      startDate: undefined,
-      endDate: undefined,
-      description: '',
-    },
-  });
-  const WatchCurrentWorkStatus = form.watch('currentWorkStatus');
-  const onSubmit = () => {};
 
-  const handleFormClose = () => {
-    form.reset();
-    form.clearErrors();
-    handleClose();
-  };
   return (
     <>
       <h3 className="font-bold text-2xl">Work Experience</h3>
@@ -85,235 +33,14 @@ const ProfileExperience = () => {
           Add your work experience
         </Button>
       </div>
-      <Sheet open={isSheetOpen} onOpenChange={handleClose}>
-        <SheetContent className="flex flex-col pb-0">
-          <SheetHeader>
-            <SheetTitle className="text-2xl">Add Work Experience</SheetTitle>
-            <SheetDescription>
-              Share your work history to highlight your career journey and
-              expertise for employers.
-            </SheetDescription>
-          </SheetHeader>
-          <div className=" flex-1 relative overflow-y-auto no-scrollbar">
-            <Form {...form}>
-              <form
-                onSubmit={form.handleSubmit(onSubmit)}
-                className="space-y-4 h-full flex flex-col justify-between"
-              >
-                <div className="flex flex-col gap-y-4">
-                  <FormField
-                    control={form.control}
-                    name="companyName"
-                    render={({ field }) => (
-                      <FormItem>
-                        <FormLabel>Company Name</FormLabel>
-                        <FormControl>
-                          <Input {...field} />
-                        </FormControl>
-                        <FormMessage />
-                      </FormItem>
-                    )}
-                  />
-
-                  <FormField
-                    control={form.control}
-                    name="designation"
-                    render={({ field }) => (
-                      <FormItem>
-                        <FormLabel>Designation</FormLabel>
-                        <FormControl>
-                          <Input {...field} />
-                        </FormControl>
-                        <FormMessage />
-                      </FormItem>
-                    )}
-                  />
-
-                  <FormField
-                    control={form.control}
-                    name="EmploymentType"
-                    render={({ field }) => (
-                      <FormItem>
-                        <FormLabel>Employment Type</FormLabel>
-                        <Select
-                          onValueChange={field.onChange}
-                          defaultValue={field.value}
-                        >
-                          <FormControl>
-                            <SelectTrigger>
-                              <SelectValue />
-                            </SelectTrigger>
-                          </FormControl>
-                          <SelectContent>
-                            {Object.values(EmployementType).map((type) => (
-                              <SelectItem key={type} value={type}>
-                                {_.startCase(type)}
-                              </SelectItem>
-                            ))}
-                          </SelectContent>
-                        </Select>
-                        <FormMessage />
-                      </FormItem>
-                    )}
-                  />
-
-                  <FormField
-                    control={form.control}
-                    name="address"
-                    render={({ field }) => (
-                      <FormItem>
-                        <FormLabel>Address</FormLabel>
-                        <FormControl>
-                          <Input {...field} />
-                        </FormControl>
-                        <FormMessage />
-                      </FormItem>
-                    )}
-                  />
-
-                  <FormField
-                    control={form.control}
-                    name="workMode"
-                    render={({ field }) => (
-                      <FormItem>
-                        <FormLabel>Work Mode</FormLabel>
-                        <Select
-                          onValueChange={field.onChange}
-                          defaultValue={field.value}
-                        >
-                          <FormControl>
-                            <SelectTrigger>
-                              <SelectValue />
-                            </SelectTrigger>
-                          </FormControl>
-                          <SelectContent>
-                            {Object.values(WorkMode).map((mode) => (
-                              <SelectItem key={mode} value={mode}>
-                                {_.startCase(mode)}
-                              </SelectItem>
-                            ))}
-                          </SelectContent>
-                        </Select>
-                        <FormMessage />
-                      </FormItem>
-                    )}
-                  />
-
-                  <FormField
-                    control={form.control}
-                    name="currentWorkStatus"
-                    render={({ field }) => (
-                      <FormItem className="flex flex-row items-start space-x-3 space-y-0">
-                        <FormControl>
-                          <Switch
-                            checked={field.value}
-                            onCheckedChange={field.onChange}
-                            className="data-[state=checked]:bg-gray-300 data-[state=unchecked]:bg-gray-400"
-                          />
-                        </FormControl>
-                        <div className="space-y-1 leading-none">
-                          <FormLabel>Currently working here</FormLabel>
-                        </div>
-                      </FormItem>
-                    )}
-                  />
-
-                  <FormField
-                    control={form.control}
-                    name="startDate"
-                    render={({ field }) => (
-                      <FormItem>
-                        <FormLabel>Start Date</FormLabel>
-                        <FormControl>
-                          <Input
-                            type="date"
-                            {...field}
-                            value={
-                              field.value
-                                ? field.value.toISOString().split('T')[0]
-                                : ''
-                            }
-                            onChange={(e) =>
-                              field.onChange(new Date(e.target.value))
-                            }
-                          />
-                        </FormControl>
-                        <FormMessage />
-                      </FormItem>
-                    )}
-                  />
-
-                  {!WatchCurrentWorkStatus && (
-                    <FormField
-                      control={form.control}
-                      name="endDate"
-                      render={({ field }) => (
-                        <FormItem>
-                          <FormLabel>End Date</FormLabel>
-                          <FormControl>
-                            <Input
-                              type="date"
-                              {...field}
-                              value={
-                                field.value
-                                  ? field.value.toISOString().split('T')[0]
-                                  : ''
-                              }
-                              onChange={(e) =>
-                                field.onChange(
-                                  e.target.value
-                                    ? new Date(e.target.value)
-                                    : undefined
-                                )
-                              }
-                            />
-                          </FormControl>
-                          <FormMessage />
-                        </FormItem>
-                      )}
-                    />
-                  )}
-
-                  <FormField
-                    control={form.control}
-                    name="description"
-                    render={({ field }) => (
-                      <FormItem>
-                        <FormLabel>Description</FormLabel>
-                        <FormControl>
-                          <Textarea {...field} />
-                        </FormControl>
-                        <FormDescription>
-                          Describe your role and responsibilities (50-255
-                          characters)
-                        </FormDescription>
-                      </FormItem>
-                    )}
-                  />
-                </div>
-                <div className="py-4 flex gap-4 justify-end">
-                  <Button
-                    type="reset"
-                    onClick={handleFormClose}
-                    variant={'outline'}
-                    className="mt-0 text-white rounded-[8px]"
-                  >
-                    {' '}
-                    Cancel{' '}
-                  </Button>
-                  <Button
-                    type="submit"
-                    className="mt-0 text-white rounded-[8px]"
-                  >
-                    {' '}
-                    Add Project{' '}
-                  </Button>
-                </div>
-              </form>
-            </Form>
-          </div>
-        </SheetContent>
-      </Sheet>
+      <SheetWrapper
+        isOpen={isSheetOpen}
+        handleClose={handleClose}
+        title={SHEETS.expierence.title}
+        description={SHEETS.expierence.description}
+      >
+        <ExperienceForm handleClose={handleClose} />
+      </SheetWrapper>
     </>
   );
 };
diff --git a/src/components/profile/ProfileHeroSection.tsx b/src/components/profile/ProfileHeroSection.tsx
index 54ec148c..be8dcf6e 100644
--- a/src/components/profile/ProfileHeroSection.tsx
+++ b/src/components/profile/ProfileHeroSection.tsx
@@ -1,36 +1,12 @@
 'use client';
-import React, { useRef, useState } from 'react';
-import {
-  Sheet,
-  SheetContent,
-  SheetDescription,
-  SheetHeader,
-  SheetTitle,
-} from '@/components/ui/sheet';
+import React, { useState } from 'react';
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
 import { Button } from '@/components/ui/button';
-import { Pencil, Settings, Share2, X } from 'lucide-react';
-import {
-  profileSchema,
-  ProfileSchemaType,
-} from '@/lib/validators/user.profile.validator';
-import { useForm } from 'react-hook-form';
-import { zodResolver } from '@hookform/resolvers/zod';
-import {
-  Form,
-  FormControl,
-  FormDescription,
-  FormField,
-  FormItem,
-  FormLabel,
-} from '@/components/ui/form';
-import { Textarea } from '../ui/textarea';
-import { Input } from '../ui/input';
-import Image from 'next/image';
-import { FaFileUpload } from 'react-icons/fa';
-import { useToast } from '../ui/use-toast';
-import { uploadFileAction } from '@/actions/upload-to-cdn';
-import ProfileAccountSheet from './ProfileAccountSheet';
+import { Pencil, Settings, Share2 } from 'lucide-react';
+import SheetWrapper from './sheets/SheetWrapper';
+import EditProfileForm from './forms/EditProfileForm';
+import { SHEETS } from '@/lib/constant/profile.constant';
+import AccountSeetingForm from './forms/AccountSeetingForm';
 
 const ProfileHeroSection = () => {
   const [isSheetOpen, setIsSheetOpen] = useState<boolean>(false);
@@ -41,102 +17,10 @@ const ProfileHeroSection = () => {
     setIsAccountOpen(false);
   };
 
-  const { toast } = useToast();
-
-  const [file, setFile] = useState<File | null>(null);
-  const [previewImg, setPreviewImg] = useState<string | null>(null);
-
-  const form = useForm<ProfileSchemaType>({
-    resolver: zodResolver(profileSchema),
-    defaultValues: {
-      aboutMe: '',
-      username: '',
-      email: '',
-      contactEmail: '',
-      profileImage: '',
-      name: '',
-    },
-  });
   const handleOpen = () => {
     setIsSheetOpen(true);
   };
 
-  const submitImage = async (file: File | null) => {
-    if (!file) return;
-
-    const formData = new FormData();
-    formData.append('file', file);
-
-    try {
-      const uniqueFileName = `${Date.now()}-${file.name}`;
-      formData.append('uniqueFileName', uniqueFileName);
-
-      const res = await uploadFileAction(formData, 'webp');
-      if (!res) {
-        throw new Error('Failed to upload image');
-      }
-
-      const uploadRes = res;
-      return uploadRes.url;
-    } catch (error) {
-      console.error('Image upload failed:', error);
-    }
-  };
-
-  const onSubmit = async (data: ProfileSchemaType) => {
-    data.profileImage = (await submitImage(file)) ?? '/main.svg';
-  };
-
-  const handleFormClose = () => {
-    form.reset();
-    form.clearErrors();
-    handleClose();
-  };
-  const profileImageRef = useRef<HTMLImageElement>(null);
-
-  const handleClick = () => {
-    const fileInput = document.getElementById('fileInput') as HTMLInputElement;
-
-    if (fileInput) {
-      fileInput.click();
-    }
-  };
-
-  const clearLogoImage = () => {
-    const fileInput = document.getElementById('fileInput') as HTMLInputElement;
-
-    if (fileInput) {
-      fileInput.value = '';
-    }
-    setPreviewImg(null);
-    setFile(null);
-  };
-  const handleFileChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
-    const selectedFile = e.target.files ? e.target.files[0] : null;
-    if (!selectedFile) {
-      return;
-    }
-    if (!selectedFile.type.includes('image')) {
-      toast({
-        title:
-          'Invalid file format. Please upload an image file (e.g., .png, .jpg, .jpeg, .svg ) for the company logo',
-        variant: 'destructive',
-      });
-      return;
-    }
-    const reader = new FileReader();
-    reader.onload = () => {
-      if (profileImageRef.current) {
-        profileImageRef.current.src = reader.result as string;
-      }
-      setPreviewImg(reader.result as string);
-    };
-    reader.readAsDataURL(selectedFile);
-    if (selectedFile) {
-      setFile(selectedFile);
-    }
-  };
-
   return (
     <>
       <div className="border rounded-2xl  h-72 overflow-hidden">
@@ -173,172 +57,22 @@ const ProfileHeroSection = () => {
           </div>
         </div>
       </div>
-      <Sheet open={isSheetOpen} onOpenChange={handleClose}>
-        <SheetContent className="flex flex-col pb-0 overflow-y-auto no-scrollbar">
-          <SheetHeader>
-            <SheetTitle className="text-2xl">Edit Your Profile</SheetTitle>
-            <SheetDescription>
-              Update your personal information, contact details, and social
-              links to keep your profile current and professional.
-            </SheetDescription>
-          </SheetHeader>
-          <div className="mt-5 flex-1 relative">
-            <Form {...form}>
-              <form
-                onSubmit={form.handleSubmit(onSubmit)}
-                className="space-y-8 h-full flex flex-col justify-between"
-              >
-                <div className="flex flex-col gap-y-4">
-                  <FormLabel> Profile Picture </FormLabel>
-                  <div className="flex justify-center">
-                    <div
-                      className="w-40 h-40 dark:bg-gray-700 bg-gray-300 border border-dashed border-gray-500 rounded-md flex items-center justify-center cursor-pointer mb-2"
-                      onClick={handleClick}
-                    >
-                      {previewImg ? (
-                        <Image
-                          src={previewImg}
-                          ref={profileImageRef}
-                          className="object-contain w-full h-full rounded-md overflow-hidden"
-                          alt="Company Logo"
-                          width={160}
-                          height={160}
-                        />
-                      ) : (
-                        <FaFileUpload
-                          height={80}
-                          width={80}
-                          className="text-white h-10 w-10"
-                        />
-                      )}
-                    </div>
-                    {previewImg && (
-                      <button
-                        type="button"
-                        onClick={clearLogoImage}
-                        className="absolute top-0 right-0 w-5 h-5 bg-red-500 rounded-full items-center flex justify-center cursor-pointer translate-x-1/2 -translate-y-1/2"
-                      >
-                        <X size="16" />
-                      </button>
-                    )}
-
-                    <input
-                      id="fileInput"
-                      className="hidden"
-                      type="file"
-                      accept="image/*"
-                      onChange={handleFileChange}
-                    />
-                  </div>
-
-                  <FormField
-                    control={form.control}
-                    name="name"
-                    render={({ field }) => (
-                      <FormItem>
-                        <FormLabel>Name</FormLabel>
-                        <FormControl>
-                          <Input
-                            placeholder="name"
-                            {...field}
-                            className="rounded-[8px]"
-                          />
-                        </FormControl>
-                      </FormItem>
-                    )}
-                  />
-                  <FormField
-                    control={form.control}
-                    name="username"
-                    render={({ field }) => (
-                      <FormItem>
-                        <FormLabel>Username</FormLabel>
-                        <FormControl>
-                          <Input
-                            placeholder="username"
-                            {...field}
-                            className="rounded-[8px]"
-                          />
-                        </FormControl>
-                      </FormItem>
-                    )}
-                  />
-                  <FormField
-                    control={form.control}
-                    name="email"
-                    render={({ field }) => (
-                      <FormItem>
-                        <FormLabel>Email</FormLabel>
-                        <FormControl>
-                          <Input
-                            placeholder="email@gmail.com"
-                            {...field}
-                            className="rounded-[8px]"
-                          />
-                        </FormControl>
-                      </FormItem>
-                    )}
-                  />
-                  <FormField
-                    control={form.control}
-                    name="contactEmail"
-                    render={({ field }) => (
-                      <FormItem>
-                        <FormLabel>Contact Email</FormLabel>
-                        <FormControl>
-                          <Input
-                            placeholder="contact@gmail.com"
-                            {...field}
-                            className="rounded-[8px]"
-                          />
-                        </FormControl>
-                      </FormItem>
-                    )}
-                  />
-                  <FormField
-                    control={form.control}
-                    name="aboutMe"
-                    render={({ field }) => (
-                      <FormItem>
-                        <FormLabel>About Me</FormLabel>
-                        <FormControl>
-                          <Textarea
-                            placeholder="Write here"
-                            {...field}
-                            className="rounded-[8px]"
-                          />
-                        </FormControl>
-                        <FormDescription>
-                          Describe yourself between 50 to 255 characters.
-                        </FormDescription>
-                      </FormItem>
-                    )}
-                  />
-                </div>
-                <div className="py-4 flex gap-4 justify-end">
-                  <Button
-                    type="reset"
-                    onClick={handleFormClose}
-                    variant={'outline'}
-                    className="mt-0 text-white rounded-[8px]"
-                  >
-                    {' '}
-                    Cancel{' '}
-                  </Button>
-                  <Button
-                    type="submit"
-                    className="mt-0 text-white rounded-[8px]"
-                  >
-                    {' '}
-                    Update Profile{' '}
-                  </Button>
-                </div>
-              </form>
-            </Form>
-          </div>
-        </SheetContent>
-      </Sheet>
-      <ProfileAccountSheet isOpen={isAccountOpen} handleClose={handleClose} />
+      <SheetWrapper
+        isOpen={isSheetOpen}
+        handleClose={handleClose}
+        title={SHEETS.editProfile.title}
+        description={SHEETS.editProfile.description}
+      >
+        <EditProfileForm handleClose={handleClose} />
+      </SheetWrapper>
+      <SheetWrapper
+        isOpen={isAccountOpen}
+        handleClose={handleClose}
+        title={SHEETS.accountSetting.title}
+        description={SHEETS.accountSetting.description}
+      >
+        <AccountSeetingForm handleClose={handleClose} />
+      </SheetWrapper>
     </>
   );
 };
diff --git a/src/components/profile/ProfileProjects.tsx b/src/components/profile/ProfileProjects.tsx
index 62da4c18..b9f422bd 100644
--- a/src/components/profile/ProfileProjects.tsx
+++ b/src/components/profile/ProfileProjects.tsx
@@ -1,60 +1,13 @@
 'use client';
-import { CirclePlus, Info, X } from 'lucide-react';
-import React, { useCallback, useState } from 'react';
-import { useDropzone } from 'react-dropzone';
-import {
-  Sheet,
-  SheetContent,
-  SheetDescription,
-  SheetHeader,
-  SheetTitle,
-} from '@/components/ui/sheet';
-import { useForm } from 'react-hook-form';
-import {
-  ProfileProjectType,
-  profileProjectSchema,
-} from '@/lib/validators/user.profile.validator';
-import { zodResolver } from '@hookform/resolvers/zod';
+import { Info } from 'lucide-react';
+import React, { useState } from 'react';
 import { Button } from '@/components/ui/button';
-import {
-  Form,
-  FormControl,
-  FormDescription,
-  FormField,
-  FormItem,
-  FormLabel,
-} from '@/components/ui/form';
-import { Textarea } from '../ui/textarea';
-import { Input } from '../ui/input';
-import { useToast } from '../ui/use-toast';
-import Image from 'next/image';
+import SheetWrapper from './sheets/SheetWrapper';
+import { SHEETS } from '@/lib/constant/profile.constant';
+import ProjectForm from './forms/ProjectForm';
 
 const ProfileProjects = () => {
   const [isSheetOpen, setIsSheetOpen] = useState<boolean>(false);
-  const [file, setFiles] = useState<File | null>(null);
-  const [previewImg, setPreviewImg] = useState<null | string>(null);
-
-  const { toast } = useToast();
-
-  const onDrop = useCallback(
-    (acceptedFiles: File[]) => {
-      if (
-        acceptedFiles[0].size < 1024 * 1024 * 5 &&
-        acceptedFiles[0].type.includes('image')
-      ) {
-        setFiles(acceptedFiles[0]);
-        setPreviewImg(URL.createObjectURL(acceptedFiles[0]));
-      } else {
-        toast({
-          variant: 'destructive',
-          title: 'Project thumbnail should be a image and not more than 5 MB.',
-        });
-      }
-    },
-    [toast]
-  );
-
-  const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDrop });
 
   const handleClose = () => {
     setIsSheetOpen(false);
@@ -62,33 +15,7 @@ const ProfileProjects = () => {
   const handleOpen = () => {
     setIsSheetOpen(true);
   };
-  const form = useForm<ProfileProjectType>({
-    resolver: zodResolver(profileProjectSchema),
-    defaultValues: {
-      projectThumbnail: '',
-      projectDescription: '',
-      projectFeatured: false,
-      projectGithub: '',
-      projectLiveLink: '',
-      projectName: '',
-    },
-  });
 
-  // function onSubmit(values: ProfileProjectType) {
-  //   console.log(values)
-  // }
-  function onSubmit() {}
-
-  const handleFormClose = () => {
-    form.reset();
-    form.clearErrors();
-    handleClose();
-    setFiles(null);
-  };
-  const handleImageReset = () => {
-    setFiles(null);
-    setPreviewImg(null);
-  };
   return (
     <>
       <h3 className="font-bold text-2xl">Projects</h3>
@@ -106,137 +33,14 @@ const ProfileProjects = () => {
           Add your projects
         </Button>
       </div>
-      <Sheet open={isSheetOpen} onOpenChange={handleClose}>
-        <SheetContent className="flex flex-col pb-0">
-          <SheetHeader>
-            <SheetTitle className="text-2xl">Add New Project</SheetTitle>
-            <SheetDescription>
-              Highlight key project that demonstrate your technical abilities
-              and innovative problem-solving.
-            </SheetDescription>
-          </SheetHeader>
-          <div className="mt-5 flex-1 relative">
-            <Form {...form}>
-              <form
-                onSubmit={form.handleSubmit(onSubmit)}
-                className="space-y-8 h-full flex flex-col justify-between"
-              >
-                <div className=" flex flex-col gap-y-4">
-                  <div>
-                    <FormLabel>Upload project thumbnail</FormLabel>
-                    <div
-                      {...getRootProps()}
-                      className={`w-full overflow-hidden h-44 flex justify-center items-center flex-col bg-slate-900 rounded-[8px] border border-transparent text-center mt-2 relative ${isDragActive && 'animate-pulse border-white'}`}
-                    >
-                      {file && previewImg && (
-                        <div
-                          onClick={handleImageReset}
-                          className="absolute top-1 right-1 bg-red-500 text-white rounded-full h-5 w-5 flex items-center justify-center cursor-pointer"
-                        >
-                          {' '}
-                          <X height={16} width={16} />{' '}
-                        </div>
-                      )}
-                      {!file && (
-                        <>
-                          <input {...getInputProps({ accept: 'images' })} />
-                          <CirclePlus height={24} width={24} />
-                          <p className="font-medium text-base leading-6 block mt-2">
-                            Drag and drop an image <br />
-                            or click to upload
-                          </p>
-                          <p className="text-slate-400 text-xs">
-                            Supported formats: JPEG, PNG. <br />
-                            Maximum file size: 5MB
-                          </p>
-                        </>
-                      )}
-                      {file && previewImg && (
-                        <Image
-                          src={previewImg}
-                          alt="project-image"
-                          width={300}
-                          height={300}
-                          className="object-cover !w-full !h-full "
-                        />
-                      )}
-                    </div>
-                  </div>
-                  <FormField
-                    control={form.control}
-                    name="projectName"
-                    render={({ field }) => (
-                      <FormItem>
-                        <FormLabel> Project Name </FormLabel>
-                        <FormControl>
-                          <Input placeholder="Enter project name" {...field} />
-                        </FormControl>
-                      </FormItem>
-                    )}
-                  />
-                  <FormField
-                    control={form.control}
-                    name="projectLiveLink"
-                    render={({ field }) => (
-                      <FormItem>
-                        <FormLabel> Live Link </FormLabel>
-                        <FormControl>
-                          <Input placeholder="Enter Live Link" {...field} />
-                        </FormControl>
-                      </FormItem>
-                    )}
-                  />
-                  <FormField
-                    control={form.control}
-                    name="projectGithub"
-                    render={({ field }) => (
-                      <FormItem>
-                        <FormLabel> Github Link </FormLabel>
-                        <FormControl>
-                          <Input placeholder="Enter Github Link" {...field} />
-                        </FormControl>
-                      </FormItem>
-                    )}
-                  />
-                  <FormField
-                    control={form.control}
-                    name="projectDescription"
-                    render={({ field }) => (
-                      <FormItem>
-                        <FormLabel> Project Description </FormLabel>
-                        <FormControl>
-                          <Textarea placeholder="Write here" {...field} />
-                        </FormControl>
-                        <FormDescription>
-                          Describe your project between 50 to 255 characters.
-                        </FormDescription>
-                      </FormItem>
-                    )}
-                  />
-                </div>
-                <div className="py-4 flex gap-4 justify-end">
-                  <Button
-                    type="reset"
-                    onClick={handleFormClose}
-                    variant={'outline'}
-                    className="mt-0 text-white rounded-[8px]"
-                  >
-                    {' '}
-                    Cancel{' '}
-                  </Button>
-                  <Button
-                    type="submit"
-                    className="mt-0 text-white rounded-[8px]"
-                  >
-                    {' '}
-                    Add Project{' '}
-                  </Button>
-                </div>
-              </form>
-            </Form>
-          </div>
-        </SheetContent>
-      </Sheet>
+      <SheetWrapper
+        isOpen={isSheetOpen}
+        handleClose={handleClose}
+        title={SHEETS.project.title}
+        description={SHEETS.project.description}
+      >
+        <ProjectForm handleClose={handleClose} />
+      </SheetWrapper>
     </>
   );
 };
diff --git a/src/components/profile/ProfileResume.tsx b/src/components/profile/ProfileResume.tsx
index 96392cb6..d21db0dd 100644
--- a/src/components/profile/ProfileResume.tsx
+++ b/src/components/profile/ProfileResume.tsx
@@ -1,71 +1,21 @@
 'use client';
-import { CirclePlus, FileText } from 'lucide-react';
-import React, { useCallback, useState } from 'react';
-import { useDropzone } from 'react-dropzone';
-import {
-  Sheet,
-  SheetContent,
-  SheetDescription,
-  SheetHeader,
-  SheetTitle,
-} from '@/components/ui/sheet';
-import { Form, FormLabel } from '@/components/ui/form';
-import { zodResolver } from '@hookform/resolvers/zod';
+import { FileText } from 'lucide-react';
+import React, { useState } from 'react';
 import { Button } from '@/components/ui/button';
-import { useForm } from 'react-hook-form';
-import {
-  profileResumeSchema,
-  ProfileResumeType,
-} from '@/lib/validators/user.profile.validator';
-import { useToast } from '../ui/use-toast';
+import SheetWrapper from './sheets/SheetWrapper';
+import { SHEETS } from '@/lib/constant/profile.constant';
+import UploadResumeForm from './forms/UploadResumeForm';
 
 const ProfileResume = () => {
-  const [file, setFiles] = useState<File | null>(null);
   const [isSheetOpen, setIsSheetOpen] = useState<boolean>(false);
 
-  const { toast } = useToast();
-
-  const onDrop = useCallback(
-    (acceptedFiles: File[]) => {
-      if (
-        acceptedFiles[0].size < 1048576 &&
-        acceptedFiles[0].type.includes('pdf')
-      ) {
-        setFiles(acceptedFiles[0]);
-      } else {
-        toast({
-          variant: 'destructive',
-          title: 'Resume should be a pdf type and not more than 1 MB.',
-        });
-      }
-    },
-    [toast]
-  );
-
-  const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDrop });
-
   const handleClose = () => {
     setIsSheetOpen(false);
   };
   const handleOpen = () => {
     setIsSheetOpen(true);
   };
-  const form = useForm<ProfileResumeType>({
-    resolver: zodResolver(profileResumeSchema),
-    defaultValues: {
-      resume: '',
-    },
-  });
-
-  // function onSubmit(values: ProfileResumeType) {
-  //   console.log(values)
-  // }
-  function onSubmit() {}
 
-  const handleFormClose = () => {
-    form.reset();
-    handleClose();
-  };
   return (
     <>
       <h3 className="font-bold text-2xl">Resume</h3>
@@ -84,73 +34,14 @@ const ProfileResume = () => {
           Upload your resume
         </Button>
       </div>
-      <Sheet open={isSheetOpen} onOpenChange={handleClose}>
-        <SheetContent className="flex flex-col pb-0 w-[488px]">
-          <SheetHeader>
-            <SheetTitle className="text-2xl">Upload Your Resume</SheetTitle>
-            <SheetDescription>
-              Share your resume to give employers a full view of your
-              qualifications and experiences.
-            </SheetDescription>
-          </SheetHeader>
-          <div className="mt-5 flex-1 relative">
-            <Form {...form}>
-              <form
-                onSubmit={form.handleSubmit(onSubmit)}
-                className="space-y-8 h-full flex flex-col justify-between"
-              >
-                <div>
-                  <FormLabel>Upload resume</FormLabel>
-                  <div
-                    {...getRootProps()}
-                    className={`w-full h-44 flex justify-center items-center flex-col bg-slate-900 rounded-[8px] border border-transparent text-center mt-2 ${isDragActive && 'animate-pulse border-white'}`}
-                  >
-                    <input {...getInputProps()} />
-                    {!file && (
-                      <>
-                        <CirclePlus height={24} width={24} />
-                        <p className="font-medium text-base leading-6 block mt-2">
-                          Drag and drop an image <br />
-                          or click to upload
-                        </p>
-                        <p className="text-slate-400 text-xs">
-                          Supported format : PDF <br />
-                          Maximum file size: 1MB
-                        </p>
-                      </>
-                    )}
-                    {file && (
-                      <>
-                        <FileText height={24} width={24} />
-                        <p className="font-medium text-base leading-6 block mt-2">
-                          Selected File:
-                        </p>
-                        <p className="text-slate-400 text-xs">{file.name}</p>
-                      </>
-                    )}
-                  </div>
-                  <div></div>
-                </div>
-                <div className="py-4 flex gap-4 justify-end">
-                  <Button
-                    onClick={handleFormClose}
-                    variant={'outline'}
-                    className="mt-0 text-white rounded-[8px]"
-                  >
-                    Cancel
-                  </Button>
-                  <Button
-                    type="submit"
-                    className="mt-0 text-white rounded-[8px]"
-                  >
-                    Add Resume
-                  </Button>
-                </div>
-              </form>
-            </Form>
-          </div>
-        </SheetContent>
-      </Sheet>
+      <SheetWrapper
+        isOpen={isSheetOpen}
+        handleClose={handleClose}
+        title={SHEETS.resume.title}
+        description={SHEETS.resume.description}
+      >
+        <UploadResumeForm handleClose={handleClose} />
+      </SheetWrapper>
     </>
   );
 };
diff --git a/src/components/profile/ProfileSkills.tsx b/src/components/profile/ProfileSkills.tsx
index 0d59d881..21b3a9b5 100644
--- a/src/components/profile/ProfileSkills.tsx
+++ b/src/components/profile/ProfileSkills.tsx
@@ -2,14 +2,9 @@
 import { Info } from 'lucide-react';
 import React, { useState } from 'react';
 import { Button } from '../ui/button';
-import {
-  Sheet,
-  SheetContent,
-  SheetDescription,
-  SheetHeader,
-  SheetTitle,
-} from '@/components/ui/sheet';
-import { AddSkills } from '../user-multistep-form/add-skills-form';
+import SheetWrapper from './sheets/SheetWrapper';
+import { SHEETS } from '@/lib/constant/profile.constant';
+import { SkillsForm } from './forms/SkillsForm';
 
 const ProfileSkills = () => {
   const [isSheetOpen, setIsSheetOpen] = useState<boolean>(false);
@@ -37,20 +32,14 @@ const ProfileSkills = () => {
           Add your skills
         </Button>
       </div>
-      <Sheet open={isSheetOpen} onOpenChange={handleClose}>
-        <SheetContent className="flex flex-col pb-0">
-          <SheetHeader>
-            <SheetTitle className="text-2xl">Add Your Skills</SheetTitle>
-            <SheetDescription>
-              Showcase your strongest skills to make your profile stand out to
-              recruiters.
-            </SheetDescription>
-          </SheetHeader>
-          <div className="mt-5 flex-1 relative">
-            <AddSkills />
-          </div>
-        </SheetContent>
-      </Sheet>
+      <SheetWrapper
+        isOpen={isSheetOpen}
+        handleClose={handleClose}
+        title={SHEETS.skills.title}
+        description={SHEETS.skills.description}
+      >
+        <SkillsForm handleClose={handleClose} />
+      </SheetWrapper>
     </>
   );
 };
diff --git a/src/components/profile/forms/AccountSeetingForm.tsx b/src/components/profile/forms/AccountSeetingForm.tsx
new file mode 100644
index 00000000..541d6941
--- /dev/null
+++ b/src/components/profile/forms/AccountSeetingForm.tsx
@@ -0,0 +1,129 @@
+import React from 'react';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+} from '@/components/ui/form';
+import {
+  UserPasswordSchema,
+  UserPasswordSchemaType,
+} from '@/lib/validators/user.profile.validator';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useForm } from 'react-hook-form';
+import { Input } from '@/components/ui/input';
+import { Button } from '@/components/ui/button';
+import { TriangleAlert } from 'lucide-react';
+
+const AccountSeetingForm = ({ handleClose }: { handleClose: () => void }) => {
+  const form = useForm<UserPasswordSchemaType>({
+    resolver: zodResolver(UserPasswordSchema),
+    defaultValues: {
+      confirmNewPassword: '',
+      currentPassword: '',
+      newPassword: '',
+    },
+  });
+
+  const onSubmit = () => {};
+
+  const handleFormClose = () => {
+    form.clearErrors();
+    form.reset();
+    handleClose();
+  };
+
+  return (
+    <div className=" flex-1 relative">
+      <h2 className="text-xl mb-4 font-bold">Change password</h2>
+      <Form {...form}>
+        <form
+          onSubmit={form.handleSubmit(onSubmit)}
+          className="space-y-8 flex flex-col justify-between border px-3 py-3 rounded-sm"
+        >
+          <div className="flex flex-col gap-y-4">
+            <FormField
+              control={form.control}
+              name="currentPassword"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel> Current Password </FormLabel>
+                  <FormControl>
+                    <Input
+                      placeholder="Current Password"
+                      type="password"
+                      {...field}
+                      className="rounded-[8px]"
+                    />
+                  </FormControl>
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={form.control}
+              name="newPassword"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>New Password</FormLabel>
+                  <FormControl>
+                    <Input
+                      placeholder="New Password"
+                      type="password"
+                      {...field}
+                      className="rounded-[8px]"
+                    />
+                  </FormControl>
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={form.control}
+              name="confirmNewPassword"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Confirm New Password</FormLabel>
+                  <FormControl>
+                    <Input
+                      placeholder="Confirm New Password"
+                      {...field}
+                      className="rounded-[8px]"
+                      type="password"
+                    />
+                  </FormControl>
+                </FormItem>
+              )}
+            />
+            <div className="py-4 flex gap-4 justify-end">
+              <Button
+                type="reset"
+                onClick={handleFormClose}
+                variant={'outline'}
+                className="mt-0 text-white rounded-[8px]"
+              >
+                Cancel
+              </Button>
+              <Button type="submit" className="mt-0 text-white rounded-[8px]">
+                Update Password
+              </Button>
+            </div>
+          </div>
+        </form>
+      </Form>
+
+      <div className="h-60 bg-red-600 bg-opacity-10 mt-5 rounded-md flex flex-col justify-center items-center p-6 text-center ">
+        <TriangleAlert height={32} width={32} className="text-[#DD503F]" />
+        <h4 className="text-xl font-bold text-slate-50">Delete account</h4>
+        <p className="text-slate-400 text-sm">
+          Permanently delete your account and all associated data. This action
+          cannot be undone.
+        </p>
+        <Button variant={'destructive'} className="mt-3">
+          Delete my account
+        </Button>
+      </div>
+    </div>
+  );
+};
+
+export default AccountSeetingForm;
diff --git a/src/components/profile/forms/EditProfileForm.tsx b/src/components/profile/forms/EditProfileForm.tsx
new file mode 100644
index 00000000..83ab8580
--- /dev/null
+++ b/src/components/profile/forms/EditProfileForm.tsx
@@ -0,0 +1,270 @@
+import React, { useRef, useState } from 'react';
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+} from '@/components/ui/form';
+import Image from 'next/image';
+import { FaFileUpload } from 'react-icons/fa';
+import { useToast } from '@/components/ui/use-toast';
+import { useForm } from 'react-hook-form';
+import {
+  profileSchema,
+  ProfileSchemaType,
+} from '@/lib/validators/user.profile.validator';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { uploadFileAction } from '@/actions/upload-to-cdn';
+import { X } from 'lucide-react';
+import { Input } from '@/components/ui/input';
+import { Textarea } from '@/components/ui/textarea';
+import { Button } from '@/components/ui/button';
+
+const EditProfileForm = ({ handleClose }: { handleClose: () => void }) => {
+  const { toast } = useToast();
+
+  const [file, setFile] = useState<File | null>(null);
+  const [previewImg, setPreviewImg] = useState<string | null>(null);
+
+  const form = useForm<ProfileSchemaType>({
+    resolver: zodResolver(profileSchema),
+    defaultValues: {
+      aboutMe: '',
+      username: '',
+      email: '',
+      contactEmail: '',
+      profileImage: '',
+      name: '',
+    },
+  });
+
+  const submitImage = async (file: File | null) => {
+    if (!file) return;
+
+    const formData = new FormData();
+    formData.append('file', file);
+
+    try {
+      const uniqueFileName = `${Date.now()}-${file.name}`;
+      formData.append('uniqueFileName', uniqueFileName);
+
+      const res = await uploadFileAction(formData, 'webp');
+      if (!res) {
+        throw new Error('Failed to upload image');
+      }
+
+      const uploadRes = res;
+      return uploadRes.url;
+    } catch (error) {
+      console.error('Image upload failed:', error);
+    }
+  };
+
+  const onSubmit = async (data: ProfileSchemaType) => {
+    data.profileImage = (await submitImage(file)) ?? '/main.svg';
+  };
+
+  const handleFormClose = () => {
+    form.reset();
+    form.clearErrors();
+    handleClose();
+  };
+  const profileImageRef = useRef<HTMLImageElement>(null);
+
+  const handleClick = () => {
+    const fileInput = document.getElementById('fileInput') as HTMLInputElement;
+
+    if (fileInput) {
+      fileInput.click();
+    }
+  };
+
+  const clearLogoImage = () => {
+    const fileInput = document.getElementById('fileInput') as HTMLInputElement;
+
+    if (fileInput) {
+      fileInput.value = '';
+    }
+    setPreviewImg(null);
+    setFile(null);
+  };
+  const handleFileChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    const selectedFile = e.target.files ? e.target.files[0] : null;
+    if (!selectedFile) {
+      return;
+    }
+    if (!selectedFile.type.includes('image')) {
+      toast({
+        title:
+          'Invalid file format. Please upload an image file (e.g., .png, .jpg, .jpeg, .svg ) for the company logo',
+        variant: 'destructive',
+      });
+      return;
+    }
+    const reader = new FileReader();
+    reader.onload = () => {
+      if (profileImageRef.current) {
+        profileImageRef.current.src = reader.result as string;
+      }
+      setPreviewImg(reader.result as string);
+    };
+    reader.readAsDataURL(selectedFile);
+    if (selectedFile) {
+      setFile(selectedFile);
+    }
+  };
+
+  return (
+    <Form {...form}>
+      <form
+        onSubmit={form.handleSubmit(onSubmit)}
+        className="space-y-8 h-full flex flex-col justify-between"
+      >
+        <div className="flex flex-col gap-y-4">
+          <FormLabel> Profile Picture </FormLabel>
+          <div className="flex justify-center">
+            <div
+              className="w-40 h-40 dark:bg-gray-700 bg-gray-300 border border-dashed border-gray-500 rounded-md flex items-center justify-center cursor-pointer mb-2"
+              onClick={handleClick}
+            >
+              {previewImg ? (
+                <Image
+                  src={previewImg}
+                  ref={profileImageRef}
+                  className="object-contain w-full h-full rounded-md overflow-hidden"
+                  alt="Company Logo"
+                  width={160}
+                  height={160}
+                />
+              ) : (
+                <FaFileUpload
+                  height={80}
+                  width={80}
+                  className="text-white h-10 w-10"
+                />
+              )}
+            </div>
+            {previewImg && (
+              <button
+                type="button"
+                onClick={clearLogoImage}
+                className="absolute top-0 right-0 w-5 h-5 bg-red-500 rounded-full items-center flex justify-center cursor-pointer translate-x-1/2 -translate-y-1/2"
+              >
+                <X size="16" />
+              </button>
+            )}
+
+            <input
+              id="fileInput"
+              className="hidden"
+              type="file"
+              accept="image/*"
+              onChange={handleFileChange}
+            />
+          </div>
+
+          <FormField
+            control={form.control}
+            name="name"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Name</FormLabel>
+                <FormControl>
+                  <Input
+                    placeholder="name"
+                    {...field}
+                    className="rounded-[8px]"
+                  />
+                </FormControl>
+              </FormItem>
+            )}
+          />
+          <FormField
+            control={form.control}
+            name="username"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Username</FormLabel>
+                <FormControl>
+                  <Input
+                    placeholder="username"
+                    {...field}
+                    className="rounded-[8px]"
+                  />
+                </FormControl>
+              </FormItem>
+            )}
+          />
+          <FormField
+            control={form.control}
+            name="email"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Email</FormLabel>
+                <FormControl>
+                  <Input
+                    placeholder="email@gmail.com"
+                    {...field}
+                    className="rounded-[8px]"
+                  />
+                </FormControl>
+              </FormItem>
+            )}
+          />
+          <FormField
+            control={form.control}
+            name="contactEmail"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Contact Email</FormLabel>
+                <FormControl>
+                  <Input
+                    placeholder="contact@gmail.com"
+                    {...field}
+                    className="rounded-[8px]"
+                  />
+                </FormControl>
+              </FormItem>
+            )}
+          />
+          <FormField
+            control={form.control}
+            name="aboutMe"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>About Me</FormLabel>
+                <FormControl>
+                  <Textarea
+                    placeholder="Write here"
+                    {...field}
+                    className="rounded-[8px]"
+                  />
+                </FormControl>
+                <FormDescription>
+                  Describe yourself between 50 to 255 characters.
+                </FormDescription>
+              </FormItem>
+            )}
+          />
+        </div>
+        <div className="py-4 flex gap-4 justify-end">
+          <Button
+            type="reset"
+            onClick={handleFormClose}
+            variant={'outline'}
+            className="mt-0 text-white rounded-[8px]"
+          >
+            Cancel
+          </Button>
+          <Button type="submit" className="mt-0 text-white rounded-[8px]">
+            Update Profile
+          </Button>
+        </div>
+      </form>
+    </Form>
+  );
+};
+
+export default EditProfileForm;
diff --git a/src/components/profile/forms/EducationForm.tsx b/src/components/profile/forms/EducationForm.tsx
new file mode 100644
index 00000000..db57e011
--- /dev/null
+++ b/src/components/profile/forms/EducationForm.tsx
@@ -0,0 +1,193 @@
+import React from 'react';
+import { useForm } from 'react-hook-form';
+import {
+  DegreeEnum,
+  FieldOfStudyEnum,
+  profileEducationSchema,
+  profileEducationType,
+} from '@/lib/validators/user.profile.validator';
+import { zodResolver } from '@hookform/resolvers/zod';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/components/ui/form';
+import { Input } from '@/components/ui/input';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import _ from 'lodash';
+import { Button } from '@/components/ui/button';
+
+const EducationForm = ({ handleClose }: { handleClose: () => void }) => {
+  const form = useForm<profileEducationType>({
+    resolver: zodResolver(profileEducationSchema),
+    defaultValues: {
+      instituteName: '',
+      degree: DegreeEnum.BTech,
+      fieldOfStudy: FieldOfStudyEnum.CS,
+      startDate: undefined,
+      endDate: undefined,
+    },
+  });
+
+  const handleFormClose = () => {
+    form.reset();
+    form.clearErrors();
+    handleClose();
+  };
+
+  const onSubmit = () => {};
+
+  return (
+    <div className="flex-1 relative">
+      <Form {...form}>
+        <form
+          onSubmit={form.handleSubmit(onSubmit)}
+          className="space-y-8 h-full flex flex-col justify-between"
+        >
+          <div className=" flex flex-col gap-y-4">
+            <FormField
+              control={form.control}
+              name="instituteName"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel> Project Name </FormLabel>
+                  <FormControl>
+                    <Input placeholder="Enter Institute Name" {...field} />
+                  </FormControl>
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={form.control}
+              name="degree"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Employment Type</FormLabel>
+                  <Select
+                    onValueChange={field.onChange}
+                    defaultValue={field.value}
+                  >
+                    <FormControl>
+                      <SelectTrigger>
+                        <SelectValue />
+                      </SelectTrigger>
+                    </FormControl>
+                    <SelectContent>
+                      {Object.values(DegreeEnum).map((type) => (
+                        <SelectItem key={type} value={type}>
+                          {_.startCase(type)}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={form.control}
+              name="fieldOfStudy"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Employment Type</FormLabel>
+                  <Select
+                    onValueChange={field.onChange}
+                    defaultValue={field.value}
+                  >
+                    <FormControl>
+                      <SelectTrigger>
+                        <SelectValue />
+                      </SelectTrigger>
+                    </FormControl>
+                    <SelectContent>
+                      {Object.values(FieldOfStudyEnum).map((type) => (
+                        <SelectItem key={type} value={type}>
+                          {_.startCase(type)}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={form.control}
+              name="startDate"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Start Date</FormLabel>
+                  <FormControl>
+                    <Input
+                      type="date"
+                      {...field}
+                      value={
+                        field.value
+                          ? field.value.toISOString().split('T')[0]
+                          : ''
+                      }
+                      onChange={(e) => field.onChange(new Date(e.target.value))}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={form.control}
+              name="endDate"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>End Date</FormLabel>
+                  <FormControl>
+                    <Input
+                      type="date"
+                      {...field}
+                      value={
+                        field.value
+                          ? field.value.toISOString().split('T')[0]
+                          : ''
+                      }
+                      onChange={(e) =>
+                        field.onChange(
+                          e.target.value ? new Date(e.target.value) : undefined
+                        )
+                      }
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+          </div>
+          <div className="py-4 flex gap-4 justify-end">
+            <Button
+              type="reset"
+              onClick={handleFormClose}
+              variant={'outline'}
+              className="mt-0 text-white rounded-[8px]"
+            >
+              Cancel
+            </Button>
+            <Button type="submit" className="mt-0 text-white rounded-[8px]">
+              Add Education
+            </Button>
+          </div>
+        </form>
+      </Form>
+    </div>
+  );
+};
+
+export default EducationForm;
diff --git a/src/components/profile/forms/ExperienceForm.tsx b/src/components/profile/forms/ExperienceForm.tsx
new file mode 100644
index 00000000..1299183b
--- /dev/null
+++ b/src/components/profile/forms/ExperienceForm.tsx
@@ -0,0 +1,268 @@
+import React from 'react';
+import { useForm } from 'react-hook-form';
+import {
+  expFormSchemaType,
+  expFormSchema,
+} from '@/lib/validators/user.profile.validator';
+import { zodResolver } from '@hookform/resolvers/zod';
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/components/ui/form';
+import { Textarea } from '@/components/ui/textarea';
+import { Input } from '@/components/ui/input';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import _ from 'lodash';
+import { EmployementType, WorkMode } from '@prisma/client';
+import { Switch } from '@/components/ui/switch';
+import { Button } from '@/components/ui/button';
+const ExperienceForm = ({ handleClose }: { handleClose: () => void }) => {
+  const form = useForm<expFormSchemaType>({
+    resolver: zodResolver(expFormSchema),
+    defaultValues: {
+      companyName: '',
+      designation: '',
+      EmploymentType: 'Full_time',
+      address: '',
+      workMode: 'office',
+      currentWorkStatus: false,
+      startDate: undefined,
+      endDate: undefined,
+      description: '',
+    },
+  });
+  const WatchCurrentWorkStatus = form.watch('currentWorkStatus');
+  const onSubmit = () => {};
+
+  const handleFormClose = () => {
+    form.reset();
+    form.clearErrors();
+    handleClose();
+  };
+
+  return (
+    <div className=" flex-1 relative overflow-y-auto no-scrollbar">
+      <Form {...form}>
+        <form
+          onSubmit={form.handleSubmit(onSubmit)}
+          className="space-y-4 h-full flex flex-col justify-between"
+        >
+          <div className="flex flex-col gap-y-4">
+            <FormField
+              control={form.control}
+              name="companyName"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Company Name</FormLabel>
+                  <FormControl>
+                    <Input {...field} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={form.control}
+              name="designation"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Designation</FormLabel>
+                  <FormControl>
+                    <Input {...field} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={form.control}
+              name="EmploymentType"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Employment Type</FormLabel>
+                  <Select
+                    onValueChange={field.onChange}
+                    defaultValue={field.value}
+                  >
+                    <FormControl>
+                      <SelectTrigger>
+                        <SelectValue />
+                      </SelectTrigger>
+                    </FormControl>
+                    <SelectContent>
+                      {Object.values(EmployementType).map((type) => (
+                        <SelectItem key={type} value={type}>
+                          {_.startCase(type)}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={form.control}
+              name="address"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Address</FormLabel>
+                  <FormControl>
+                    <Input {...field} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={form.control}
+              name="workMode"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Work Mode</FormLabel>
+                  <Select
+                    onValueChange={field.onChange}
+                    defaultValue={field.value}
+                  >
+                    <FormControl>
+                      <SelectTrigger>
+                        <SelectValue />
+                      </SelectTrigger>
+                    </FormControl>
+                    <SelectContent>
+                      {Object.values(WorkMode).map((mode) => (
+                        <SelectItem key={mode} value={mode}>
+                          {_.startCase(mode)}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={form.control}
+              name="currentWorkStatus"
+              render={({ field }) => (
+                <FormItem className="flex flex-row items-start space-x-3 space-y-0">
+                  <FormControl>
+                    <Switch
+                      checked={field.value}
+                      onCheckedChange={field.onChange}
+                      className="data-[state=checked]:bg-gray-300 data-[state=unchecked]:bg-gray-400"
+                    />
+                  </FormControl>
+                  <div className="space-y-1 leading-none">
+                    <FormLabel>Currently working here</FormLabel>
+                  </div>
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={form.control}
+              name="startDate"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Start Date</FormLabel>
+                  <FormControl>
+                    <Input
+                      type="date"
+                      {...field}
+                      value={
+                        field.value
+                          ? field.value.toISOString().split('T')[0]
+                          : ''
+                      }
+                      onChange={(e) => field.onChange(new Date(e.target.value))}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            {!WatchCurrentWorkStatus && (
+              <FormField
+                control={form.control}
+                name="endDate"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>End Date</FormLabel>
+                    <FormControl>
+                      <Input
+                        type="date"
+                        {...field}
+                        value={
+                          field.value
+                            ? field.value.toISOString().split('T')[0]
+                            : ''
+                        }
+                        onChange={(e) =>
+                          field.onChange(
+                            e.target.value
+                              ? new Date(e.target.value)
+                              : undefined
+                          )
+                        }
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            )}
+
+            <FormField
+              control={form.control}
+              name="description"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Description</FormLabel>
+                  <FormControl>
+                    <Textarea {...field} />
+                  </FormControl>
+                  <FormDescription>
+                    Describe your role and responsibilities (50-255 characters)
+                  </FormDescription>
+                </FormItem>
+              )}
+            />
+          </div>
+          <div className="py-4 flex gap-4 justify-end">
+            <Button
+              type="reset"
+              onClick={handleFormClose}
+              variant={'outline'}
+              className="mt-0 text-white rounded-[8px]"
+            >
+              Cancel
+            </Button>
+            <Button type="submit" className="mt-0 text-white rounded-[8px]">
+              Add Project
+            </Button>
+          </div>
+        </form>
+      </Form>
+    </div>
+  );
+};
+
+export default ExperienceForm;
diff --git a/src/components/profile/forms/ProjectForm.tsx b/src/components/profile/forms/ProjectForm.tsx
new file mode 100644
index 00000000..369e5f65
--- /dev/null
+++ b/src/components/profile/forms/ProjectForm.tsx
@@ -0,0 +1,196 @@
+import React, { useCallback, useState } from 'react';
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+} from '@/components/ui/form';
+import { useDropzone } from 'react-dropzone';
+import Image from 'next/image';
+import { useToast } from '@/components/ui/use-toast';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import {
+  profileProjectSchema,
+  ProfileProjectType,
+} from '@/lib/validators/user.profile.validator';
+import { CirclePlus, X } from 'lucide-react';
+import { Input } from '@/components/ui/input';
+import { Textarea } from '@/components/ui/textarea';
+import { Button } from '@/components/ui/button';
+
+const ProjectForm = ({ handleClose }: { handleClose: () => void }) => {
+  const [file, setFiles] = useState<File | null>(null);
+  const [previewImg, setPreviewImg] = useState<null | string>(null);
+
+  const { toast } = useToast();
+
+  const onDrop = useCallback(
+    (acceptedFiles: File[]) => {
+      if (
+        acceptedFiles[0].size < 1024 * 1024 * 5 &&
+        acceptedFiles[0].type.includes('image')
+      ) {
+        setFiles(acceptedFiles[0]);
+        setPreviewImg(URL.createObjectURL(acceptedFiles[0]));
+      } else {
+        toast({
+          variant: 'destructive',
+          title: 'Project thumbnail should be a image and not more than 5 MB.',
+        });
+      }
+    },
+    [toast]
+  );
+
+  const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDrop });
+
+  const form = useForm<ProfileProjectType>({
+    resolver: zodResolver(profileProjectSchema),
+    defaultValues: {
+      projectThumbnail: '',
+      projectDescription: '',
+      projectFeatured: false,
+      projectGithub: '',
+      projectLiveLink: '',
+      projectName: '',
+    },
+  });
+
+  // function onSubmit(values: ProfileProjectType) {
+  //   console.log(values)
+  // }
+  function onSubmit() {}
+
+  const handleFormClose = () => {
+    form.reset();
+    form.clearErrors();
+    handleClose();
+    setFiles(null);
+  };
+  const handleImageReset = () => {
+    setFiles(null);
+    setPreviewImg(null);
+  };
+
+  return (
+    <div className=" flex-1 relative">
+      <Form {...form}>
+        <form
+          onSubmit={form.handleSubmit(onSubmit)}
+          className="space-y-8 h-full flex flex-col justify-between"
+        >
+          <div className=" flex flex-col gap-y-4">
+            <div>
+              <FormLabel>Upload project thumbnail</FormLabel>
+              <div
+                {...getRootProps()}
+                className={`w-full overflow-hidden h-44 flex justify-center items-center flex-col bg-slate-900 rounded-[8px] border border-transparent text-center mt-2 relative ${isDragActive && 'animate-pulse border-white'}`}
+              >
+                {file && previewImg && (
+                  <div
+                    onClick={handleImageReset}
+                    className="absolute top-1 right-1 bg-red-500 text-white rounded-full h-5 w-5 flex items-center justify-center cursor-pointer"
+                  >
+                    <X height={16} width={16} />
+                  </div>
+                )}
+                {!file && (
+                  <>
+                    <input {...getInputProps({ accept: 'images' })} />
+                    <CirclePlus height={24} width={24} />
+                    <p className="font-medium text-base leading-6 block mt-2">
+                      Drag and drop an image <br />
+                      or click to upload
+                    </p>
+                    <p className="text-slate-400 text-xs">
+                      Supported formats: JPEG, PNG. <br />
+                      Maximum file size: 5MB
+                    </p>
+                  </>
+                )}
+                {file && previewImg && (
+                  <Image
+                    src={previewImg}
+                    alt="project-image"
+                    width={300}
+                    height={300}
+                    className="object-cover !w-full !h-full "
+                  />
+                )}
+              </div>
+            </div>
+            <FormField
+              control={form.control}
+              name="projectName"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel> Project Name </FormLabel>
+                  <FormControl>
+                    <Input placeholder="Enter project name" {...field} />
+                  </FormControl>
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={form.control}
+              name="projectLiveLink"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel> Live Link </FormLabel>
+                  <FormControl>
+                    <Input placeholder="Enter Live Link" {...field} />
+                  </FormControl>
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={form.control}
+              name="projectGithub"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel> Github Link </FormLabel>
+                  <FormControl>
+                    <Input placeholder="Enter Github Link" {...field} />
+                  </FormControl>
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={form.control}
+              name="projectDescription"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel> Project Description </FormLabel>
+                  <FormControl>
+                    <Textarea placeholder="Write here" {...field} />
+                  </FormControl>
+                  <FormDescription>
+                    Describe your project between 50 to 255 characters.
+                  </FormDescription>
+                </FormItem>
+              )}
+            />
+          </div>
+          <div className="py-4 flex gap-4 justify-end">
+            <Button
+              type="reset"
+              onClick={handleFormClose}
+              variant={'outline'}
+              className="mt-0 text-white rounded-[8px]"
+            >
+              Cancel
+            </Button>
+            <Button type="submit" className="mt-0 text-white rounded-[8px]">
+              Add Project
+            </Button>
+          </div>
+        </form>
+      </Form>
+    </div>
+  );
+};
+
+export default ProjectForm;
diff --git a/src/components/profile/forms/ReadMeForm.tsx b/src/components/profile/forms/ReadMeForm.tsx
new file mode 100644
index 00000000..e552a995
--- /dev/null
+++ b/src/components/profile/forms/ReadMeForm.tsx
@@ -0,0 +1,76 @@
+import React from 'react';
+import { Button } from '@/components/ui/button';
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+} from '@/components/ui/form';
+import { Textarea } from '@/components/ui/textarea';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import {
+  aboutMeSchema,
+  AboutMeSchemaType,
+} from '@/lib/validators/user.profile.validator';
+
+const ReadMeForm = ({ handleClose }: { handleClose: () => void }) => {
+  const form = useForm<AboutMeSchemaType>({
+    resolver: zodResolver(aboutMeSchema),
+    defaultValues: {
+      aboutMe: '',
+    },
+  });
+
+  function onSubmit() {}
+
+  const handleFormClose = () => {
+    form.reset();
+    handleClose();
+  };
+
+  return (
+    <div className=" flex-1 relative">
+      <Form {...form}>
+        <form
+          onSubmit={form.handleSubmit(onSubmit)}
+          className="space-y-8 h-full flex flex-col justify-between"
+        >
+          <div>
+            <FormField
+              control={form.control}
+              name="aboutMe"
+              render={({ field }) => (
+                <FormItem>
+                  <FormControl>
+                    <Textarea placeholder="Write here" {...field} />
+                  </FormControl>
+                  <FormDescription>
+                    Describe yourself between 50 to 255 characters.
+                  </FormDescription>
+                </FormItem>
+              )}
+            />
+          </div>
+          <div className="py-4 flex gap-4 justify-end">
+            <Button
+              onClick={handleFormClose}
+              variant={'outline'}
+              className="mt-0 text-white rounded-[8px]"
+            >
+              {' '}
+              Cancel{' '}
+            </Button>
+            <Button type="submit" className="mt-0 text-white rounded-[8px]">
+              {' '}
+              Add About Me{' '}
+            </Button>
+          </div>
+        </form>
+      </Form>
+    </div>
+  );
+};
+
+export default ReadMeForm;
diff --git a/src/components/profile/forms/SkillsForm.tsx b/src/components/profile/forms/SkillsForm.tsx
new file mode 100644
index 00000000..04aee24f
--- /dev/null
+++ b/src/components/profile/forms/SkillsForm.tsx
@@ -0,0 +1,77 @@
+import { useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import {
+  addSkillsSchema,
+  addSkillsSchemaType,
+} from '@/lib/validators/user.profile.validator';
+import { addUserSkills } from '@/actions/user.profile.actions';
+import { useToast } from '@/components/ui/use-toast';
+import { Form } from '@/components/ui/form';
+import { SkillsCombobox } from '@/components/skills-combobox';
+import { LoadingSpinner } from '@/components/loading-spinner';
+import { Button } from '@/components/ui/button';
+
+export const SkillsForm = ({ handleClose }: { handleClose: () => void }) => {
+  const [comboBoxSelectedValues, setComboBoxSelectedValues] = useState<
+    string[]
+  >([]);
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+
+  const form = useForm<addSkillsSchemaType>({
+    resolver: zodResolver(addSkillsSchema),
+    defaultValues: {
+      skills: [],
+    },
+  });
+  const { toast } = useToast();
+  const onSubmit = async (data: addSkillsSchemaType) => {
+    try {
+      setIsLoading(true);
+      const response = await addUserSkills(data);
+      if (!response.status) {
+        return toast({
+          title: response.message || 'Error',
+          variant: 'destructive',
+        });
+      }
+      toast({
+        title: response.message,
+        variant: 'success',
+      });
+
+      form.reset(form.formState.defaultValues);
+      setComboBoxSelectedValues([]);
+    } catch (_error) {
+      toast({
+        title: 'Something went wrong while Adding Skills',
+        description: 'Internal server error',
+        variant: 'destructive',
+      });
+    } finally {
+      setIsLoading(false);
+      handleClose();
+    }
+  };
+
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)}>
+        <SkillsCombobox
+          comboBoxSelectedValues={comboBoxSelectedValues}
+          setComboBoxSelectedValues={setComboBoxSelectedValues}
+          form={form}
+        ></SkillsCombobox>
+        {isLoading ? (
+          <div className="mt-4">
+            <LoadingSpinner />{' '}
+          </div>
+        ) : (
+          <Button type="submit" className="mt-4">
+            Submit
+          </Button>
+        )}
+      </form>
+    </Form>
+  );
+};
diff --git a/src/components/profile/forms/UploadResumeForm.tsx b/src/components/profile/forms/UploadResumeForm.tsx
new file mode 100644
index 00000000..3a01f79d
--- /dev/null
+++ b/src/components/profile/forms/UploadResumeForm.tsx
@@ -0,0 +1,111 @@
+import { useToast } from '@/components/ui/use-toast';
+import {
+  profileResumeSchema,
+  ProfileResumeType,
+} from '@/lib/validators/user.profile.validator';
+import { zodResolver } from '@hookform/resolvers/zod';
+import React, { useCallback, useState } from 'react';
+import { useDropzone } from 'react-dropzone';
+import { useForm } from 'react-hook-form';
+import { Form, FormLabel } from '@/components/ui/form';
+import { CirclePlus, FileText } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+
+const UploadResumeForm = ({ handleClose }: { handleClose: () => void }) => {
+  const [file, setFiles] = useState<File | null>(null);
+
+  const { toast } = useToast();
+
+  const onDrop = useCallback(
+    (acceptedFiles: File[]) => {
+      if (
+        acceptedFiles[0].size < 1048576 &&
+        acceptedFiles[0].type.includes('pdf')
+      ) {
+        setFiles(acceptedFiles[0]);
+      } else {
+        toast({
+          variant: 'destructive',
+          title: 'Resume should be a pdf type and not more than 1 MB.',
+        });
+      }
+    },
+    [toast]
+  );
+
+  const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDrop });
+
+  const form = useForm<ProfileResumeType>({
+    resolver: zodResolver(profileResumeSchema),
+    defaultValues: {
+      resume: '',
+    },
+  });
+
+  // function onSubmit(values: ProfileResumeType) {
+  //   console.log(values)
+  // }
+  function onSubmit() {}
+
+  const handleFormClose = () => {
+    form.reset();
+    handleClose();
+  };
+  return (
+    <div className=" flex-1 relative">
+      <Form {...form}>
+        <form
+          onSubmit={form.handleSubmit(onSubmit)}
+          className="space-y-8 h-full flex flex-col justify-between"
+        >
+          <div>
+            <FormLabel>Upload resume</FormLabel>
+            <div
+              {...getRootProps()}
+              className={`w-full h-44 flex justify-center items-center flex-col bg-slate-900 rounded-[8px] border border-transparent text-center mt-2 ${isDragActive && 'animate-pulse border-white'}`}
+            >
+              <input {...getInputProps()} />
+              {!file && (
+                <>
+                  <CirclePlus height={24} width={24} />
+                  <p className="font-medium text-base leading-6 block mt-2">
+                    Drag and drop an image <br />
+                    or click to upload
+                  </p>
+                  <p className="text-slate-400 text-xs">
+                    Supported format : PDF <br />
+                    Maximum file size: 1MB
+                  </p>
+                </>
+              )}
+              {file && (
+                <>
+                  <FileText height={24} width={24} />
+                  <p className="font-medium text-base leading-6 block mt-2">
+                    Selected File:
+                  </p>
+                  <p className="text-slate-400 text-xs">{file.name}</p>
+                </>
+              )}
+            </div>
+            <div></div>
+          </div>
+          <div className="py-4 flex gap-4 justify-end">
+            <Button
+              onClick={handleFormClose}
+              variant={'outline'}
+              className="mt-0 text-white rounded-[8px]"
+            >
+              Cancel
+            </Button>
+            <Button type="submit" className="mt-0 text-white rounded-[8px]">
+              Add Resume
+            </Button>
+          </div>
+        </form>
+      </Form>
+    </div>
+  );
+};
+
+export default UploadResumeForm;
diff --git a/src/components/profile/sheets/SheetWrapper.tsx b/src/components/profile/sheets/SheetWrapper.tsx
new file mode 100644
index 00000000..180fa408
--- /dev/null
+++ b/src/components/profile/sheets/SheetWrapper.tsx
@@ -0,0 +1,39 @@
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+} from '@/components/ui/sheet';
+import React from 'react';
+
+interface SheetWrapperProps {
+  title: string;
+  description: string;
+  isOpen: boolean;
+  handleClose: () => void;
+  children: React.ReactNode;
+}
+
+const SheetWrapper: React.FC<SheetWrapperProps> = ({
+  isOpen,
+  handleClose,
+  children,
+  title,
+  description,
+}) => {
+  return (
+    <Sheet open={isOpen} onOpenChange={handleClose}>
+      <SheetContent className="flex flex-col pb-0 overflow-y-auto no-scrollbar">
+        <SheetHeader>
+          <SheetTitle className="text-2xl">{title}</SheetTitle>
+          <SheetDescription>{description}</SheetDescription>
+        </SheetHeader>
+
+        {children}
+      </SheetContent>
+    </Sheet>
+  );
+};
+
+export default SheetWrapper;
diff --git a/src/lib/constant/profile.constant.ts b/src/lib/constant/profile.constant.ts
index 5fefc646..ec2ad22d 100644
--- a/src/lib/constant/profile.constant.ts
+++ b/src/lib/constant/profile.constant.ts
@@ -1,10 +1,54 @@
-export const emptyProfileContainers = [
-  {
-    heading: 'You haven’t added an about me yet',
-    secondaryHeading:
+interface SheetDetails {
+  title: string;
+  description: string;
+}
+
+type Sheets = Record<string, SheetDetails>;
+
+export const SHEETS: Sheets = {
+  expeience: {
+    title: 'Add Work Experience',
+    description:
+      'Share your work history to highlight your career journey and expertise for employers.',
+  },
+  aboutMe: {
+    title: 'Add About Me',
+    description:
       'Share a brief introduction to let companies know who you are.',
-    icon: 'FileText',
-    buttonText: 'Add About me',
-    buttonAction: '',
   },
-];
+  editProfile: {
+    title: 'Edit Your Profile',
+    description:
+      'Update your personal information, contact details, and social links to keep your profile current and professional.',
+  },
+  resume: {
+    title: 'Upload Your Resume',
+    description:
+      'Share your resume to give employers a full view of your qualifications and experiences.',
+  },
+  skills: {
+    title: 'Add Your Skills',
+    description:
+      'Showcase your strongest skills to make your profile stand out to recruiters.',
+  },
+  project: {
+    title: 'Add New Project',
+    description:
+      'Highlight key project that demonstrate your technical abilities and innovative problem-solving.',
+  },
+  expierence: {
+    title: 'Add Work Experience',
+    description:
+      'Share your work history to highlight your career journey and expertise for employers.',
+  },
+  education: {
+    title: 'Add Your Education',
+    description:
+      'Provide details about your academic background to showcase your qualifications.',
+  },
+  accountSetting: {
+    title: 'Account Settings',
+    description:
+      'Manage your account preferences, update your password, or delete your account. Keep your profile secure and up-to-date.',
+  },
+};

From 98b3e2de87d8e4a19b00198fd9ec97a4140e222f Mon Sep 17 00:00:00 2001
From: Dev Sharma <devsharmasoe@gmail.com>
Date: Thu, 24 Oct 2024 23:19:04 +0530
Subject: [PATCH 03/14] updated schema

---
 .../migration.sql                             | 66 +++++++++++++++++++
 prisma/schema.prisma                          | 40 +++++++++++
 2 files changed, 106 insertions(+)
 create mode 100644 prisma/migrations/20241024174828_profileupdate/migration.sql

diff --git a/prisma/migrations/20241024174828_profileupdate/migration.sql b/prisma/migrations/20241024174828_profileupdate/migration.sql
new file mode 100644
index 00000000..1c77885b
--- /dev/null
+++ b/prisma/migrations/20241024174828_profileupdate/migration.sql
@@ -0,0 +1,66 @@
+/*
+  Warnings:
+
+  - A unique constraint covering the columns `[username]` on the table `User` will be added. If there are existing duplicate values, this will fail.
+  - Added the required column `aboutMe` to the `User` table without a default value. This is not possible if the table is not empty.
+  - Added the required column `contactEmail` to the `User` table without a default value. This is not possible if the table is not empty.
+  - Added the required column `username` to the `User` table without a default value. This is not possible if the table is not empty.
+
+*/
+-- CreateEnum
+CREATE TYPE "ProjectStack" AS ENUM ('GO', 'PYTHON', 'MERN', 'NEXTJS', 'AI_GPT_APIS', 'SPRINGBOOT', 'OTHERS');
+
+-- CreateEnum
+CREATE TYPE "DegreeType" AS ENUM ('BTech', 'MTech', 'BCA', 'MCA');
+
+-- CreateEnum
+CREATE TYPE "FieldOfStudyType" AS ENUM ('AI', 'Machine_Learning', 'CS', 'Mechanical');
+
+-- DropForeignKey
+ALTER TABLE "Experience" DROP CONSTRAINT "Experience_userId_fkey";
+
+-- DropForeignKey
+ALTER TABLE "Project" DROP CONSTRAINT "Project_userId_fkey";
+
+-- AlterTable
+ALTER TABLE "Job" ADD COLUMN     "deletedAt" TIMESTAMP(3);
+
+-- AlterTable
+ALTER TABLE "Project" ADD COLUMN     "isFeature" BOOLEAN NOT NULL DEFAULT false,
+ADD COLUMN     "projectThumbnail" TEXT,
+ADD COLUMN     "stack" "ProjectStack" NOT NULL DEFAULT 'OTHERS';
+
+-- AlterTable
+ALTER TABLE "User" ADD COLUMN     "aboutMe" TEXT NOT NULL,
+ADD COLUMN     "contactEmail" TEXT NOT NULL,
+ADD COLUMN     "discordLink" TEXT,
+ADD COLUMN     "githubLink" TEXT,
+ADD COLUMN     "linkedinLink" TEXT,
+ADD COLUMN     "portfolioLink" TEXT,
+ADD COLUMN     "twitterLink" TEXT,
+ADD COLUMN     "username" TEXT NOT NULL;
+
+-- CreateTable
+CREATE TABLE "Education" (
+    "id" SERIAL NOT NULL,
+    "instituteName" TEXT NOT NULL,
+    "degree" "DegreeType" NOT NULL,
+    "fieldOfStudy" "FieldOfStudyType" NOT NULL,
+    "startDate" TIMESTAMP(3) NOT NULL,
+    "endDate" TIMESTAMP(3),
+    "userId" TEXT NOT NULL,
+
+    CONSTRAINT "Education_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateIndex
+CREATE UNIQUE INDEX "User_username_key" ON "User"("username");
+
+-- AddForeignKey
+ALTER TABLE "Experience" ADD CONSTRAINT "Experience_userId_fkey" FOREIGN KEY ("userId") REFERENCES "User"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "Education" ADD CONSTRAINT "Education_userId_fkey" FOREIGN KEY ("userId") REFERENCES "User"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "Project" ADD CONSTRAINT "Project_userId_fkey" FOREIGN KEY ("userId") REFERENCES "User"("id") ON DELETE CASCADE ON UPDATE CASCADE;
diff --git a/prisma/schema.prisma b/prisma/schema.prisma
index d7350ec2..47472280 100644
--- a/prisma/schema.prisma
+++ b/prisma/schema.prisma
@@ -31,6 +31,20 @@ model User {
   blockedByAdmin DateTime?
   onBoard        Boolean    @default(false)
   bookmark       Bookmark[]
+
+  githubLink     String?
+  portfolioLink  String?
+  linkedinLink   String?
+  twitterLink    String?
+  discordLink    String?
+
+  username       String @unique
+
+  contactEmail   String
+
+  aboutMe        String
+
+  education      Education[]
 }
 
 enum OauthProvider {
@@ -110,6 +124,17 @@ model Experience {
   user              User            @relation(fields: [userId], references: [id], onDelete: Cascade)
 }
 
+model Education {
+  id                Int             @id @default(autoincrement())
+  instituteName     String
+  degree            DegreeType
+  fieldOfStudy      FieldOfStudyType
+  startDate         DateTime
+  endDate           DateTime?
+  userId            String
+  user              User            @relation(fields: [userId], references: [id], onDelete: Cascade)
+}
+
 model Project {
   id               Int          @id @default(autoincrement())
   projectName      String
@@ -120,6 +145,7 @@ model Project {
   stack            ProjectStack @default(OTHERS)
   userId           String
   user             User         @relation(fields: [userId], references: [id], onDelete: Cascade)
+  isFeature        Boolean @default(false)
 }
 
 enum ProjectStack {
@@ -155,3 +181,17 @@ enum EmployementType {
   Internship
   Contract
 }
+
+enum DegreeType {
+  BTech
+  MTech
+  BCA
+  MCA
+}
+
+enum FieldOfStudyType {
+  AI
+  Machine_Learning
+  CS
+  Mechanical
+}

From d91e67418dc8063c679f0da79f732f45ed217697 Mon Sep 17 00:00:00 2001
From: Dev Sharma <devsharmasoe@gmail.com>
Date: Sat, 26 Oct 2024 00:39:02 +0530
Subject: [PATCH 04/14] attached forms

---
 next.config.js                                |  12 +-
 package.json                                  |   1 +
 .../20241025095014_user_updated/migration.sql |   3 +
 .../migration.sql                             |   2 +
 prisma/schema.prisma                          |   6 +-
 prisma/seed.ts                                |   7 +-
 src/actions/user.profile.actions.ts           | 283 +++++++++++++++++-
 src/app/newProfile/[userId]/page.tsx          |  64 ++++
 src/app/newProfile/layout.tsx                 |  30 +-
 src/app/newProfile/page.tsx                   |  26 --
 src/components/comboBox.tsx                   |   4 +-
 .../profile/EducationDeleteDialog.tsx         |  85 ++++++
 .../profile/ExperienceDeleteDialog.tsx        |  85 ++++++
 src/components/profile/ProfileAboutMe.tsx     |  79 +++--
 src/components/profile/ProfileEducation.tsx   | 136 +++++++--
 src/components/profile/ProfileExperience.tsx  | 148 +++++++--
 src/components/profile/ProfileHeroSection.tsx |  95 +++---
 src/components/profile/ProfileHireme.tsx      |   4 +-
 src/components/profile/ProfileProject.tsx     |  84 ++++++
 src/components/profile/ProfileProjects.tsx    | 140 +++++++--
 src/components/profile/ProfileResume.tsx      |  97 ++++--
 src/components/profile/ProfileSkills.tsx      |  83 +++--
 .../profile/forms/EditProfileForm.tsx         |  77 +++--
 .../profile/forms/EducationForm.tsx           |  80 ++++-
 .../profile/forms/ExperienceForm.tsx          |  81 ++++-
 src/components/profile/forms/ProjectForm.tsx  | 154 ++++++++--
 src/components/profile/forms/ReadMeForm.tsx   |  50 +++-
 src/components/profile/forms/SkillsForm.tsx   |  71 +++--
 .../profile/forms/UploadResumeForm.tsx        |  66 +++-
 .../profile/projectDeleteDialog.tsx           |  81 +++++
 src/components/profile/resumeDeleteDialog.tsx |  81 +++++
 src/components/skills-combobox.tsx            |  64 ++--
 src/components/ui/alert-dialog.tsx            | 141 +++++++++
 src/lib/constant/profile.constant.ts          |   2 +-
 src/lib/utils.ts                              |  23 ++
 src/lib/validators/user.profile.validator.ts  |  48 +--
 src/types/user.types.ts                       |  53 ++++
 37 files changed, 2129 insertions(+), 417 deletions(-)
 create mode 100644 prisma/migrations/20241025095014_user_updated/migration.sql
 create mode 100644 prisma/migrations/20241025120951_resume_update_date/migration.sql
 create mode 100644 src/app/newProfile/[userId]/page.tsx
 delete mode 100644 src/app/newProfile/page.tsx
 create mode 100644 src/components/profile/EducationDeleteDialog.tsx
 create mode 100644 src/components/profile/ExperienceDeleteDialog.tsx
 create mode 100644 src/components/profile/ProfileProject.tsx
 create mode 100644 src/components/profile/projectDeleteDialog.tsx
 create mode 100644 src/components/profile/resumeDeleteDialog.tsx
 create mode 100644 src/components/ui/alert-dialog.tsx
 create mode 100644 src/types/user.types.ts

diff --git a/next.config.js b/next.config.js
index a715d6bf..69d5539f 100644
--- a/next.config.js
+++ b/next.config.js
@@ -1,3 +1,4 @@
+// next.config.js
 import { fileURLToPath } from 'node:url';
 import createJiti from 'jiti';
 
@@ -20,12 +21,11 @@ const nextConfig = {
     remotePatterns: [
       {
         protocol: 'https',
-        hostname: 'job-board.b-cdn.net', // Change this to your CDN domain
+        hostname: 'job-board.b-cdn.net',
       },
       {
         protocol: 'https',
         hostname: 'lh3.googleusercontent.com',
-        // Change this to your CDN domain
       },
       {
         protocol: 'https',
@@ -34,9 +34,13 @@ const nextConfig = {
       {
         protocol: 'https',
         hostname: 'www.example.com',
-      }
+      },
+      {
+        protocol: 'https',
+        hostname: 'devsharmapull.b-cdn.net', // Add your new domain here
+      },
     ],
   },
 };
 
-export default nextConfig; // ES module export
+export default nextConfig;
diff --git a/package.json b/package.json
index 587d6a45..2a7f56c0 100644
--- a/package.json
+++ b/package.json
@@ -40,6 +40,7 @@
     "@mui/material": "^6.1.3",
     "@prisma/client": "5.18.0",
     "@radix-ui/react-accordion": "^1.2.0",
+    "@radix-ui/react-alert-dialog": "^1.1.2",
     "@radix-ui/react-avatar": "^1.1.0",
     "@radix-ui/react-checkbox": "^1.1.1",
     "@radix-ui/react-dialog": "^1.1.2",
diff --git a/prisma/migrations/20241025095014_user_updated/migration.sql b/prisma/migrations/20241025095014_user_updated/migration.sql
new file mode 100644
index 00000000..1ab2f3cc
--- /dev/null
+++ b/prisma/migrations/20241025095014_user_updated/migration.sql
@@ -0,0 +1,3 @@
+-- AlterTable
+ALTER TABLE "User" ALTER COLUMN "aboutMe" DROP NOT NULL,
+ALTER COLUMN "contactEmail" DROP NOT NULL;
diff --git a/prisma/migrations/20241025120951_resume_update_date/migration.sql b/prisma/migrations/20241025120951_resume_update_date/migration.sql
new file mode 100644
index 00000000..6b96159f
--- /dev/null
+++ b/prisma/migrations/20241025120951_resume_update_date/migration.sql
@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "User" ADD COLUMN     "resumeUpdateDate" TIMESTAMP(3);
diff --git a/prisma/schema.prisma b/prisma/schema.prisma
index 47472280..37185446 100644
--- a/prisma/schema.prisma
+++ b/prisma/schema.prisma
@@ -40,11 +40,13 @@ model User {
 
   username       String @unique
 
-  contactEmail   String
+  contactEmail   String?
 
-  aboutMe        String
+  aboutMe        String?
 
   education      Education[]
+
+  resumeUpdateDate DateTime?
 }
 
 enum OauthProvider {
diff --git a/prisma/seed.ts b/prisma/seed.ts
index 5aa0b4a8..77428662 100644
--- a/prisma/seed.ts
+++ b/prisma/seed.ts
@@ -12,9 +12,9 @@ import bcrypt from 'bcryptjs';
 const prisma = new PrismaClient();
 
 const users = [
-  { id: '1', name: 'Jack', email: 'user@gmail.com' },
-  { id: '2', name: 'Admin', email: 'admin@gmail.com', role: Role.ADMIN, onBoard: true },
-  { id: '3', name: 'Hr', email: 'hr@gmail.com', role: Role.HR },
+  { id: '1', name: 'Jack', email: 'user@gmail.com', username: "jackcoder" },
+  { id: '2', name: 'Admin', email: 'admin@gmail.com', role: Role.ADMIN, onBoard: true, username: "admincoder" },
+  { id: '3', name: 'Hr', email: 'hr@gmail.com', role: Role.HR, username: "hrcoder" },
 ];
 
 let jobs = [
@@ -328,6 +328,7 @@ async function seedUsers() {
             password: hashedPassword,
             role: u.role || Role.USER,
             emailVerified: new Date(),
+            username: u.username
           },
         });
         console.log(`User created or updated: ${u.email}`);
diff --git a/src/actions/user.profile.actions.ts b/src/actions/user.profile.actions.ts
index 51128cda..301cd01c 100644
--- a/src/actions/user.profile.actions.ts
+++ b/src/actions/user.profile.actions.ts
@@ -1,9 +1,15 @@
 'use server';
 import prisma from '@/config/prisma.config';
 import {
+  aboutMeSchema,
+  AboutMeSchemaType,
   addSkillsSchemaType,
   expFormSchemaType,
-  projectSchemaType,
+  profileEducationType,
+  ProfileProjectType,
+  profileSchema,
+  ProfileSchemaType,
+  // projectSchemaType,
   UserProfileSchemaType,
 } from '@/lib/validators/user.profile.validator';
 import bcryptjs from 'bcryptjs';
@@ -13,6 +19,7 @@ import { ErrorHandler } from '@/lib/error';
 import { withServerActionAsyncCatcher } from '@/lib/async-catch';
 import { ServerActionReturnType } from '@/types/api.types';
 import { SuccessResponse } from '@/lib/success';
+import { withSession } from '@/lib/session';
 
 export const updateUser = async (
   email: string,
@@ -178,16 +185,37 @@ export const addUserExperience = withServerActionAsyncCatcher<
       },
     });
     return new SuccessResponse(
-      'Experience updated successfully',
+      'Experience added successfully',
       200
     ).serialize();
   } catch (_error) {
     return new ErrorHandler('Internal server error', 'DATABASE_ERROR');
   }
 });
+export const addUserEducation = withServerActionAsyncCatcher<
+  profileEducationType,
+  ServerActionReturnType
+>(async (data) => {
+  const auth = await getServerSession(authOptions);
+
+  if (!auth || !auth?.user?.id)
+    throw new ErrorHandler('Not Authorized', 'UNAUTHORIZED');
+
+  try {
+    await prisma.education.create({
+      data: {
+        ...data,
+        userId: auth.user.id,
+      },
+    });
+    return new SuccessResponse('Education added successfully', 200).serialize();
+  } catch (_error) {
+    return new ErrorHandler('Internal server error', 'DATABASE_ERROR');
+  }
+});
 
 export const addUserProjects = withServerActionAsyncCatcher<
-  projectSchemaType,
+  ProfileProjectType,
   ServerActionReturnType
 >(async (data) => {
   const auth = await getServerSession(authOptions);
@@ -244,6 +272,7 @@ export const addUserResume = async (resume: string) => {
       },
       data: {
         resume: resume,
+        resumeUpdateDate: new Date(),
       },
     });
     return new SuccessResponse('Resume SuccessFully Uploaded', 200).serialize();
@@ -317,3 +346,251 @@ export const getUserDetails = async () => {
     return new ErrorHandler('Internal server error', 'DATABASE_ERROR');
   }
 };
+
+export const getUserDetailsWithId = async (id: string) => {
+  try {
+    const res = await prisma.user.findFirst({
+      where: {
+        id: id,
+      },
+      select: {
+        username: true,
+        name: true,
+        id: true,
+        skills: true,
+        education: true,
+        experience: true,
+        email: true,
+        contactEmail: true,
+        resume: true,
+        avatar: true,
+        aboutMe: true,
+        project: true,
+        resumeUpdateDate: true,
+      },
+    });
+    if (!res) throw new ErrorHandler('User Not Found', 'NOT_FOUND');
+    return new SuccessResponse(
+      'User SuccessFully Fetched',
+      200,
+      res
+    ).serialize();
+  } catch (_error) {
+    return new ErrorHandler('Internal server error', 'DATABASE_ERROR');
+  }
+};
+
+export const updateUserDetails = withSession<
+  ProfileSchemaType,
+  ServerActionReturnType<any>
+>(async (session, userData) => {
+  if (!session || !session?.user?.id) {
+    throw new ErrorHandler('Not Authrised', 'UNAUTHORIZED');
+  }
+  const { success, data } = profileSchema.safeParse(userData);
+  if (!success) {
+    throw new ErrorHandler('Invalid Data', 'BAD_REQUEST');
+  }
+
+  if (data) {
+    await prisma.user.update({
+      where: {
+        id: session.user.id,
+      },
+      data: {
+        name: data.name,
+        username: data.username,
+        email: data.email,
+        contactEmail: data.contactEmail,
+        aboutMe: data.aboutMe,
+        avatar: data.avatar,
+      },
+    });
+  }
+
+  return new SuccessResponse(
+    'User profile updated successfully.',
+    200
+  ).serialize();
+});
+
+export const updateAboutMe = withSession<
+  AboutMeSchemaType,
+  ServerActionReturnType<any>
+>(async (session, userData) => {
+  if (!session || !session?.user?.id) {
+    throw new ErrorHandler('Not Authrised', 'UNAUTHORIZED');
+  }
+  const { success, data } = aboutMeSchema.safeParse(userData);
+  if (!success) {
+    throw new ErrorHandler('Invalid Data', 'BAD_REQUEST');
+  }
+
+  if (data) {
+    await prisma.user.update({
+      where: {
+        id: session.user.id,
+      },
+      data: {
+        aboutMe: data.aboutMe,
+      },
+    });
+  }
+
+  return new SuccessResponse('Successfully updated About Me.', 200).serialize();
+});
+
+export const deleteResume = async () => {
+  const auth = await getServerSession(authOptions);
+
+  if (!auth || !auth?.user?.id)
+    throw new ErrorHandler('Not Authorized', 'UNAUTHORIZED');
+  try {
+    // todo: delete file form cdn
+    await prisma.user.update({
+      where: {
+        id: auth.user.id,
+      },
+      data: {
+        resume: null,
+        resumeUpdateDate: null,
+      },
+    });
+    return new SuccessResponse('Resume Deleted Successfully', 200).serialize();
+  } catch (_error) {
+    return new ErrorHandler('Internal server error', 'DATABASE_ERROR');
+  }
+};
+export const deleteProject = async (projectId: number) => {
+  const auth = await getServerSession(authOptions);
+
+  if (!auth || !auth?.user?.id)
+    throw new ErrorHandler('Not Authorized', 'UNAUTHORIZED');
+  try {
+    // todo: delete image file form cdn
+    await prisma.project.delete({
+      where: {
+        id: projectId,
+      },
+    });
+    return new SuccessResponse('Project Deleted Successfully', 200).serialize();
+  } catch (_error) {
+    return new ErrorHandler('Internal server error', 'DATABASE_ERROR');
+  }
+};
+
+export const editProject = withServerActionAsyncCatcher<
+  { data: ProfileProjectType; id: number },
+  ServerActionReturnType
+>(async ({ data, id }) => {
+  const auth = await getServerSession(authOptions);
+
+  if (!auth || !auth?.user?.id)
+    throw new ErrorHandler('Not Authorized', 'UNAUTHORIZED');
+
+  try {
+    await prisma.project.update({
+      where: {
+        id: id,
+        userId: auth.user.id,
+      },
+      data: {
+        ...data,
+      },
+    });
+    return new SuccessResponse('Project updated successfully', 200).serialize();
+  } catch (_error) {
+    return new ErrorHandler('Internal server error', 'DATABASE_ERROR');
+  }
+});
+export const editExperience = withServerActionAsyncCatcher<
+  { data: expFormSchemaType; id: number },
+  ServerActionReturnType
+>(async ({ data, id }) => {
+  const auth = await getServerSession(authOptions);
+
+  if (!auth || !auth?.user?.id)
+    throw new ErrorHandler('Not Authorized', 'UNAUTHORIZED');
+
+  try {
+    await prisma.experience.update({
+      where: {
+        id: id,
+        userId: auth.user.id,
+      },
+      data: {
+        ...data,
+      },
+    });
+    return new SuccessResponse(
+      'Experience updated successfully',
+      200
+    ).serialize();
+  } catch (_error) {
+    return new ErrorHandler('Internal server error', 'DATABASE_ERROR');
+  }
+});
+export const editEducation = withServerActionAsyncCatcher<
+  { data: profileEducationType; id: number },
+  ServerActionReturnType
+>(async ({ data, id }) => {
+  const auth = await getServerSession(authOptions);
+
+  if (!auth || !auth?.user?.id)
+    throw new ErrorHandler('Not Authorized', 'UNAUTHORIZED');
+
+  try {
+    await prisma.education.update({
+      where: {
+        id: id,
+        userId: auth.user.id,
+      },
+      data: {
+        ...data,
+      },
+    });
+    return new SuccessResponse(
+      'Experience updated successfully',
+      200
+    ).serialize();
+  } catch (_error) {
+    return new ErrorHandler('Internal server error', 'DATABASE_ERROR');
+  }
+});
+
+export const deleteExperience = async (experienceId: number) => {
+  const auth = await getServerSession(authOptions);
+
+  if (!auth || !auth?.user?.id)
+    throw new ErrorHandler('Not Authorized', 'UNAUTHORIZED');
+  try {
+    // todo: delete image file form cdn
+    await prisma.experience.delete({
+      where: {
+        id: experienceId,
+        userId: auth.user.id,
+      },
+    });
+    return new SuccessResponse('Project Deleted Successfully', 200).serialize();
+  } catch (_error) {
+    return new ErrorHandler('Internal server error', 'DATABASE_ERROR');
+  }
+};
+export const deleteEducation = async (educationId: number) => {
+  const auth = await getServerSession(authOptions);
+
+  if (!auth || !auth?.user?.id)
+    throw new ErrorHandler('Not Authorized', 'UNAUTHORIZED');
+  try {
+    // todo: delete image file form cdn
+    await prisma.education.delete({
+      where: {
+        id: educationId,
+        userId: auth.user.id,
+      },
+    });
+    return new SuccessResponse('Project Deleted Successfully', 200).serialize();
+  } catch (_error) {
+    return new ErrorHandler('Internal server error', 'DATABASE_ERROR');
+  }
+};
diff --git a/src/app/newProfile/[userId]/page.tsx b/src/app/newProfile/[userId]/page.tsx
new file mode 100644
index 00000000..fb6b8bda
--- /dev/null
+++ b/src/app/newProfile/[userId]/page.tsx
@@ -0,0 +1,64 @@
+'use client';
+import { getUserDetailsWithId } from '@/actions/user.profile.actions';
+import ProfileAboutMe from '@/components/profile/ProfileAboutMe';
+import ProfileEducation from '@/components/profile/ProfileEducation';
+import ProfileExperience from '@/components/profile/ProfileExperience';
+import ProfileHeroSection from '@/components/profile/ProfileHeroSection';
+import ProfileHireme from '@/components/profile/ProfileHireme';
+import ProfileProjects from '@/components/profile/ProfileProjects';
+import ProfileResume from '@/components/profile/ProfileResume';
+import ProfileSkills from '@/components/profile/ProfileSkills';
+import { UserType } from '@/types/user.types';
+import { useSession } from 'next-auth/react';
+import React, { useEffect, useState } from 'react';
+
+const Page = ({ params: { userId } }: { params: { userId: string } }) => {
+  const [userDetails, setUserDetails] = useState<null | UserType>(null);
+
+  const { data, status } = useSession();
+
+  const isOwner = status === 'authenticated' && data?.user.id === userId;
+
+  useEffect(() => {
+    const fetchDetails = async () => {
+      const res = await getUserDetailsWithId(userId);
+      if (res.status) {
+        setUserDetails(res.additional);
+      }
+    };
+    fetchDetails();
+  }, [userId]);
+
+  return (
+    <>
+      {userDetails && (
+        <>
+          <ProfileHeroSection userdetails={userDetails} />
+          <ProfileAboutMe
+            aboutMe={userDetails.aboutMe || ''}
+            isOwner={isOwner}
+          />
+          <ProfileResume
+            resume={userDetails.resume || ''}
+            isOwner={isOwner}
+            name={userDetails.name}
+            resumeUpdateDate={userDetails.resumeUpdateDate || new Date()}
+          />
+          <ProfileSkills isOwner={isOwner} skills={userDetails.skills} />
+          <ProfileProjects projects={userDetails.project} isOwner={isOwner} />
+          <ProfileExperience
+            isOwner={isOwner}
+            experiences={userDetails.experience}
+          />
+          <ProfileEducation
+            isOwner={isOwner}
+            education={userDetails.education}
+          />
+          <ProfileHireme />
+        </>
+      )}
+    </>
+  );
+};
+
+export default Page;
diff --git a/src/app/newProfile/layout.tsx b/src/app/newProfile/layout.tsx
index cf6617ca..77d8b0fa 100644
--- a/src/app/newProfile/layout.tsx
+++ b/src/app/newProfile/layout.tsx
@@ -1,35 +1,7 @@
 'use client';
-import { getUserDetails } from '@/actions/user.profile.actions';
-import APP_PATHS from '@/config/path.config';
-import { useSession } from 'next-auth/react';
-import { useRouter } from 'next/navigation';
-import React, { useEffect } from 'react';
+import React from 'react';
 
 const ProfileLayout = ({ children }: { children: React.ReactNode }) => {
-  const router = useRouter();
-  const session = useSession();
-  useEffect(() => {
-    if (session.status !== 'loading' && session.status === 'unauthenticated')
-      router.push(`${APP_PATHS.SIGNIN}?redirectTo=/profile`);
-  }, [session.status, router]);
-  useEffect(() => {
-    async function fetchUserDetails() {
-      try {
-        const res = await getUserDetails();
-        if (res.status) {
-          localStorage.setItem(
-            'skills',
-            JSON.stringify(res.additional?.skills)
-          );
-          localStorage.setItem(
-            'resume',
-            JSON.stringify(res.additional?.resume)
-          );
-        }
-      } catch (_error) {}
-    }
-    fetchUserDetails();
-  }, []);
   return (
     <div className="flex flex-col w-full container md:gap-6 md:pt-6 relative">
       {children}
diff --git a/src/app/newProfile/page.tsx b/src/app/newProfile/page.tsx
deleted file mode 100644
index 79434ef7..00000000
--- a/src/app/newProfile/page.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import ProfileAboutMe from '@/components/profile/ProfileAboutMe';
-import ProfileEducation from '@/components/profile/ProfileEducation';
-import ProfileExperience from '@/components/profile/ProfileExperience';
-import ProfileHeroSection from '@/components/profile/ProfileHeroSection';
-import ProfileHireme from '@/components/profile/ProfileHireme';
-import ProfileProjects from '@/components/profile/ProfileProjects';
-import ProfileResume from '@/components/profile/ProfileResume';
-import ProfileSkills from '@/components/profile/ProfileSkills';
-import React from 'react';
-
-const page = () => {
-  return (
-    <>
-      <ProfileHeroSection />
-      <ProfileAboutMe />
-      <ProfileResume />
-      <ProfileSkills />
-      <ProfileProjects />
-      <ProfileExperience />
-      <ProfileEducation />
-      <ProfileHireme />
-    </>
-  );
-};
-
-export default page;
diff --git a/src/components/comboBox.tsx b/src/components/comboBox.tsx
index d236430f..97f3a0df 100644
--- a/src/components/comboBox.tsx
+++ b/src/components/comboBox.tsx
@@ -43,9 +43,9 @@ export function Combobox({
           variant="outline"
           role="combobox"
           aria-expanded={open}
-          className="w-full justify-between dark:bg-gray-800 border-none dark:text-white"
+          className="w-full justify-between border border-slate-200 dark:bg-gray-800 text-slate-500 rounded-[8px] dark:text-white"
         >
-          Search skillset ...
+          Enter Skills
           <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
         </Button>
       </PopoverTrigger>
diff --git a/src/components/profile/EducationDeleteDialog.tsx b/src/components/profile/EducationDeleteDialog.tsx
new file mode 100644
index 00000000..353aad28
--- /dev/null
+++ b/src/components/profile/EducationDeleteDialog.tsx
@@ -0,0 +1,85 @@
+import { useState } from 'react';
+import { deleteEducation } from '@/actions/user.profile.actions';
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from '@/components/ui/alert-dialog';
+import { Button } from '@/components/ui/button';
+import { Trash2 } from 'lucide-react';
+import { useToast } from '../ui/use-toast';
+
+export function EducationDeleteDialog({
+  educationId,
+}: {
+  educationId: number;
+}) {
+  const { toast } = useToast();
+  const [isOpen, setIsOpen] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+
+  const handleContinueClick = async () => {
+    try {
+      setIsLoading(true);
+      const response = await deleteEducation(educationId);
+
+      if (!response.status) {
+        toast({
+          title: response.message || 'Error',
+          variant: 'destructive',
+        });
+        return;
+      }
+
+      toast({
+        title: response.message,
+        variant: 'success',
+      });
+
+      setIsOpen(false);
+    } catch (_error) {
+      toast({
+        title: 'Something went wrong while deleting the resume',
+        description: 'Internal server error',
+        variant: 'destructive',
+      });
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <AlertDialog open={isOpen} onOpenChange={setIsOpen}>
+      <AlertDialogTrigger asChild>
+        <Button
+          className="bg-transparent p-0 b-0 hover:bg-transparent"
+          onClick={() => setIsOpen(true)}
+        >
+          <Trash2 width={16} height={16} className="text-[#C32518]" />
+        </Button>
+      </AlertDialogTrigger>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
+          <AlertDialogDescription>
+            This action cannot be undone. This will delete your Education.
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel onClick={() => setIsOpen(false)}>
+            Cancel
+          </AlertDialogCancel>
+          <AlertDialogAction disabled={isLoading} onClick={handleContinueClick}>
+            {isLoading ? 'Please wait...' : 'Continue'}
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+}
diff --git a/src/components/profile/ExperienceDeleteDialog.tsx b/src/components/profile/ExperienceDeleteDialog.tsx
new file mode 100644
index 00000000..27caa874
--- /dev/null
+++ b/src/components/profile/ExperienceDeleteDialog.tsx
@@ -0,0 +1,85 @@
+import { useState } from 'react';
+import { deleteExperience } from '@/actions/user.profile.actions';
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from '@/components/ui/alert-dialog';
+import { Button } from '@/components/ui/button';
+import { Trash2 } from 'lucide-react';
+import { useToast } from '../ui/use-toast';
+
+export function ExperienceDeleteDialog({
+  experienceId,
+}: {
+  experienceId: number;
+}) {
+  const { toast } = useToast();
+  const [isOpen, setIsOpen] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+
+  const handleContinueClick = async () => {
+    try {
+      setIsLoading(true);
+      const response = await deleteExperience(experienceId);
+
+      if (!response.status) {
+        toast({
+          title: response.message || 'Error',
+          variant: 'destructive',
+        });
+        return;
+      }
+
+      toast({
+        title: response.message,
+        variant: 'success',
+      });
+
+      setIsOpen(false);
+    } catch (_error) {
+      toast({
+        title: 'Something went wrong while deleting the resume',
+        description: 'Internal server error',
+        variant: 'destructive',
+      });
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <AlertDialog open={isOpen} onOpenChange={setIsOpen}>
+      <AlertDialogTrigger asChild>
+        <Button
+          className="bg-transparent p-0 b-0 hover:bg-transparent"
+          onClick={() => setIsOpen(true)}
+        >
+          <Trash2 width={16} height={16} className="text-[#C32518]" />
+        </Button>
+      </AlertDialogTrigger>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
+          <AlertDialogDescription>
+            This action cannot be undone. This will delete your Project.
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel onClick={() => setIsOpen(false)}>
+            Cancel
+          </AlertDialogCancel>
+          <AlertDialogAction disabled={isLoading} onClick={handleContinueClick}>
+            {isLoading ? 'Please wait...' : 'Continue'}
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+}
diff --git a/src/components/profile/ProfileAboutMe.tsx b/src/components/profile/ProfileAboutMe.tsx
index 29b99cdd..0c589d54 100644
--- a/src/components/profile/ProfileAboutMe.tsx
+++ b/src/components/profile/ProfileAboutMe.tsx
@@ -1,14 +1,25 @@
 'use client';
-import { FileText } from 'lucide-react';
+import { FileText, Pencil } from 'lucide-react';
 import React, { useState } from 'react';
 import { Button } from '@/components/ui/button';
 import SheetWrapper from './sheets/SheetWrapper';
 import ReadMeForm from './forms/ReadMeForm';
 import { SHEETS } from '@/lib/constant/profile.constant';
 
-const ProfileAboutMe = () => {
+const ProfileAboutMe = ({
+  aboutMe,
+  isOwner,
+}: {
+  aboutMe: string;
+  isOwner: boolean;
+}) => {
   const [isSheetOpen, setIsSheetOpen] = useState<boolean>(false);
 
+  const title =
+    aboutMe.length === 0
+      ? SHEETS.aboutMe.title
+      : SHEETS.aboutMe.title.replace('Add', 'Edit');
+
   const handleClose = () => {
     setIsSheetOpen(false);
   };
@@ -18,29 +29,49 @@ const ProfileAboutMe = () => {
 
   return (
     <>
-      <h3 className="font-bold text-2xl">About Me</h3>
-      <div className="border rounded-2xl  h-80 overflow-hidden flex flex-col gap-y-4 px-6 items-center justify-center">
-        <FileText width={32} height={32} />
-        <div className="text-center">
-          <h4 className="font-bold text-xl">
-            You haven’t added an about me yet
-          </h4>
-          <p className="text-sm font-medium text-gray-500">
-            Share a brief introduction to let companies know who you are.
-          </p>
-        </div>
-        <Button onClick={handleOpen} className="text-white rounded-sm">
-          Add About Me
-        </Button>
+      <div className="flex justify-between items-center">
+        <h3 className="font-bold text-2xl">About Me</h3>
+        {isOwner && (
+          <Button
+            variant={'outline'}
+            className="px-3 py-2 rounded-sm text-slate-500 dark:text-slate-400 flex gap-2"
+            onClick={handleOpen}
+          >
+            <Pencil height={16} width={16} /> Edit
+          </Button>
+        )}
       </div>
-      <SheetWrapper
-        isOpen={isSheetOpen}
-        handleClose={handleClose}
-        title={SHEETS.aboutMe.title}
-        description={SHEETS.aboutMe.description}
-      >
-        <ReadMeForm handleClose={handleClose} />
-      </SheetWrapper>
+      {!aboutMe && (
+        <div className="border rounded-2xl  h-80 overflow-hidden flex flex-col gap-y-4 px-6 items-center justify-center">
+          <FileText width={32} height={32} />
+          <div className="text-center">
+            <h4 className="font-bold text-xl">
+              You haven’t added an about me yet
+            </h4>
+            <p className="text-sm font-medium text-gray-500">
+              Share a brief introduction to let companies know who you are.
+            </p>
+          </div>
+          <Button onClick={handleOpen} className="text-white rounded-sm">
+            Add About Me
+          </Button>
+        </div>
+      )}
+      {aboutMe && (
+        <div className="rounded-2xl p-6 dark:bg-slate-900 bg-slate-100">
+          <p className="text-base leading-normal">{aboutMe}</p>
+        </div>
+      )}
+      {isOwner && (
+        <SheetWrapper
+          isOpen={isSheetOpen}
+          handleClose={handleClose}
+          title={title}
+          description={SHEETS.aboutMe.description}
+        >
+          <ReadMeForm handleClose={handleClose} aboutMe={aboutMe} />
+        </SheetWrapper>
+      )}
     </>
   );
 };
diff --git a/src/components/profile/ProfileEducation.tsx b/src/components/profile/ProfileEducation.tsx
index e9d32a83..aafbafc2 100644
--- a/src/components/profile/ProfileEducation.tsx
+++ b/src/components/profile/ProfileEducation.tsx
@@ -1,45 +1,135 @@
 'use client';
-import { Info } from 'lucide-react';
+import { Circle, Info, Pencil, Plus } from 'lucide-react';
 import React, { useState } from 'react';
 import { Button } from '../ui/button';
 import SheetWrapper from './sheets/SheetWrapper';
 import { SHEETS } from '@/lib/constant/profile.constant';
 import EducationForm from './forms/EducationForm';
+import { EducationType } from '@/types/user.types';
+import { format } from 'date-fns';
+import { EducationDeleteDialog } from './EducationDeleteDialog';
 
-const ProfileEducation = () => {
+const ProfileEducation = ({
+  isOwner,
+  education,
+}: {
+  isOwner: boolean;
+  education: EducationType[];
+}) => {
   const [isSheetOpen, setIsSheetOpen] = useState<boolean>(false);
+  const [selectedEducation, setSelectedEducation] =
+    useState<EducationType | null>(null);
 
   const handleClose = () => {
     setIsSheetOpen(false);
+    setSelectedEducation(null);
   };
   const handleOpen = () => {
     setIsSheetOpen(true);
   };
+  const title = selectedEducation
+    ? SHEETS.education.title.replace('Add', 'Edit')
+    : SHEETS.education.title;
+  function formatDateRange(startDate: Date, endDate: Date | null): string {
+    const startFormatted = format(startDate, 'MMMM yy');
+    const endFormatted = endDate ? format(endDate, 'MMMM yy') : 'Present';
 
+    return `${startFormatted} - ${endFormatted}`;
+  }
+  const handleEditClick = (education: EducationType) => {
+    setSelectedEducation(education);
+    handleOpen();
+  };
   return (
     <>
-      <h3 className="font-bold text-2xl">Education</h3>
-      <div className="border rounded-2xl  h-80 overflow-hidden flex flex-col gap-y-4 px-6 items-center justify-center">
-        <Info width={32} height={32} />
-        <div className="text-center">
-          <h4 className="font-bold text-xl">You haven’t added education yet</h4>
-          <p className="text-sm font-medium text-gray-500">
-            Provide your education background to complete your profile.
-          </p>
-        </div>
-        <Button onClick={handleOpen} className="text-white rounded-sm">
-          Add your education
-        </Button>
+      <div className="flex justify-between items-center">
+        <h3 className="font-bold text-2xl">Education</h3>
+        {isOwner && (
+          <Button
+            variant={'outline'}
+            className="px-3 py-2 rounded-sm text-slate-500 dark:text-slate-400 flex gap-2"
+            onClick={handleOpen}
+          >
+            <Plus height={16} width={16} /> Add Education
+          </Button>
+        )}
       </div>
-
-      <SheetWrapper
-        isOpen={isSheetOpen}
-        handleClose={handleClose}
-        title={SHEETS.education.title}
-        description={SHEETS.education.description}
-      >
-        <EducationForm handleClose={handleClose} />
-      </SheetWrapper>
+      {education.length === 0 && (
+        <div className="border rounded-2xl  h-80 overflow-hidden flex flex-col gap-y-4 px-6 items-center justify-center">
+          <Info width={32} height={32} />
+          <div className="text-center">
+            <h4 className="font-bold text-xl">
+              You haven’t added education yet
+            </h4>
+            <p className="text-sm font-medium text-gray-500">
+              Provide your education background to complete your profile.
+            </p>
+          </div>
+          <Button onClick={handleOpen} className="text-white rounded-sm">
+            Add your education
+          </Button>
+        </div>
+      )}
+      {education.length !== 0 && (
+        <div className="rounded-2xl p-6 dark:bg-slate-900 bg-slate-100">
+          {education.map((education) => (
+            <div key={education.id} className="flex flex-col">
+              <div className="flex gap-3 justify-start">
+                <div className="relative w-4 flex justify-center">
+                  <div className="absolute top-0 w-2 h-2 rounded-full bg-[#3259E8]"></div>
+                  <div className="w-[2px] h-full bg-gradient-to-b from-[#3259e8] to-[#F1F5F9] dark:to-[#0F172A]"></div>
+                </div>
+                <div className="flex flex-col gap-2 mb-3 w-full">
+                  <div className="flex justify-between">
+                    <div className="flex flex-col gap-1">
+                      <h2 className="dark:text-slate-50 text-[#020817] text-xl font-bold ">
+                        {education.degree}
+                      </h2>
+                      <p className="flex gap-[4px] items-center text-sm font-medium text-slate-500 dark:text-slate-400">
+                        {education.instituteName}
+                        <Circle width={5} height={5} fill="currentColor" />
+                        {education.fieldOfStudy}
+                      </p>
+                      <div className="px-3 py-1 bg-slate-500 bg-opacity-10 text-slate-500 dark:text-slate-400 rounded-[8px] text-sm w-fit">
+                        {formatDateRange(
+                          education.startDate,
+                          education.endDate
+                        )}
+                      </div>
+                    </div>
+                    <div className="flex gap-3 items-center w-fit">
+                      <EducationDeleteDialog educationId={education.id} />
+                      <Button
+                        className="bg-transparent p-0 b-0 hover:bg-transparent"
+                        onClick={() => handleEditClick(education)}
+                      >
+                        <Pencil
+                          width={16}
+                          height={16}
+                          className="dark:text-slate-400 text-slate-500"
+                        />
+                      </Button>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+      {isOwner && (
+        <SheetWrapper
+          isOpen={isSheetOpen}
+          handleClose={handleClose}
+          title={title}
+          description={SHEETS.education.description}
+        >
+          <EducationForm
+            handleClose={handleClose}
+            selectedEducation={selectedEducation}
+          />
+        </SheetWrapper>
+      )}
     </>
   );
 };
diff --git a/src/components/profile/ProfileExperience.tsx b/src/components/profile/ProfileExperience.tsx
index a1778608..4247aa53 100644
--- a/src/components/profile/ProfileExperience.tsx
+++ b/src/components/profile/ProfileExperience.tsx
@@ -1,13 +1,29 @@
 'use client';
-import { Info } from 'lucide-react';
+import { Circle, Info, Pencil, Plus } from 'lucide-react';
 import React, { useState } from 'react';
 import { Button } from '../ui/button';
 import SheetWrapper from './sheets/SheetWrapper';
 import { SHEETS } from '@/lib/constant/profile.constant';
 import ExperienceForm from './forms/ExperienceForm';
+import { ExperienceType } from '@/types/user.types';
+import { format } from 'date-fns';
+import { ExperienceDeleteDialog } from './ExperienceDeleteDialog';
 
-const ProfileExperience = () => {
+const ProfileExperience = ({
+  isOwner,
+  experiences,
+}: {
+  isOwner: boolean;
+  experiences: ExperienceType[];
+}) => {
   const [isSheetOpen, setIsSheetOpen] = useState<boolean>(false);
+  const [selecetedExperience, setSelecetedExperience] =
+    useState<ExperienceType | null>(null);
+
+  const handleEditClick = (experience: ExperienceType) => {
+    setSelecetedExperience(experience);
+    handleOpen();
+  };
 
   const handleClose = () => {
     setIsSheetOpen(false);
@@ -15,32 +31,116 @@ const ProfileExperience = () => {
   const handleOpen = () => {
     setIsSheetOpen(true);
   };
+  function formatDateRange(startDate: Date, endDate: Date | null): string {
+    const startFormatted = format(startDate, 'MMMM yy');
+    const endFormatted = endDate ? format(endDate, 'MMMM yy') : 'Present';
+
+    return `${startFormatted} - ${endFormatted}`;
+  }
+
+  const title = selecetedExperience
+    ? SHEETS.expierence.title.replace('Add', 'Edit')
+    : SHEETS.expierence.title;
 
   return (
     <>
-      <h3 className="font-bold text-2xl">Work Experience</h3>
-      <div className="border rounded-2xl  h-80 overflow-hidden flex flex-col gap-y-4 px-6 items-center justify-center">
-        <Info width={32} height={32} />
-        <div className="text-center">
-          <h4 className="font-bold text-xl">
-            You haven’t added work experience yet
-          </h4>
-          <p className="text-sm font-medium text-gray-500">
-            Share your experience to attract the right companies.
-          </p>
-        </div>
-        <Button onClick={handleOpen} className="text-white rounded-sm">
-          Add your work experience
-        </Button>
+      <div className="flex justify-between items-center">
+        <h3 className="font-bold text-2xl">Work Experience</h3>
+        {isOwner && (
+          <Button
+            variant={'outline'}
+            className="px-3 py-2 rounded-sm text-slate-500 dark:text-slate-400 flex gap-2"
+            onClick={handleOpen}
+          >
+            <Plus height={16} width={16} /> Add Experience
+          </Button>
+        )}
       </div>
-      <SheetWrapper
-        isOpen={isSheetOpen}
-        handleClose={handleClose}
-        title={SHEETS.expierence.title}
-        description={SHEETS.expierence.description}
-      >
-        <ExperienceForm handleClose={handleClose} />
-      </SheetWrapper>
+      {experiences.length === 0 && (
+        <div className="border rounded-2xl  h-80 overflow-hidden flex flex-col gap-y-4 px-6 items-center justify-center">
+          <Info width={32} height={32} />
+          <div className="text-center">
+            <h4 className="font-bold text-xl">
+              You haven’t added work experience yet
+            </h4>
+            <p className="text-sm font-medium text-gray-500">
+              Share your experience to attract the right companies.
+            </p>
+          </div>
+          <Button onClick={handleOpen} className="text-white rounded-sm">
+            Add your work experience
+          </Button>
+        </div>
+      )}
+
+      {experiences.length !== 0 && (
+        <div className="rounded-2xl p-6 dark:bg-slate-900 bg-slate-100">
+          {experiences.map((experience) => (
+            <div key={experience.id} className="flex flex-col">
+              <div className="flex gap-3 justify-start">
+                <div className="relative w-4 flex justify-center">
+                  <div className="absolute top-0 w-2 h-2 rounded-full bg-[#3259E8]"></div>
+                  <div className="w-[2px] h-full bg-gradient-to-b from-[#3259e8] to-[#F1F5F9] dark:to-[#0F172A]"></div>
+                </div>
+                <div className="flex flex-col gap-2 mb-3 w-full">
+                  <div className="flex justify-between">
+                    <div className="flex flex-col gap-1">
+                      <h2 className="dark:text-slate-50 text-[#020817] text-xl font-bold ">
+                        {experience.designation}
+                      </h2>
+                      <p className="flex gap-[4px] items-center text-sm font-medium text-slate-500 dark:text-slate-400">
+                        <span className="text-[#3259E8] text-sm font-medium">
+                          {experience.companyName}
+                        </span>
+                        <Circle width={5} height={5} fill="currentColor" />
+                        {experience.EmploymentType}
+                        <Circle width={5} height={5} fill="currentColor" />
+                        {experience.workMode}
+                      </p>
+                      <div className="px-3 py-1 bg-slate-500 bg-opacity-10 text-slate-500 dark:text-slate-400 rounded-[8px] text-sm w-fit">
+                        {formatDateRange(
+                          experience.startDate,
+                          experience.endDate
+                        )}
+                      </div>
+                    </div>
+                    <div className="flex gap-3 items-center w-fit">
+                      <ExperienceDeleteDialog experienceId={experience.id} />
+                      <Button
+                        className="bg-transparent p-0 b-0 hover:bg-transparent"
+                        onClick={() => handleEditClick(experience)}
+                      >
+                        <Pencil
+                          width={16}
+                          height={16}
+                          className="dark:text-slate-400 text-slate-500"
+                        />
+                      </Button>
+                    </div>
+                  </div>
+                  <p className="text-[#020817] dark:text-slate-50 text-base font-medium">
+                    {experience.description}
+                  </p>
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+
+      {isOwner && (
+        <SheetWrapper
+          isOpen={isSheetOpen}
+          handleClose={handleClose}
+          title={title}
+          description={SHEETS.expierence.description}
+        >
+          <ExperienceForm
+            handleClose={handleClose}
+            selecetedExperience={selecetedExperience}
+          />
+        </SheetWrapper>
+      )}
     </>
   );
 };
diff --git a/src/components/profile/ProfileHeroSection.tsx b/src/components/profile/ProfileHeroSection.tsx
index be8dcf6e..380dc241 100644
--- a/src/components/profile/ProfileHeroSection.tsx
+++ b/src/components/profile/ProfileHeroSection.tsx
@@ -7,11 +7,15 @@ import SheetWrapper from './sheets/SheetWrapper';
 import EditProfileForm from './forms/EditProfileForm';
 import { SHEETS } from '@/lib/constant/profile.constant';
 import AccountSeetingForm from './forms/AccountSeetingForm';
+import { useSession } from 'next-auth/react';
+import { UserType } from '@/types/user.types';
 
-const ProfileHeroSection = () => {
+const ProfileHeroSection = ({ userdetails }: { userdetails: UserType }) => {
   const [isSheetOpen, setIsSheetOpen] = useState<boolean>(false);
   const [isAccountOpen, setIsAccountOpen] = useState<boolean>(false);
 
+  const { status, data } = useSession();
+
   const handleClose = () => {
     setIsSheetOpen(false);
     setIsAccountOpen(false);
@@ -27,52 +31,65 @@ const ProfileHeroSection = () => {
         <div className="w-full h-32 bg-gradient-to-r from-blue-500 to-indigo-500"></div>
         <div className="p-6 relative flex-col flex gap-y-3">
           <Avatar className="h-32 w-32 absolute -top-16">
-            <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
-            <AvatarFallback>CN</AvatarFallback>
+            {userdetails.avatar && (
+              <AvatarImage src={userdetails.avatar} alt="@shadcn" />
+            )}
+            <AvatarFallback>{userdetails.name[0]}</AvatarFallback>
           </Avatar>
-          <div className="w-full flex justify-end gap-2">
-            <Button
-              variant={'outline'}
-              className="px-3 py-2 rounded-sm"
-              onClick={handleOpen}
-            >
-              <Pencil height={16} width={16} />
-            </Button>
-            <Button
-              onClick={() => setIsAccountOpen(true)}
-              variant={'outline'}
-              className="px-3 py-2 rounded-sm"
-            >
-              <Settings height={16} width={16} />
-            </Button>
-            <Button variant={'outline'} className="px-3 py-2 rounded-sm">
-              <Share2 height={16} width={16} />
-            </Button>
+          <div className="w-full flex justify-end gap-2 h-10">
+            {status === 'authenticated' && data.user.id === userdetails.id && (
+              <>
+                <Button
+                  variant={'outline'}
+                  className="px-3 py-2 rounded-sm"
+                  onClick={handleOpen}
+                >
+                  <Pencil height={16} width={16} />
+                </Button>
+                <Button
+                  onClick={() => setIsAccountOpen(true)}
+                  variant={'outline'}
+                  className="px-3 py-2 rounded-sm"
+                >
+                  <Settings height={16} width={16} />
+                </Button>
+                <Button variant={'outline'} className="px-3 py-2 rounded-sm">
+                  <Share2 height={16} width={16} />
+                </Button>
+              </>
+            )}
           </div>
           <div>
-            <h2 className="text-4xl font-bold">Jhone Doe</h2>
+            <h2 className="text-4xl font-bold">{userdetails.name}</h2>
             <a href="#" className="text-sm text-primary font-semibold">
-              @jhonedoe
+              @{userdetails.username}
             </a>
           </div>
         </div>
       </div>
-      <SheetWrapper
-        isOpen={isSheetOpen}
-        handleClose={handleClose}
-        title={SHEETS.editProfile.title}
-        description={SHEETS.editProfile.description}
-      >
-        <EditProfileForm handleClose={handleClose} />
-      </SheetWrapper>
-      <SheetWrapper
-        isOpen={isAccountOpen}
-        handleClose={handleClose}
-        title={SHEETS.accountSetting.title}
-        description={SHEETS.accountSetting.description}
-      >
-        <AccountSeetingForm handleClose={handleClose} />
-      </SheetWrapper>
+      {status === 'authenticated' && data.user.id === userdetails.id && (
+        <>
+          <SheetWrapper
+            isOpen={isSheetOpen}
+            handleClose={handleClose}
+            title={SHEETS.editProfile.title}
+            description={SHEETS.editProfile.description}
+          >
+            <EditProfileForm
+              userdetails={userdetails}
+              handleClose={handleClose}
+            />
+          </SheetWrapper>
+          <SheetWrapper
+            isOpen={isAccountOpen}
+            handleClose={handleClose}
+            title={SHEETS.accountSetting.title}
+            description={SHEETS.accountSetting.description}
+          >
+            <AccountSeetingForm handleClose={handleClose} />
+          </SheetWrapper>
+        </>
+      )}
     </>
   );
 };
diff --git a/src/components/profile/ProfileHireme.tsx b/src/components/profile/ProfileHireme.tsx
index a2485f16..b0ef4fda 100644
--- a/src/components/profile/ProfileHireme.tsx
+++ b/src/components/profile/ProfileHireme.tsx
@@ -5,7 +5,7 @@ import { Button } from '../ui/button';
 const ProfileHireme = () => {
   return (
     <>
-      <div className="border rounded-2xl bg-gradient-to-b from-gray-800 to-gray-900  h-40 overflow-hidden flex flex-col gap-y-4 px-6 items-center justify-center">
+      <div className="border rounded-2xl bg-gradient-to-b from-white to-slate-100 dark:from-gray-800 dark:to-gray-900  h-40 overflow-hidden flex flex-col gap-y-4 px-6 items-center justify-center">
         <div className="text-center">
           <h4 className="font-bold text-xl">
             Hire Me, Let’s Make Magic Happen!
@@ -20,7 +20,7 @@ const ProfileHireme = () => {
             <Mail /> <p> Contact Me</p>
           </Button>
           <Button
-            className="text-white rounded-sm flex gap-1 bg-transparent"
+            className="dark:text-slate-400  rounded-sm flex gap-1 bg-transparent text-slate-500"
             variant={'outline'}
           >
             Contact Me
diff --git a/src/components/profile/ProfileProject.tsx b/src/components/profile/ProfileProject.tsx
new file mode 100644
index 00000000..c518efab
--- /dev/null
+++ b/src/components/profile/ProfileProject.tsx
@@ -0,0 +1,84 @@
+import { ProjectType } from '@/types/user.types';
+import Image from 'next/image';
+import React from 'react';
+import { ProjectDeleteDialog } from './projectDeleteDialog';
+import { Button } from '../ui/button';
+import { ArrowUpRight, Github, Pencil } from 'lucide-react';
+import Link from 'next/link';
+
+const ProfileProject = ({
+  project,
+  handleEditClick,
+}: {
+  project: ProjectType;
+  handleEditClick: (project: ProjectType) => void;
+}) => {
+  return (
+    <div
+      key={project.id}
+      className=" flex flex-col gap-y-6 p-6 dark:bg-slate-900 bg-slate-100 rounded-2xl"
+    >
+      <div className="relative w-full aspect-w-16 h-48 rounded-[8px] overflow-hidden">
+        <Image
+          src={project.projectThumbnail || ''}
+          alt="project-image"
+          className="object-cover"
+          fill
+          priority
+          sizes="16:9"
+        />
+      </div>
+      <div className="flex gap-y-3 flex-col">
+        <div className="flex justify-between items-center">
+          <h2 className="text-xl font-bold truncate">{project.projectName}</h2>
+          <div className="flex gap-3 items-center w-fit">
+            <ProjectDeleteDialog projectId={project.id} />
+            <Button
+              className="bg-transparent p-0 b-0 hover:bg-transparent"
+              onClick={() => handleEditClick(project)}
+            >
+              <Pencil
+                width={16}
+                height={16}
+                className="dark:text-slate-400 text-slate-500"
+              />
+            </Button>
+          </div>
+        </div>
+        <p className="text-slate-500 dark:text-slate-400 font-medium text-sm leading-tight">
+          {project.projectSummary}
+        </p>
+        <div className="bg-slate-500 bg-opacity-10 px-3 py-1 text-slate-500 dark:text-slate-400 w-fit text-sm rounded-[8px]">
+          {project.stack}
+        </div>
+      </div>
+      <div className="flex gap-2">
+        {project.projectLiveLink && (
+          <Link
+            target="_blank"
+            href={project.projectLiveLink}
+            className="w-fit flex gap-2 items-center bg-white border border-slate-200 px-3 py-2 rounded-[8px] text-slate-500 dark:text-slate-400 dark:bg-[#020817] dark:border-slate-800"
+          >
+            View Project <ArrowUpRight height={16} width={16} />
+          </Link>
+        )}
+        {project.projectGithub && (
+          <Link
+            target="_blank"
+            href={project.projectGithub}
+            className="w-fit flex gap-2 items-center border-none px-3 py-2 rounded-[8px] text-slate-500 dark:text-slate-400"
+          >
+            <Github
+              height={16}
+              width={16}
+              className="dark:fill-slate-400 fill-slate-500"
+            />{' '}
+            Github
+          </Link>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default ProfileProject;
diff --git a/src/components/profile/ProfileProjects.tsx b/src/components/profile/ProfileProjects.tsx
index b9f422bd..bcad3788 100644
--- a/src/components/profile/ProfileProjects.tsx
+++ b/src/components/profile/ProfileProjects.tsx
@@ -1,13 +1,25 @@
 'use client';
-import { Info } from 'lucide-react';
-import React, { useState } from 'react';
+import { ChevronDown, ChevronUp, Info, Plus } from 'lucide-react';
+import React, { useMemo, useState } from 'react';
 import { Button } from '@/components/ui/button';
 import SheetWrapper from './sheets/SheetWrapper';
 import { SHEETS } from '@/lib/constant/profile.constant';
 import ProjectForm from './forms/ProjectForm';
+import { ProjectType } from '@/types/user.types';
+import ProfileProject from './ProfileProject';
 
-const ProfileProjects = () => {
+const ProfileProjects = ({
+  isOwner,
+  projects,
+}: {
+  isOwner: boolean;
+  projects: ProjectType[];
+}) => {
   const [isSheetOpen, setIsSheetOpen] = useState<boolean>(false);
+  const [selectedProject, setSelectedProject] = useState<ProjectType | null>(
+    null
+  );
+  const [isSeeMore, setIsSeeMore] = useState<boolean>(false);
 
   const handleClose = () => {
     setIsSheetOpen(false);
@@ -16,31 +28,109 @@ const ProfileProjects = () => {
     setIsSheetOpen(true);
   };
 
+  const handleEditClick = (project: ProjectType) => {
+    setSelectedProject(project);
+    handleOpen();
+  };
+
+  const handleSeeMore = () => {
+    setIsSeeMore(!isSeeMore);
+  };
+
+  const featuredProjects = useMemo(() => {
+    return projects.filter((project) => project.isFeature === true);
+  }, [projects]);
+
+  const nonFeaturedProjects = useMemo(() => {
+    return projects.filter((project) => project.isFeature === false);
+  }, [projects]);
+
+  const title = selectedProject
+    ? SHEETS.project.title.replace('Add New', 'Edit')
+    : SHEETS.project.title;
+
   return (
     <>
-      <h3 className="font-bold text-2xl">Projects</h3>
-      <div className="border rounded-2xl  h-80 overflow-hidden flex flex-col gap-y-4 px-6 items-center justify-center">
-        <Info width={32} height={32} />
-        <div className="text-center">
-          <h4 className="font-bold text-xl">
-            You haven’t added any projects yet
-          </h4>
-          <p className="text-sm font-medium text-gray-500">
-            Showcase your projects to demonstrate your skills and expertise.
-          </p>
-        </div>
-        <Button className="text-white rounded-sm" onClick={handleOpen}>
-          Add your projects
-        </Button>
+      <div className="flex justify-between items-center">
+        <h3 className="font-bold text-2xl">Projects</h3>
+        {isOwner && (
+          <Button
+            variant={'outline'}
+            className="px-3 py-2 rounded-sm text-slate-500 dark:text-slate-400 flex gap-2"
+            onClick={handleOpen}
+          >
+            <Plus height={16} width={16} /> Add Project
+          </Button>
+        )}
       </div>
-      <SheetWrapper
-        isOpen={isSheetOpen}
-        handleClose={handleClose}
-        title={SHEETS.project.title}
-        description={SHEETS.project.description}
-      >
-        <ProjectForm handleClose={handleClose} />
-      </SheetWrapper>
+      {featuredProjects.length === 0 && (
+        <div className="border rounded-2xl  h-80 overflow-hidden flex flex-col gap-y-4 px-6 items-center justify-center">
+          <Info width={32} height={32} />
+          <div className="text-center">
+            <h4 className="font-bold text-xl">
+              You haven’t added any projects yet
+            </h4>
+            <p className="text-sm font-medium text-gray-500">
+              Showcase your projects to demonstrate your skills and expertise.
+            </p>
+          </div>
+          <Button className="text-white rounded-sm" onClick={handleOpen}>
+            Add your projects
+          </Button>
+        </div>
+      )}
+      {featuredProjects.length !== 0 && !isSeeMore && (
+        <>
+          <div className=" grid grid-cols-3 gap-x-6 gap-y-6 ">
+            {featuredProjects.map((project) => (
+              <ProfileProject
+                key={project.id}
+                project={project}
+                handleEditClick={handleEditClick}
+              />
+            ))}
+          </div>
+          <Button
+            onClick={handleSeeMore}
+            className="dark:border-slate-800 px-3 bg-transparent hover:bg-transparent w-fit border py-2 text-base font-medium flex gap-2 rounded-[8px] border-slate-200 text-slate-500 dark:text-slate-400"
+          >
+            See more <ChevronDown height={16} width={16} />
+          </Button>
+        </>
+      )}
+      {projects.length !== 0 && isSeeMore && (
+        <>
+          <div className=" grid grid-cols-3 gap-x-6 gap-y-6 ">
+            {[...featuredProjects, ...nonFeaturedProjects].map((project) => (
+              <ProfileProject
+                key={project.id}
+                project={project}
+                handleEditClick={handleEditClick}
+              />
+            ))}
+          </div>
+          <Button
+            onClick={handleSeeMore}
+            className="dark:border-slate-800 px-3 bg-transparent hover:bg-transparent w-fit border py-2 text-base font-medium flex gap-2 rounded-[8px] border-slate-200 text-slate-500 dark:text-slate-400"
+          >
+            Hide <ChevronUp height={16} width={16} />
+          </Button>
+        </>
+      )}
+
+      {isOwner && (
+        <SheetWrapper
+          isOpen={isSheetOpen}
+          handleClose={handleClose}
+          title={title}
+          description={SHEETS.project.description}
+        >
+          <ProjectForm
+            handleClose={handleClose}
+            selectedProject={selectedProject}
+          />
+        </SheetWrapper>
+      )}
     </>
   );
 };
diff --git a/src/components/profile/ProfileResume.tsx b/src/components/profile/ProfileResume.tsx
index d21db0dd..3684ff9b 100644
--- a/src/components/profile/ProfileResume.tsx
+++ b/src/components/profile/ProfileResume.tsx
@@ -1,12 +1,24 @@
 'use client';
-import { FileText } from 'lucide-react';
+import { FileText, Pencil } from 'lucide-react';
 import React, { useState } from 'react';
 import { Button } from '@/components/ui/button';
 import SheetWrapper from './sheets/SheetWrapper';
 import { SHEETS } from '@/lib/constant/profile.constant';
 import UploadResumeForm from './forms/UploadResumeForm';
+import { format } from 'date-fns';
+import { ResumeDeleteDialog } from './resumeDeleteDialog';
 
-const ProfileResume = () => {
+const ProfileResume = ({
+  isOwner,
+  resume,
+  name,
+  resumeUpdateDate,
+}: {
+  isOwner: boolean;
+  resume: string;
+  name: string;
+  resumeUpdateDate: Date;
+}) => {
   const [isSheetOpen, setIsSheetOpen] = useState<boolean>(false);
 
   const handleClose = () => {
@@ -18,30 +30,65 @@ const ProfileResume = () => {
 
   return (
     <>
-      <h3 className="font-bold text-2xl">Resume</h3>
-      <div className="border rounded-2xl  h-80 overflow-hidden flex flex-col gap-y-4 px-6 items-center justify-center">
-        <FileText width={32} height={32} />
-        <div className="text-center">
-          <h4 className="font-bold text-xl">
-            You haven’t uploaded a resume yet
-          </h4>
-          <p className="text-sm font-medium text-gray-500">
-            Upload your resume to showcase your skills and experiences to
-            recruiters.
-          </p>
-        </div>
-        <Button className="text-white rounded-sm" onClick={handleOpen}>
-          Upload your resume
-        </Button>
+      <div className="flex justify-between items-center">
+        <h3 className="font-bold text-2xl">Resume</h3>
+        {isOwner && (
+          <Button
+            variant={'outline'}
+            className="px-3 py-2 rounded-sm text-slate-500 dark:text-slate-400 flex gap-2"
+            onClick={handleOpen}
+          >
+            <Pencil height={16} width={16} /> Edit
+          </Button>
+        )}
       </div>
-      <SheetWrapper
-        isOpen={isSheetOpen}
-        handleClose={handleClose}
-        title={SHEETS.resume.title}
-        description={SHEETS.resume.description}
-      >
-        <UploadResumeForm handleClose={handleClose} />
-      </SheetWrapper>
+
+      {resume.length === 0 && (
+        <div className="border rounded-2xl  h-80 overflow-hidden flex flex-col gap-y-4 px-6 items-center justify-center">
+          <FileText width={32} height={32} />
+          <div className="text-center">
+            <h4 className="font-bold text-xl">
+              You haven’t uploaded a resume yet
+            </h4>
+            <p className="text-sm font-medium text-gray-500">
+              Upload your resume to showcase your skills and experiences to
+              recruiters.
+            </p>
+          </div>
+          <Button className="text-white rounded-sm" onClick={handleOpen}>
+            Upload your resume
+          </Button>
+        </div>
+      )}
+      {resume && (
+        <div className="rounded-2xl gap-y-4 p-6 dark:bg-slate-900 bg-slate-100 flex justify-between items-center">
+          <div className="flex gap-x-4">
+            <div className="border-slate-200 w-fit border dark:border-slate-800 p-2 rounded-[12px]">
+              <FileText width={32} height={32} className="text-slate-500" />
+            </div>
+            <div>
+              <h2 className="text-xl font-bold">
+                {' '}
+                {name.replace(' ', '_') + '_resume'}{' '}
+              </h2>
+              <p className="font-medium text-slate-500">
+                {format(resumeUpdateDate, 'dd MMM yyyy')}
+              </p>
+            </div>
+          </div>
+          {isOwner && <ResumeDeleteDialog />}
+        </div>
+      )}
+      {isOwner && (
+        <SheetWrapper
+          isOpen={isSheetOpen}
+          handleClose={handleClose}
+          title={SHEETS.resume.title}
+          description={SHEETS.resume.description}
+        >
+          <UploadResumeForm handleClose={handleClose} />
+        </SheetWrapper>
+      )}
     </>
   );
 };
diff --git a/src/components/profile/ProfileSkills.tsx b/src/components/profile/ProfileSkills.tsx
index 21b3a9b5..53ed76fc 100644
--- a/src/components/profile/ProfileSkills.tsx
+++ b/src/components/profile/ProfileSkills.tsx
@@ -1,12 +1,18 @@
 'use client';
-import { Info } from 'lucide-react';
+import { Info, Pencil } from 'lucide-react';
 import React, { useState } from 'react';
 import { Button } from '../ui/button';
 import SheetWrapper from './sheets/SheetWrapper';
 import { SHEETS } from '@/lib/constant/profile.constant';
 import { SkillsForm } from './forms/SkillsForm';
 
-const ProfileSkills = () => {
+const ProfileSkills = ({
+  isOwner,
+  skills,
+}: {
+  isOwner: boolean;
+  skills: string[];
+}) => {
   const [isSheetOpen, setIsSheetOpen] = useState<boolean>(false);
 
   const handleClose = () => {
@@ -17,29 +23,58 @@ const ProfileSkills = () => {
   };
   return (
     <>
-      <h3 className="font-bold text-2xl">Skills</h3>
-      <div className="border rounded-2xl  h-80 overflow-hidden flex flex-col gap-y-4 px-6 items-center justify-center">
-        <Info width={32} height={32} />
-        <div className="text-center">
-          <h4 className="font-bold text-xl">
-            You haven’t added any skills yet
-          </h4>
-          <p className="text-sm font-medium text-gray-500">
-            Highlight your skills to stand out to potential employers.
-          </p>
-        </div>
-        <Button onClick={handleOpen} className="text-white rounded-sm">
-          Add your skills
-        </Button>
+      <div className="flex justify-between items-center">
+        <h3 className="font-bold text-2xl">Skills</h3>
+        {isOwner && (
+          <Button
+            variant={'outline'}
+            className="px-3 py-2 rounded-sm text-slate-500 dark:text-slate-400 flex gap-2"
+            onClick={handleOpen}
+          >
+            <Pencil height={16} width={16} /> Update
+          </Button>
+        )}
       </div>
-      <SheetWrapper
-        isOpen={isSheetOpen}
-        handleClose={handleClose}
-        title={SHEETS.skills.title}
-        description={SHEETS.skills.description}
-      >
-        <SkillsForm handleClose={handleClose} />
-      </SheetWrapper>
+      {skills.length === 0 && (
+        <div className="border rounded-2xl  h-80 overflow-hidden flex flex-col gap-y-4 px-6 items-center justify-center">
+          <Info width={32} height={32} />
+          <div className="text-center">
+            <h4 className="font-bold text-xl">
+              You haven’t added any skills yet
+            </h4>
+            <p className="text-sm font-medium text-gray-500">
+              Highlight your skills to stand out to potential employers.
+            </p>
+          </div>
+          <Button onClick={handleOpen} className="text-white rounded-sm">
+            Add your skills
+          </Button>
+        </div>
+      )}
+      {skills.length !== 0 && (
+        <div className="rounded-2xl gap-x-2 p-6 dark:bg-slate-900 bg-slate-100 flex flex-wrap">
+          {skills.map((title) => {
+            return (
+              <div
+                key={title}
+                className="dark:border-slate-800 border px-3 py-2 rounded-[8px] dark:text-slate-50 border-slate-200"
+              >
+                {title}
+              </div>
+            );
+          })}
+        </div>
+      )}
+      {isOwner && (
+        <SheetWrapper
+          isOpen={isSheetOpen}
+          handleClose={handleClose}
+          title={SHEETS.skills.title}
+          description={SHEETS.skills.description}
+        >
+          <SkillsForm handleClose={handleClose} skills={skills} />
+        </SheetWrapper>
+      )}
     </>
   );
 };
diff --git a/src/components/profile/forms/EditProfileForm.tsx b/src/components/profile/forms/EditProfileForm.tsx
index 83ab8580..7869edae 100644
--- a/src/components/profile/forms/EditProfileForm.tsx
+++ b/src/components/profile/forms/EditProfileForm.tsx
@@ -21,22 +21,32 @@ import { X } from 'lucide-react';
 import { Input } from '@/components/ui/input';
 import { Textarea } from '@/components/ui/textarea';
 import { Button } from '@/components/ui/button';
+import { UserType } from '@/types/user.types';
+import { updateUserDetails } from '@/actions/user.profile.actions';
 
-const EditProfileForm = ({ handleClose }: { handleClose: () => void }) => {
+const EditProfileForm = ({
+  handleClose,
+  userdetails,
+}: {
+  handleClose: () => void;
+  userdetails: UserType;
+}) => {
   const { toast } = useToast();
 
   const [file, setFile] = useState<File | null>(null);
-  const [previewImg, setPreviewImg] = useState<string | null>(null);
+  const [previewImg, setPreviewImg] = useState<string | null>(
+    userdetails.avatar || null
+  );
 
   const form = useForm<ProfileSchemaType>({
     resolver: zodResolver(profileSchema),
     defaultValues: {
-      aboutMe: '',
-      username: '',
-      email: '',
-      contactEmail: '',
-      profileImage: '',
-      name: '',
+      aboutMe: userdetails.aboutMe || '',
+      username: userdetails.username || '',
+      email: userdetails.email || '',
+      contactEmail: userdetails.contactEmail || '',
+      avatar: userdetails.avatar || '/main.svg',
+      name: userdetails.name || '',
     },
   });
 
@@ -63,7 +73,27 @@ const EditProfileForm = ({ handleClose }: { handleClose: () => void }) => {
   };
 
   const onSubmit = async (data: ProfileSchemaType) => {
-    data.profileImage = (await submitImage(file)) ?? '/main.svg';
+    try {
+      data.avatar = (await submitImage(file)) ?? '/main.svg';
+      const response = await updateUserDetails(data);
+
+      if (!response.status) {
+        return toast({
+          title: response.message || 'Error',
+          variant: 'destructive',
+        });
+      }
+      toast({
+        title: response.message,
+        variant: 'success',
+      });
+      handleFormClose();
+    } catch (_error) {
+      toast({
+        variant: 'destructive',
+        title: 'Something went wrong while updating.',
+      });
+    }
   };
 
   const handleFormClose = () => {
@@ -74,6 +104,7 @@ const EditProfileForm = ({ handleClose }: { handleClose: () => void }) => {
   const profileImageRef = useRef<HTMLImageElement>(null);
 
   const handleClick = () => {
+    if (previewImg) return;
     const fileInput = document.getElementById('fileInput') as HTMLInputElement;
 
     if (fileInput) {
@@ -126,7 +157,7 @@ const EditProfileForm = ({ handleClose }: { handleClose: () => void }) => {
           <FormLabel> Profile Picture </FormLabel>
           <div className="flex justify-center">
             <div
-              className="w-40 h-40 dark:bg-gray-700 bg-gray-300 border border-dashed border-gray-500 rounded-md flex items-center justify-center cursor-pointer mb-2"
+              className="w-40 h-40 relative dark:bg-gray-700 bg-gray-300 border border-dashed border-gray-500 rounded-md flex items-center justify-center cursor-pointer mb-2"
               onClick={handleClick}
             >
               {previewImg ? (
@@ -145,16 +176,16 @@ const EditProfileForm = ({ handleClose }: { handleClose: () => void }) => {
                   className="text-white h-10 w-10"
                 />
               )}
+              {previewImg && (
+                <button
+                  type="button"
+                  onClick={clearLogoImage}
+                  className="absolute top-0 right-0 w-5 h-5 bg-red-500 rounded-full items-center flex justify-center cursor-pointer translate-x-1/2 -translate-y-1/2"
+                >
+                  <X size="16" />
+                </button>
+              )}
             </div>
-            {previewImg && (
-              <button
-                type="button"
-                onClick={clearLogoImage}
-                className="absolute top-0 right-0 w-5 h-5 bg-red-500 rounded-full items-center flex justify-center cursor-pointer translate-x-1/2 -translate-y-1/2"
-              >
-                <X size="16" />
-              </button>
-            )}
 
             <input
               id="fileInput"
@@ -258,8 +289,12 @@ const EditProfileForm = ({ handleClose }: { handleClose: () => void }) => {
           >
             Cancel
           </Button>
-          <Button type="submit" className="mt-0 text-white rounded-[8px]">
-            Update Profile
+          <Button
+            disabled={form.formState.isSubmitting}
+            type="submit"
+            className="mt-0 text-white rounded-[8px]"
+          >
+            {form.formState.isSubmitting ? 'Please wait...' : 'Update Profile'}
           </Button>
         </div>
       </form>
diff --git a/src/components/profile/forms/EducationForm.tsx b/src/components/profile/forms/EducationForm.tsx
index db57e011..3b419907 100644
--- a/src/components/profile/forms/EducationForm.tsx
+++ b/src/components/profile/forms/EducationForm.tsx
@@ -1,8 +1,6 @@
 import React from 'react';
 import { useForm } from 'react-hook-form';
 import {
-  DegreeEnum,
-  FieldOfStudyEnum,
   profileEducationSchema,
   profileEducationType,
 } from '@/lib/validators/user.profile.validator';
@@ -25,16 +23,29 @@ import {
 } from '@/components/ui/select';
 import _ from 'lodash';
 import { Button } from '@/components/ui/button';
+import { EducationType } from '@/types/user.types';
+import {
+  addUserEducation,
+  editEducation,
+} from '@/actions/user.profile.actions';
+import { useToast } from '@/components/ui/use-toast';
+import { DegreeType, FieldOfStudyType } from '@prisma/client';
 
-const EducationForm = ({ handleClose }: { handleClose: () => void }) => {
+const EducationForm = ({
+  handleClose,
+  selectedEducation,
+}: {
+  handleClose: () => void;
+  selectedEducation: EducationType | null;
+}) => {
   const form = useForm<profileEducationType>({
     resolver: zodResolver(profileEducationSchema),
     defaultValues: {
-      instituteName: '',
-      degree: DegreeEnum.BTech,
-      fieldOfStudy: FieldOfStudyEnum.CS,
-      startDate: undefined,
-      endDate: undefined,
+      instituteName: selectedEducation?.instituteName || '',
+      degree: selectedEducation?.degree || 'BTech',
+      fieldOfStudy: selectedEducation?.fieldOfStudy || 'CS',
+      startDate: selectedEducation?.startDate || undefined,
+      endDate: selectedEducation?.endDate || undefined,
     },
   });
 
@@ -44,7 +55,40 @@ const EducationForm = ({ handleClose }: { handleClose: () => void }) => {
     handleClose();
   };
 
-  const onSubmit = () => {};
+  const { toast } = useToast();
+
+  const onSubmit = async (data: profileEducationType) => {
+    try {
+      let response;
+      if (selectedEducation?.id) {
+        response = await editEducation({
+          data: data,
+          id: selectedEducation?.id,
+        });
+      } else {
+        response = await addUserEducation(data);
+      }
+
+      if (!response.status) {
+        return toast({
+          title: response.message || 'Error',
+          variant: 'destructive',
+        });
+      }
+      toast({
+        title: response.message,
+        variant: 'success',
+      });
+
+      handleFormClose();
+    } catch (_error) {
+      toast({
+        title: 'Something went wrong while Adding Skills',
+        description: 'Internal server error',
+        variant: 'destructive',
+      });
+    }
+  };
 
   return (
     <div className="flex-1 relative">
@@ -82,7 +126,7 @@ const EducationForm = ({ handleClose }: { handleClose: () => void }) => {
                       </SelectTrigger>
                     </FormControl>
                     <SelectContent>
-                      {Object.values(DegreeEnum).map((type) => (
+                      {Object.values(DegreeType).map((type) => (
                         <SelectItem key={type} value={type}>
                           {_.startCase(type)}
                         </SelectItem>
@@ -109,7 +153,7 @@ const EducationForm = ({ handleClose }: { handleClose: () => void }) => {
                       </SelectTrigger>
                     </FormControl>
                     <SelectContent>
-                      {Object.values(FieldOfStudyEnum).map((type) => (
+                      {Object.values(FieldOfStudyType).map((type) => (
                         <SelectItem key={type} value={type}>
                           {_.startCase(type)}
                         </SelectItem>
@@ -173,15 +217,21 @@ const EducationForm = ({ handleClose }: { handleClose: () => void }) => {
           </div>
           <div className="py-4 flex gap-4 justify-end">
             <Button
-              type="reset"
               onClick={handleFormClose}
               variant={'outline'}
-              className="mt-0 text-white rounded-[8px]"
+              className="mt-0 text-slate-500 dark:text-white rounded-[8px]"
+              type="reset"
             >
               Cancel
             </Button>
-            <Button type="submit" className="mt-0 text-white rounded-[8px]">
-              Add Education
+            <Button
+              disabled={form.formState.isSubmitting}
+              type="submit"
+              className="mt-0 text-white rounded-[8px]"
+            >
+              {form.formState.isSubmitting
+                ? 'Please wait ...'
+                : `${selectedEducation?.id ? 'Update Education' : 'Add Education'}`}
             </Button>
           </div>
         </form>
diff --git a/src/components/profile/forms/ExperienceForm.tsx b/src/components/profile/forms/ExperienceForm.tsx
index 1299183b..29873822 100644
--- a/src/components/profile/forms/ExperienceForm.tsx
+++ b/src/components/profile/forms/ExperienceForm.tsx
@@ -27,23 +27,68 @@ import _ from 'lodash';
 import { EmployementType, WorkMode } from '@prisma/client';
 import { Switch } from '@/components/ui/switch';
 import { Button } from '@/components/ui/button';
-const ExperienceForm = ({ handleClose }: { handleClose: () => void }) => {
+import {
+  addUserExperience,
+  editExperience,
+} from '@/actions/user.profile.actions';
+import { useToast } from '@/components/ui/use-toast';
+import { ExperienceType } from '@/types/user.types';
+const ExperienceForm = ({
+  handleClose,
+  selecetedExperience,
+}: {
+  handleClose: () => void;
+  selecetedExperience: ExperienceType | null;
+}) => {
   const form = useForm<expFormSchemaType>({
     resolver: zodResolver(expFormSchema),
     defaultValues: {
-      companyName: '',
-      designation: '',
-      EmploymentType: 'Full_time',
-      address: '',
-      workMode: 'office',
-      currentWorkStatus: false,
-      startDate: undefined,
-      endDate: undefined,
-      description: '',
+      companyName: selecetedExperience?.companyName || '',
+      designation: selecetedExperience?.designation || '',
+      EmploymentType: selecetedExperience?.EmploymentType || 'Full_time',
+      address: selecetedExperience?.address || '',
+      workMode: selecetedExperience?.workMode || 'office',
+      currentWorkStatus: selecetedExperience?.currentWorkStatus || false,
+      startDate: selecetedExperience?.startDate || undefined,
+      endDate: selecetedExperience?.endDate || undefined,
+      description: selecetedExperience?.description || '',
     },
   });
   const WatchCurrentWorkStatus = form.watch('currentWorkStatus');
-  const onSubmit = () => {};
+  const { toast } = useToast();
+
+  const onSubmit = async (data: expFormSchemaType) => {
+    try {
+      let response;
+      if (selecetedExperience?.id) {
+        response = await editExperience({
+          data: data,
+          id: selecetedExperience?.id,
+        });
+      } else {
+        response = await addUserExperience(data);
+      }
+
+      if (!response.status) {
+        return toast({
+          title: response.message || 'Error',
+          variant: 'destructive',
+        });
+      }
+      toast({
+        title: response.message,
+        variant: 'success',
+      });
+
+      handleFormClose();
+    } catch (_error) {
+      toast({
+        title: 'Something went wrong while Adding Skills',
+        description: 'Internal server error',
+        variant: 'destructive',
+      });
+    }
+  };
 
   const handleFormClose = () => {
     form.reset();
@@ -248,15 +293,21 @@ const ExperienceForm = ({ handleClose }: { handleClose: () => void }) => {
           </div>
           <div className="py-4 flex gap-4 justify-end">
             <Button
-              type="reset"
               onClick={handleFormClose}
               variant={'outline'}
-              className="mt-0 text-white rounded-[8px]"
+              className="mt-0 text-slate-500 dark:text-white rounded-[8px]"
+              type="reset"
             >
               Cancel
             </Button>
-            <Button type="submit" className="mt-0 text-white rounded-[8px]">
-              Add Project
+            <Button
+              disabled={form.formState.isSubmitting}
+              type="submit"
+              className="mt-0 text-white rounded-[8px]"
+            >
+              {form.formState.isSubmitting
+                ? 'Please wait ...'
+                : `${selecetedExperience?.id ? 'Update Experience' : 'Add Experience'}`}
             </Button>
           </div>
         </form>
diff --git a/src/components/profile/forms/ProjectForm.tsx b/src/components/profile/forms/ProjectForm.tsx
index 369e5f65..c14c757f 100644
--- a/src/components/profile/forms/ProjectForm.tsx
+++ b/src/components/profile/forms/ProjectForm.tsx
@@ -20,10 +20,29 @@ import { CirclePlus, X } from 'lucide-react';
 import { Input } from '@/components/ui/input';
 import { Textarea } from '@/components/ui/textarea';
 import { Button } from '@/components/ui/button';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import { Switch } from '@/components/ui/switch';
+import { addUserProjects, editProject } from '@/actions/user.profile.actions';
+import { submitImage } from '@/lib/utils';
+import { ProjectType } from '@/types/user.types';
 
-const ProjectForm = ({ handleClose }: { handleClose: () => void }) => {
+const ProjectForm = ({
+  handleClose,
+  selectedProject,
+}: {
+  handleClose: () => void;
+  selectedProject: ProjectType | null;
+}) => {
   const [file, setFiles] = useState<File | null>(null);
-  const [previewImg, setPreviewImg] = useState<null | string>(null);
+  const [previewImg, setPreviewImg] = useState<null | string>(
+    selectedProject?.projectThumbnail || null
+  );
 
   const { toast } = useToast();
 
@@ -50,25 +69,56 @@ const ProjectForm = ({ handleClose }: { handleClose: () => void }) => {
   const form = useForm<ProfileProjectType>({
     resolver: zodResolver(profileProjectSchema),
     defaultValues: {
-      projectThumbnail: '',
-      projectDescription: '',
-      projectFeatured: false,
-      projectGithub: '',
-      projectLiveLink: '',
-      projectName: '',
+      projectThumbnail: selectedProject?.projectThumbnail || './main.svg',
+      projectSummary: selectedProject?.projectSummary || '',
+      isFeature: selectedProject?.isFeature || false,
+      projectGithub: selectedProject?.projectGithub || '',
+      projectLiveLink: selectedProject?.projectLiveLink || '',
+      projectName: selectedProject?.projectName || '',
     },
   });
 
   // function onSubmit(values: ProfileProjectType) {
   //   console.log(values)
   // }
-  function onSubmit() {}
+  async function onSubmit(data: ProfileProjectType) {
+    try {
+      if (file) {
+        data.projectThumbnail = await submitImage(file);
+      }
+      let response;
+      if (selectedProject?.id) {
+        response = await editProject({ data: data, id: selectedProject?.id });
+      } else {
+        response = await addUserProjects(data);
+      }
+
+      if (!response.status) {
+        return toast({
+          title: response.message || 'Error',
+          variant: 'destructive',
+        });
+      }
+      toast({
+        title: response.message,
+        variant: 'success',
+      });
+
+      handleFormClose();
+    } catch (_error) {
+      toast({
+        title: 'Something went wrong while Adding Skills',
+        description: 'Internal server error',
+        variant: 'destructive',
+      });
+    }
+  }
 
   const handleFormClose = () => {
     form.reset();
     form.clearErrors();
     handleClose();
-    setFiles(null);
+    handleImageReset();
   };
   const handleImageReset = () => {
     setFiles(null);
@@ -87,9 +137,9 @@ const ProjectForm = ({ handleClose }: { handleClose: () => void }) => {
               <FormLabel>Upload project thumbnail</FormLabel>
               <div
                 {...getRootProps()}
-                className={`w-full overflow-hidden h-44 flex justify-center items-center flex-col bg-slate-900 rounded-[8px] border border-transparent text-center mt-2 relative ${isDragActive && 'animate-pulse border-white'}`}
+                className={`w-full overflow-hidden h-44 flex justify-center items-center flex-col bg-slate-100 dark:bg-slate-900 rounded-[8px] border border-transparent text-center mt-2 relative ${isDragActive && 'animate-pulse border-white'}`}
               >
-                {file && previewImg && (
+                {previewImg && (
                   <div
                     onClick={handleImageReset}
                     className="absolute top-1 right-1 bg-red-500 text-white rounded-full h-5 w-5 flex items-center justify-center cursor-pointer"
@@ -97,7 +147,7 @@ const ProjectForm = ({ handleClose }: { handleClose: () => void }) => {
                     <X height={16} width={16} />
                   </div>
                 )}
-                {!file && (
+                {!file && !previewImg && (
                   <>
                     <input {...getInputProps({ accept: 'images' })} />
                     <CirclePlus height={24} width={24} />
@@ -111,7 +161,7 @@ const ProjectForm = ({ handleClose }: { handleClose: () => void }) => {
                     </p>
                   </>
                 )}
-                {file && previewImg && (
+                {previewImg && (
                   <Image
                     src={previewImg}
                     alt="project-image"
@@ -160,7 +210,47 @@ const ProjectForm = ({ handleClose }: { handleClose: () => void }) => {
             />
             <FormField
               control={form.control}
-              name="projectDescription"
+              name="stack"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Project Stack</FormLabel>
+                  <FormControl>
+                    <Select
+                      {...field}
+                      onValueChange={(value) =>
+                        form.setValue(
+                          'stack',
+                          value as
+                            | 'GO'
+                            | 'PYTHON'
+                            | 'MERN'
+                            | 'NEXTJS'
+                            | 'AI_GPT_APIS'
+                            | 'SPRINGBOOT'
+                            | 'OTHERS'
+                        )
+                      }
+                    >
+                      <SelectTrigger className="w-full">
+                        <SelectValue placeholder="Others" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="GO">Go</SelectItem>
+                        <SelectItem value="PYTHON">Python</SelectItem>
+                        <SelectItem value="MERN">MERN</SelectItem>
+                        <SelectItem value="NEXTJS">NextJS</SelectItem>
+                        <SelectItem value="AI_GPT_APIS">AI/GPT APIs</SelectItem>
+                        <SelectItem value="SPRINGBOOT">Springboot</SelectItem>
+                        <SelectItem value="OTHERS">Others</SelectItem>
+                      </SelectContent>
+                    </Select>
+                  </FormControl>
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={form.control}
+              name="projectSummary"
               render={({ field }) => (
                 <FormItem>
                   <FormLabel> Project Description </FormLabel>
@@ -173,18 +263,44 @@ const ProjectForm = ({ handleClose }: { handleClose: () => void }) => {
                 </FormItem>
               )}
             />
+            <FormField
+              control={form.control}
+              name="isFeature"
+              render={({ field }) => (
+                <FormItem className="flex flex-row items-start space-x-3 space-y-0">
+                  <FormControl>
+                    <Switch
+                      checked={field.value}
+                      onCheckedChange={field.onChange}
+                      className="data-[state=checked]:bg-gray-300 data-[state=unchecked]:bg-gray-400"
+                    />
+                  </FormControl>
+                  <div className="space-y-1 leading-none">
+                    <FormLabel> Feature this project. </FormLabel>
+                  </div>
+                </FormItem>
+              )}
+            />
           </div>
           <div className="py-4 flex gap-4 justify-end">
             <Button
-              type="reset"
               onClick={handleFormClose}
               variant={'outline'}
-              className="mt-0 text-white rounded-[8px]"
+              className="mt-0 text-slate-500 dark:text-white rounded-[8px]"
+              type="reset"
             >
               Cancel
             </Button>
-            <Button type="submit" className="mt-0 text-white rounded-[8px]">
-              Add Project
+            <Button
+              disabled={form.formState.isSubmitting}
+              type="submit"
+              className="mt-0 text-white rounded-[8px]"
+            >
+              {form.formState.isSubmitting
+                ? 'Please wait ...'
+                : selectedProject?.id
+                  ? 'Update Project'
+                  : 'Add Project'}
             </Button>
           </div>
         </form>
diff --git a/src/components/profile/forms/ReadMeForm.tsx b/src/components/profile/forms/ReadMeForm.tsx
index e552a995..0ec3732e 100644
--- a/src/components/profile/forms/ReadMeForm.tsx
+++ b/src/components/profile/forms/ReadMeForm.tsx
@@ -14,16 +14,47 @@ import {
   aboutMeSchema,
   AboutMeSchemaType,
 } from '@/lib/validators/user.profile.validator';
+import { updateAboutMe } from '@/actions/user.profile.actions';
+import { useToast } from '@/components/ui/use-toast';
+
+const ReadMeForm = ({
+  handleClose,
+  aboutMe,
+}: {
+  handleClose: () => void;
+  aboutMe: string;
+}) => {
+  const { toast } = useToast();
 
-const ReadMeForm = ({ handleClose }: { handleClose: () => void }) => {
   const form = useForm<AboutMeSchemaType>({
     resolver: zodResolver(aboutMeSchema),
     defaultValues: {
-      aboutMe: '',
+      aboutMe: aboutMe || '',
     },
   });
 
-  function onSubmit() {}
+  async function onSubmit(data: AboutMeSchemaType) {
+    try {
+      const response = await updateAboutMe(data);
+
+      if (!response.status) {
+        return toast({
+          title: response.message || 'Error',
+          variant: 'destructive',
+        });
+      }
+      toast({
+        title: response.message,
+        variant: 'success',
+      });
+      handleFormClose();
+    } catch (_error) {
+      toast({
+        variant: 'destructive',
+        title: 'Something went wrong while updating.',
+      });
+    }
+  }
 
   const handleFormClose = () => {
     form.reset();
@@ -58,13 +89,16 @@ const ReadMeForm = ({ handleClose }: { handleClose: () => void }) => {
               onClick={handleFormClose}
               variant={'outline'}
               className="mt-0 text-white rounded-[8px]"
+              type="reset"
             >
-              {' '}
-              Cancel{' '}
+              Cancel
             </Button>
-            <Button type="submit" className="mt-0 text-white rounded-[8px]">
-              {' '}
-              Add About Me{' '}
+            <Button
+              disabled={form.formState.isSubmitting}
+              type="submit"
+              className="mt-0 text-white rounded-[8px]"
+            >
+              {form.formState.isSubmitting ? 'Please Wait...' : 'Add About Me'}
             </Button>
           </div>
         </form>
diff --git a/src/components/profile/forms/SkillsForm.tsx b/src/components/profile/forms/SkillsForm.tsx
index 04aee24f..2fd1afa2 100644
--- a/src/components/profile/forms/SkillsForm.tsx
+++ b/src/components/profile/forms/SkillsForm.tsx
@@ -12,16 +12,21 @@ import { SkillsCombobox } from '@/components/skills-combobox';
 import { LoadingSpinner } from '@/components/loading-spinner';
 import { Button } from '@/components/ui/button';
 
-export const SkillsForm = ({ handleClose }: { handleClose: () => void }) => {
-  const [comboBoxSelectedValues, setComboBoxSelectedValues] = useState<
-    string[]
-  >([]);
+export const SkillsForm = ({
+  handleClose,
+  skills,
+}: {
+  handleClose: () => void;
+  skills: string[];
+}) => {
+  const [comboBoxSelectedValues, setComboBoxSelectedValues] =
+    useState<string[]>(skills);
   const [isLoading, setIsLoading] = useState<boolean>(false);
 
   const form = useForm<addSkillsSchemaType>({
     resolver: zodResolver(addSkillsSchema),
     defaultValues: {
-      skills: [],
+      skills: skills,
     },
   });
   const { toast } = useToast();
@@ -40,8 +45,7 @@ export const SkillsForm = ({ handleClose }: { handleClose: () => void }) => {
         variant: 'success',
       });
 
-      form.reset(form.formState.defaultValues);
-      setComboBoxSelectedValues([]);
+      handleFormClose();
     } catch (_error) {
       toast({
         title: 'Something went wrong while Adding Skills',
@@ -54,23 +58,48 @@ export const SkillsForm = ({ handleClose }: { handleClose: () => void }) => {
     }
   };
 
+  const handleFormClose = () => {
+    form.reset();
+    form.clearErrors();
+    setComboBoxSelectedValues([]);
+    handleClose();
+  };
+
   return (
     <Form {...form}>
-      <form onSubmit={form.handleSubmit(onSubmit)}>
-        <SkillsCombobox
-          comboBoxSelectedValues={comboBoxSelectedValues}
-          setComboBoxSelectedValues={setComboBoxSelectedValues}
-          form={form}
-        ></SkillsCombobox>
-        {isLoading ? (
-          <div className="mt-4">
-            <LoadingSpinner />{' '}
-          </div>
-        ) : (
-          <Button type="submit" className="mt-4">
-            Submit
+      <form
+        onSubmit={form.handleSubmit(onSubmit)}
+        className="flex h-full flex-col justify-between"
+      >
+        <div>
+          <SkillsCombobox
+            comboBoxSelectedValues={comboBoxSelectedValues}
+            setComboBoxSelectedValues={setComboBoxSelectedValues}
+            form={form}
+          ></SkillsCombobox>
+          {isLoading && (
+            <div className="mt-4">
+              <LoadingSpinner />{' '}
+            </div>
+          )}
+        </div>
+        <div className="py-4 flex gap-4 justify-end">
+          <Button
+            onClick={handleFormClose}
+            variant={'outline'}
+            className="mt-0 text-slate-500 dark:text-white rounded-[8px]"
+            type="reset"
+          >
+            Cancel
+          </Button>
+          <Button
+            disabled={form.formState.isSubmitting}
+            type="submit"
+            className="mt-0 text-white rounded-[8px]"
+          >
+            {form.formState.isSubmitting ? 'Please wait ...' : 'Save Changes'}
           </Button>
-        )}
+        </div>
       </form>
     </Form>
   );
diff --git a/src/components/profile/forms/UploadResumeForm.tsx b/src/components/profile/forms/UploadResumeForm.tsx
index 3a01f79d..4c48a2ca 100644
--- a/src/components/profile/forms/UploadResumeForm.tsx
+++ b/src/components/profile/forms/UploadResumeForm.tsx
@@ -10,6 +10,8 @@ import { useForm } from 'react-hook-form';
 import { Form, FormLabel } from '@/components/ui/form';
 import { CirclePlus, FileText } from 'lucide-react';
 import { Button } from '@/components/ui/button';
+import { addUserResume } from '@/actions/user.profile.actions';
+import { uploadFileAction } from '@/actions/upload-to-cdn';
 
 const UploadResumeForm = ({ handleClose }: { handleClose: () => void }) => {
   const [file, setFiles] = useState<File | null>(null);
@@ -38,14 +40,55 @@ const UploadResumeForm = ({ handleClose }: { handleClose: () => void }) => {
   const form = useForm<ProfileResumeType>({
     resolver: zodResolver(profileResumeSchema),
     defaultValues: {
-      resume: '',
+      resume: '/main.svg',
     },
   });
+  const submitFile = async (file: File | null) => {
+    if (!file) return;
 
-  // function onSubmit(values: ProfileResumeType) {
-  //   console.log(values)
-  // }
-  function onSubmit() {}
+    const formData = new FormData();
+    formData.append('file', file);
+
+    try {
+      const uniqueFileName = `${Date.now()}-${file.name}`;
+      formData.append('uniqueFileName', uniqueFileName);
+
+      const res = await uploadFileAction(formData, 'pdf');
+      if (!res) {
+        throw new Error('Failed to upload resume');
+      }
+
+      const uploadRes = res;
+      return uploadRes.url;
+    } catch (error) {
+      console.error('Image upload failed:', error);
+    }
+  };
+
+  async function onSubmit(data: ProfileResumeType) {
+    try {
+      data.resume = (await submitFile(file)) ?? '/main.svg';
+      const response = await addUserResume(data.resume);
+
+      if (!response.status) {
+        return toast({
+          title: response.message || 'Error',
+          variant: 'destructive',
+        });
+      }
+      toast({
+        title: response.message,
+        variant: 'success',
+      });
+      handleFormClose();
+    } catch (_error) {
+      toast({
+        title: 'Something went wrong will creating HR',
+        description: 'Internal server error',
+        variant: 'destructive',
+      });
+    }
+  }
 
   const handleFormClose = () => {
     form.reset();
@@ -62,7 +105,7 @@ const UploadResumeForm = ({ handleClose }: { handleClose: () => void }) => {
             <FormLabel>Upload resume</FormLabel>
             <div
               {...getRootProps()}
-              className={`w-full h-44 flex justify-center items-center flex-col bg-slate-900 rounded-[8px] border border-transparent text-center mt-2 ${isDragActive && 'animate-pulse border-white'}`}
+              className={`w-full h-44 flex justify-center items-center flex-col bg-slate-100 dark:bg-slate-900 rounded-[8px] border border-transparent text-center mt-2 ${isDragActive && 'animate-pulse border-white'}`}
             >
               <input {...getInputProps()} />
               {!file && (
@@ -94,12 +137,17 @@ const UploadResumeForm = ({ handleClose }: { handleClose: () => void }) => {
             <Button
               onClick={handleFormClose}
               variant={'outline'}
-              className="mt-0 text-white rounded-[8px]"
+              className="mt-0 text-slate-500 dark:text-white rounded-[8px]"
+              type="reset"
             >
               Cancel
             </Button>
-            <Button type="submit" className="mt-0 text-white rounded-[8px]">
-              Add Resume
+            <Button
+              disabled={form.formState.isSubmitting}
+              type="submit"
+              className="mt-0 text-white rounded-[8px]"
+            >
+              {form.formState.isSubmitting ? 'Please wait ...' : 'Add Resume'}
             </Button>
           </div>
         </form>
diff --git a/src/components/profile/projectDeleteDialog.tsx b/src/components/profile/projectDeleteDialog.tsx
new file mode 100644
index 00000000..04a9c2c1
--- /dev/null
+++ b/src/components/profile/projectDeleteDialog.tsx
@@ -0,0 +1,81 @@
+import { useState } from 'react';
+import { deleteProject } from '@/actions/user.profile.actions';
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from '@/components/ui/alert-dialog';
+import { Button } from '@/components/ui/button';
+import { Trash2 } from 'lucide-react';
+import { useToast } from '../ui/use-toast';
+
+export function ProjectDeleteDialog({ projectId }: { projectId: number }) {
+  const { toast } = useToast();
+  const [isOpen, setIsOpen] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+
+  const handleContinueClick = async () => {
+    try {
+      setIsLoading(true);
+      const response = await deleteProject(projectId);
+
+      if (!response.status) {
+        toast({
+          title: response.message || 'Error',
+          variant: 'destructive',
+        });
+        return;
+      }
+
+      toast({
+        title: response.message,
+        variant: 'success',
+      });
+
+      setIsOpen(false);
+    } catch (_error) {
+      toast({
+        title: 'Something went wrong while deleting the resume',
+        description: 'Internal server error',
+        variant: 'destructive',
+      });
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <AlertDialog open={isOpen} onOpenChange={setIsOpen}>
+      <AlertDialogTrigger asChild>
+        <Button
+          className="bg-transparent p-0 b-0 hover:bg-transparent"
+          onClick={() => setIsOpen(true)}
+        >
+          <Trash2 width={16} height={16} className="text-[#C32518]" />
+        </Button>
+      </AlertDialogTrigger>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
+          <AlertDialogDescription>
+            This action cannot be undone. This will delete your Project.
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel onClick={() => setIsOpen(false)}>
+            Cancel
+          </AlertDialogCancel>
+          <AlertDialogAction disabled={isLoading} onClick={handleContinueClick}>
+            {isLoading ? 'Please wait...' : 'Continue'}
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+}
diff --git a/src/components/profile/resumeDeleteDialog.tsx b/src/components/profile/resumeDeleteDialog.tsx
new file mode 100644
index 00000000..ce8564fd
--- /dev/null
+++ b/src/components/profile/resumeDeleteDialog.tsx
@@ -0,0 +1,81 @@
+import { useState } from 'react';
+import { deleteResume } from '@/actions/user.profile.actions';
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from '@/components/ui/alert-dialog';
+import { Button } from '@/components/ui/button';
+import { Trash2 } from 'lucide-react';
+import { useToast } from '../ui/use-toast';
+
+export function ResumeDeleteDialog() {
+  const { toast } = useToast();
+  const [isOpen, setIsOpen] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+
+  const handleContinueClick = async () => {
+    try {
+      setIsLoading(true);
+      const response = await deleteResume();
+
+      if (!response.status) {
+        toast({
+          title: response.message || 'Error',
+          variant: 'destructive',
+        });
+        return;
+      }
+
+      toast({
+        title: response.message,
+        variant: 'success',
+      });
+
+      setIsOpen(false);
+    } catch (_error) {
+      toast({
+        title: 'Something went wrong while deleting the resume',
+        description: 'Internal server error',
+        variant: 'destructive',
+      });
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <AlertDialog open={isOpen} onOpenChange={setIsOpen}>
+      <AlertDialogTrigger asChild>
+        <Button
+          className="bg-transparent p-0 b-0 hover:bg-transparent"
+          onClick={() => setIsOpen(true)}
+        >
+          <Trash2 width={16} height={16} className="text-[#C32518]" />
+        </Button>
+      </AlertDialogTrigger>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
+          <AlertDialogDescription>
+            This action cannot be undone. This will delete your Resume.
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel onClick={() => setIsOpen(false)}>
+            Cancel
+          </AlertDialogCancel>
+          <AlertDialogAction disabled={isLoading} onClick={handleContinueClick}>
+            {isLoading ? 'Please wait...' : 'Continue'}
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+}
diff --git a/src/components/skills-combobox.tsx b/src/components/skills-combobox.tsx
index 1a90f6ef..53b3ed69 100644
--- a/src/components/skills-combobox.tsx
+++ b/src/components/skills-combobox.tsx
@@ -74,7 +74,7 @@ export function SkillsCombobox({
   return (
     <>
       <div className="flex flex-col gap-2">
-        <FormLabel className="font-medium">Skills Required</FormLabel>
+        <FormLabel className="font-medium">Skills</FormLabel>
         <Combobox
           comboBoxSelectedValues={comboBoxSelectedValues}
           setComboBoxSelectedValues={setComboBoxSelectedValues}
@@ -83,36 +83,40 @@ export function SkillsCombobox({
           isLoading={comboBoxLoading}
         ></Combobox>
       </div>
-
-      <div className="flex flex-wrap gap-2 space-y-0">
-        {comboBoxSelectedValues.map((item, index) => (
-          <div key={index} className="flex items-csele space-y-0 group">
-            <div
-              className={`font-medium text-xs cursor-pointer flex gap-1 text-center justify-start py-2 px-4 rounded-full borderpr-1 bg-blue-100 dark:bg-blue-500 dark:bg-opacity-10 bg-opacity-90 text-blue-700 dark:text-blue-400 border-blue-800 dark:border-blue-400 '}`}
-            >
-              {_.startCase(item.toLowerCase())}
-              {
-                <Button
-                  className="p-0 h-fit bg-tranparent"
-                  onClick={() => {
-                    setComboBoxSelectedValues((prev) => {
-                      const foundIndex = prev.findIndex((val) => val === item);
-                      if (foundIndex >= 0) {
-                        const updatedComboBoxSelectedValues = [...prev];
-                        updatedComboBoxSelectedValues.splice(foundIndex, 1);
-                        return updatedComboBoxSelectedValues;
-                      }
-                      return prev;
-                    });
-                  }}
-                >
-                  <X className="text-white" size={15} />
-                </Button>
-              }
+      {comboBoxSelectedValues.length !== 0 && (
+        <div className="flex mt-3 flex-wrap gap-3 space-y-0 p-4 dark:bg-slate-900 bg-slate-100 rounded-[16px]">
+          {comboBoxSelectedValues.map((item, index) => (
+            <div key={index} className="flex items-csele space-y-0 group">
+              <div
+                className={`font-medium text-sm cursor-pointer flex items-center gap-1 text-center justify-start py-2 px-4 rounded-full borderpr-1 bg-slate-500 bg-opacity-10  dark:bg-opacity-10 text-slate-500  dark:text-slate-400 '}`}
+              >
+                {_.startCase(item.toLowerCase())}
+                {
+                  <Button
+                    className="p-0 h-fit bg-tranparent hover:bg-transparent"
+                    onClick={(e) => {
+                      e.preventDefault();
+                      setComboBoxSelectedValues((prev) => {
+                        const foundIndex = prev.findIndex(
+                          (val) => val === item
+                        );
+                        if (foundIndex >= 0) {
+                          const updatedComboBoxSelectedValues = [...prev];
+                          updatedComboBoxSelectedValues.splice(foundIndex, 1);
+                          return updatedComboBoxSelectedValues;
+                        }
+                        return prev;
+                      });
+                    }}
+                  >
+                    <X className="text-slate-500" size={15} />
+                  </Button>
+                }
+              </div>
             </div>
-          </div>
-        ))}
-      </div>
+          ))}
+        </div>
+      )}
     </>
   );
 }
diff --git a/src/components/ui/alert-dialog.tsx b/src/components/ui/alert-dialog.tsx
new file mode 100644
index 00000000..5cba559b
--- /dev/null
+++ b/src/components/ui/alert-dialog.tsx
@@ -0,0 +1,141 @@
+'use client';
+
+import * as React from 'react';
+import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
+
+import { cn } from '@/lib/utils';
+import { buttonVariants } from '@/components/ui/button';
+
+const AlertDialog = AlertDialogPrimitive.Root;
+
+const AlertDialogTrigger = AlertDialogPrimitive.Trigger;
+
+const AlertDialogPortal = AlertDialogPrimitive.Portal;
+
+const AlertDialogOverlay = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Overlay
+    className={cn(
+      'fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+      className
+    )}
+    {...props}
+    ref={ref}
+  />
+));
+AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;
+
+const AlertDialogContent = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPortal>
+    <AlertDialogOverlay />
+    <AlertDialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
+        className
+      )}
+      {...props}
+    />
+  </AlertDialogPortal>
+));
+AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;
+
+const AlertDialogHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      'flex flex-col space-y-2 text-center sm:text-left',
+      className
+    )}
+    {...props}
+  />
+);
+AlertDialogHeader.displayName = 'AlertDialogHeader';
+
+const AlertDialogFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      'flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2',
+      className
+    )}
+    {...props}
+  />
+);
+AlertDialogFooter.displayName = 'AlertDialogFooter';
+
+const AlertDialogTitle = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Title
+    ref={ref}
+    className={cn('text-lg font-semibold', className)}
+    {...props}
+  />
+));
+AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;
+
+const AlertDialogDescription = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Description
+    ref={ref}
+    className={cn('text-sm text-muted-foreground', className)}
+    {...props}
+  />
+));
+AlertDialogDescription.displayName =
+  AlertDialogPrimitive.Description.displayName;
+
+const AlertDialogAction = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Action>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Action
+    ref={ref}
+    className={cn(buttonVariants(), className)}
+    {...props}
+  />
+));
+AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;
+
+const AlertDialogCancel = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Cancel
+    ref={ref}
+    className={cn(
+      buttonVariants({ variant: 'outline' }),
+      'mt-2 sm:mt-0',
+      className
+    )}
+    {...props}
+  />
+));
+AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;
+
+export {
+  AlertDialog,
+  AlertDialogPortal,
+  AlertDialogOverlay,
+  AlertDialogTrigger,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogFooter,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogAction,
+  AlertDialogCancel,
+};
diff --git a/src/lib/constant/profile.constant.ts b/src/lib/constant/profile.constant.ts
index ec2ad22d..8bc7f0cd 100644
--- a/src/lib/constant/profile.constant.ts
+++ b/src/lib/constant/profile.constant.ts
@@ -17,7 +17,7 @@ export const SHEETS: Sheets = {
       'Share a brief introduction to let companies know who you are.',
   },
   editProfile: {
-    title: 'Edit Your Profile',
+    title: 'Update Your Profile',
     description:
       'Update your personal information, contact details, and social links to keep your profile current and professional.',
   },
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
index e966161f..104e91d5 100644
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -1,3 +1,4 @@
+import { uploadFileAction } from '@/actions/upload-to-cdn';
 import { EMAIL_VERIFICATION_LINK_EXPIRATION_TIME } from '@/config/auth.config';
 import { type ClassValue, clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
@@ -35,3 +36,25 @@ export const isTokenExpiredUtil = (createdAt: Date) => {
     now - tokenCreationTime > EMAIL_VERIFICATION_LINK_EXPIRATION_TIME * 1000
   );
 };
+
+export const submitImage = async (file: File | null) => {
+  if (!file) return;
+
+  const formData = new FormData();
+  formData.append('file', file);
+
+  try {
+    const uniqueFileName = `${Date.now()}-${file.name}`;
+    formData.append('uniqueFileName', uniqueFileName);
+
+    const res = await uploadFileAction(formData, 'webp');
+    if (!res) {
+      throw new Error('Failed to upload resume');
+    }
+
+    const uploadRes = res;
+    return uploadRes.url;
+  } catch (error) {
+    console.error('Image upload failed:', error);
+  }
+};
diff --git a/src/lib/validators/user.profile.validator.ts b/src/lib/validators/user.profile.validator.ts
index d63b124e..83276094 100644
--- a/src/lib/validators/user.profile.validator.ts
+++ b/src/lib/validators/user.profile.validator.ts
@@ -1,19 +1,11 @@
-import { EmployementType, WorkMode } from '@prisma/client';
+import {
+  DegreeType,
+  EmployementType,
+  FieldOfStudyType,
+  WorkMode,
+} from '@prisma/client';
 import { z } from 'zod';
 
-export enum DegreeEnum {
-  BTech = 'BTech',
-  MTech = 'MTech',
-  BCA = 'BCA',
-  MCA = 'MCA',
-}
-export enum FieldOfStudyEnum {
-  AI = 'AI',
-  CS = 'CS',
-  Electronics = 'Electronics',
-  Mechanical = 'Mechanical',
-}
-
 export const UserProfileSchema = z.object({
   name: z.string().min(1, 'Name is required'),
   email: z.string().email('Email is invalid').min(1, 'Email is required'),
@@ -95,15 +87,16 @@ export const aboutMeSchema = z.object({
 });
 
 export const profileSchema = z.object({
-  profileImage: z.string(),
+  avatar: z.string().optional(),
   name: z.string().min(1, 'Name is required'),
   username: z.string().min(1, 'Username is required'),
   email: z.string().min(1, 'Email is required').email(),
-  contactEmail: z.string().min(1, 'Contact Email is required').email(),
+  contactEmail: z.string().email().optional(),
   aboutMe: z
     .string()
     .min(50, { message: 'Description must be at least 50 characters' })
-    .max(255, { message: 'Description cannot exceed 255 characters' }),
+    .max(255, { message: 'Description cannot exceed 255 characters' })
+    .optional(),
 });
 
 export const profileResumeSchema = z.object({
@@ -113,7 +106,7 @@ export const profileResumeSchema = z.object({
 export const profileProjectSchema = z.object({
   projectThumbnail: z.string().optional(),
   projectName: z.string().min(1, 'Project name is required'),
-  projectDescription: z
+  projectSummary: z
     .string()
     .min(20, { message: 'Summary must be at least 20 characters' })
     .max(255, { message: 'Summary cannot exceed 255 characters' }),
@@ -130,17 +123,26 @@ export const profileProjectSchema = z.object({
     .refine((url) => url.startsWith('https://github.com/'), {
       message: 'URL must be a GitHub link starting with "https://github.com/"',
     }),
-  projectFeatured: z.boolean().default(false),
+  isFeature: z.boolean().default(false),
+  stack: z.enum([
+    'GO',
+    'PYTHON',
+    'MERN',
+    'NEXTJS',
+    'AI_GPT_APIS',
+    'SPRINGBOOT',
+    'OTHERS',
+  ]),
 });
 
 export const profileEducationSchema = z
   .object({
     instituteName: z.string().min(1, 'Institute Name is required.'),
-    degree: z.nativeEnum(DegreeEnum, {
-      message: 'Degree is required.',
+    degree: z.nativeEnum(DegreeType, {
+      message: 'Employement type is required',
     }),
-    fieldOfStudy: z.nativeEnum(FieldOfStudyEnum, {
-      message: 'Field of Study is required.',
+    fieldOfStudy: z.nativeEnum(FieldOfStudyType, {
+      message: 'Employement type is required',
     }),
     startDate: z.date({
       required_error: 'Start date is required',
diff --git a/src/types/user.types.ts b/src/types/user.types.ts
new file mode 100644
index 00000000..f7bed4f3
--- /dev/null
+++ b/src/types/user.types.ts
@@ -0,0 +1,53 @@
+import {
+  DegreeType,
+  EmployementType,
+  FieldOfStudyType,
+  WorkMode,
+} from '@prisma/client';
+
+export interface ProjectType {
+  id: number;
+  projectName: string;
+  projectGithub: string;
+  projectThumbnail: string | null;
+  projectLiveLink: string | null;
+  isFeature: boolean;
+  stack: string;
+  projectSummary: string;
+}
+export interface EducationType {
+  id: number;
+  startDate: Date;
+  instituteName: string;
+  degree: DegreeType;
+  fieldOfStudy: FieldOfStudyType;
+  endDate: Date | null;
+}
+export interface ExperienceType {
+  id: number;
+  startDate: Date;
+  endDate: Date | null;
+  companyName: string;
+  currentWorkStatus: boolean;
+  description: string;
+  address: string;
+  workMode: WorkMode;
+  EmploymentType: EmployementType;
+  designation: string;
+}
+
+export interface UserType {
+  name: string;
+  username: string;
+  id: string;
+  email: string;
+  skills: string[];
+  contactEmail: string | null;
+  resume: string | null;
+  avatar: string | null;
+  aboutMe: string | null;
+  experience: ExperienceType[];
+  education: EducationType[];
+  project: ProjectType[];
+  resumeUpdateDate: Date | null;
+}

From 44e3c799a19bf43541f28fcb3946f930e8a2f829 Mon Sep 17 00:00:00 2001
From: Dev Sharma <devsharmasoe@gmail.com>
Date: Sat, 26 Oct 2024 10:14:15 +0530
Subject: [PATCH 05/14] laoding skeleton responsivness

---
 src/actions/user.profile.actions.ts           | 16 ++++-
 src/app/newProfile/[userId]/loading.tsx       | 29 +++++++++
 src/app/newProfile/[userId]/page.tsx          | 35 +++++------
 src/app/newProfile/layout.tsx                 |  2 +-
 src/components/profile/ProfileAboutMe.tsx     | 29 ++++-----
 src/components/profile/ProfileEducation.tsx   | 57 +++++++++--------
 src/components/profile/ProfileExperience.tsx  | 62 ++++++++++---------
 src/components/profile/ProfileHireme.tsx      | 40 ++++++++----
 src/components/profile/ProfileProject.tsx     | 40 ++++++------
 src/components/profile/ProfileProjects.tsx    | 36 ++++++-----
 src/components/profile/ProfileResume.tsx      | 35 ++++++-----
 src/components/profile/ProfileSkills.tsx      | 30 ++++-----
 .../ProfileEmptyContainers.tsx                | 32 +++++++++-
 .../profile/forms/EditProfileForm.tsx         |  6 +-
 src/components/profile/forms/ReadMeForm.tsx   |  2 +-
 src/lib/authOptions.ts                        |  1 +
 16 files changed, 279 insertions(+), 173 deletions(-)
 create mode 100644 src/app/newProfile/[userId]/loading.tsx

diff --git a/src/actions/user.profile.actions.ts b/src/actions/user.profile.actions.ts
index 301cd01c..6817483d 100644
--- a/src/actions/user.profile.actions.ts
+++ b/src/actions/user.profile.actions.ts
@@ -20,6 +20,7 @@ import { withServerActionAsyncCatcher } from '@/lib/async-catch';
 import { ServerActionReturnType } from '@/types/api.types';
 import { SuccessResponse } from '@/lib/success';
 import { withSession } from '@/lib/session';
+import { revalidatePath } from 'next/cache';
 
 export const updateUser = async (
   email: string,
@@ -162,6 +163,7 @@ export const addUserSkills = withServerActionAsyncCatcher<
         skills: data.skills,
       },
     });
+    revalidatePath(`/newProfile/${auth.user.id}`);
     return new SuccessResponse('Skills updated successfully', 200).serialize();
   } catch (_error) {
     return new ErrorHandler('Internal server error', 'DATABASE_ERROR');
@@ -184,6 +186,7 @@ export const addUserExperience = withServerActionAsyncCatcher<
         userId: auth.user.id,
       },
     });
+    revalidatePath(`/newProfile/${auth.user.id}`);
     return new SuccessResponse(
       'Experience added successfully',
       200
@@ -208,6 +211,7 @@ export const addUserEducation = withServerActionAsyncCatcher<
         userId: auth.user.id,
       },
     });
+    revalidatePath(`/newProfile/${auth.user.id}`);
     return new SuccessResponse('Education added successfully', 200).serialize();
   } catch (_error) {
     return new ErrorHandler('Internal server error', 'DATABASE_ERROR');
@@ -230,6 +234,7 @@ export const addUserProjects = withServerActionAsyncCatcher<
         userId: auth.user.id,
       },
     });
+    revalidatePath(`/newProfile/${auth.user.id}`);
     return new SuccessResponse('Project updated successfully', 200).serialize();
   } catch (_error) {
     return new ErrorHandler('Internal server error', 'DATABASE_ERROR');
@@ -275,6 +280,7 @@ export const addUserResume = async (resume: string) => {
         resumeUpdateDate: new Date(),
       },
     });
+    revalidatePath(`/newProfile/${auth.user.id}`);
     return new SuccessResponse('Resume SuccessFully Uploaded', 200).serialize();
   } catch (_error) {
     return new ErrorHandler('Internal server error', 'DATABASE_ERROR');
@@ -406,6 +412,7 @@ export const updateUserDetails = withSession<
         avatar: data.avatar,
       },
     });
+    revalidatePath(`/newProfile/${session.user.id}`);
   }
 
   return new SuccessResponse(
@@ -436,7 +443,7 @@ export const updateAboutMe = withSession<
       },
     });
   }
-
+  revalidatePath(`/newProfile/${session.user.id}`);
   return new SuccessResponse('Successfully updated About Me.', 200).serialize();
 });
 
@@ -456,6 +463,7 @@ export const deleteResume = async () => {
         resumeUpdateDate: null,
       },
     });
+    revalidatePath(`/newProfile/${auth.user.id}`);
     return new SuccessResponse('Resume Deleted Successfully', 200).serialize();
   } catch (_error) {
     return new ErrorHandler('Internal server error', 'DATABASE_ERROR');
@@ -473,6 +481,7 @@ export const deleteProject = async (projectId: number) => {
         id: projectId,
       },
     });
+    revalidatePath(`/newProfile/${auth.user.id}`);
     return new SuccessResponse('Project Deleted Successfully', 200).serialize();
   } catch (_error) {
     return new ErrorHandler('Internal server error', 'DATABASE_ERROR');
@@ -498,6 +507,7 @@ export const editProject = withServerActionAsyncCatcher<
         ...data,
       },
     });
+    revalidatePath(`/newProfile/${auth.user.id}`);
     return new SuccessResponse('Project updated successfully', 200).serialize();
   } catch (_error) {
     return new ErrorHandler('Internal server error', 'DATABASE_ERROR');
@@ -522,6 +532,7 @@ export const editExperience = withServerActionAsyncCatcher<
         ...data,
       },
     });
+    revalidatePath(`/newProfile/${auth.user.id}`);
     return new SuccessResponse(
       'Experience updated successfully',
       200
@@ -549,6 +560,7 @@ export const editEducation = withServerActionAsyncCatcher<
         ...data,
       },
     });
+    revalidatePath(`/newProfile/${auth.user.id}`);
     return new SuccessResponse(
       'Experience updated successfully',
       200
@@ -571,6 +583,7 @@ export const deleteExperience = async (experienceId: number) => {
         userId: auth.user.id,
       },
     });
+    revalidatePath(`/newProfile/${auth.user.id}`);
     return new SuccessResponse('Project Deleted Successfully', 200).serialize();
   } catch (_error) {
     return new ErrorHandler('Internal server error', 'DATABASE_ERROR');
@@ -589,6 +602,7 @@ export const deleteEducation = async (educationId: number) => {
         userId: auth.user.id,
       },
     });
+    revalidatePath(`/newProfile/${auth.user.id}`);
     return new SuccessResponse('Project Deleted Successfully', 200).serialize();
   } catch (_error) {
     return new ErrorHandler('Internal server error', 'DATABASE_ERROR');
diff --git a/src/app/newProfile/[userId]/loading.tsx b/src/app/newProfile/[userId]/loading.tsx
new file mode 100644
index 00000000..813243f7
--- /dev/null
+++ b/src/app/newProfile/[userId]/loading.tsx
@@ -0,0 +1,29 @@
+import React from 'react';
+import { Skeleton } from '@/components/ui/skeleton';
+
+const Loading = () => {
+  return (
+    <>
+      <div className="border rounded-2xl  h-72 overflow-hidden">
+        <div className="w-full h-32 bg-gradient-to-r from-blue-500 to-indigo-500"></div>
+        <div className="p-6 relative flex-col flex gap-y-3">
+          <Skeleton className="h-32 w-32 rounded-full absolute -top-16" />
+
+          <div className="flex flex-col mt-12 gap-2">
+            <Skeleton className="h-10 w-52 rounded-[8px]" />
+            <Skeleton className="h-5 w-20 rounded-[8px]" />
+          </div>
+        </div>
+      </div>
+      {Array.from({ length: 12 }).map((value, index) => {
+        if (index % 2 === 0) {
+          return <Skeleton key={index} className="h-10 w-52 rounded-[8px]" />;
+        } else {
+          return <Skeleton key={index} className="h-40 w-full rounded-[8px]" />;
+        }
+      })}
+    </>
+  );
+};
+
+export default Loading;
diff --git a/src/app/newProfile/[userId]/page.tsx b/src/app/newProfile/[userId]/page.tsx
index fb6b8bda..c84fcb85 100644
--- a/src/app/newProfile/[userId]/page.tsx
+++ b/src/app/newProfile/[userId]/page.tsx
@@ -1,4 +1,3 @@
-'use client';
 import { getUserDetailsWithId } from '@/actions/user.profile.actions';
 import ProfileAboutMe from '@/components/profile/ProfileAboutMe';
 import ProfileEducation from '@/components/profile/ProfileEducation';
@@ -8,26 +7,18 @@ import ProfileHireme from '@/components/profile/ProfileHireme';
 import ProfileProjects from '@/components/profile/ProfileProjects';
 import ProfileResume from '@/components/profile/ProfileResume';
 import ProfileSkills from '@/components/profile/ProfileSkills';
-import { UserType } from '@/types/user.types';
-import { useSession } from 'next-auth/react';
-import React, { useEffect, useState } from 'react';
+import { authOptions } from '@/lib/authOptions';
+import { getServerSession } from 'next-auth';
 
-const Page = ({ params: { userId } }: { params: { userId: string } }) => {
-  const [userDetails, setUserDetails] = useState<null | UserType>(null);
+const Page = async ({ params: { userId } }: { params: { userId: string } }) => {
+  const session = await getServerSession(authOptions);
 
-  const { data, status } = useSession();
-
-  const isOwner = status === 'authenticated' && data?.user.id === userId;
-
-  useEffect(() => {
-    const fetchDetails = async () => {
-      const res = await getUserDetailsWithId(userId);
-      if (res.status) {
-        setUserDetails(res.additional);
-      }
-    };
-    fetchDetails();
-  }, [userId]);
+  const isOwner = session?.user.id === userId;
+  let userDetails;
+  const res = await getUserDetailsWithId(userId);
+  if (res.status) {
+    userDetails = res.additional;
+  }
 
   return (
     <>
@@ -54,7 +45,11 @@ const Page = ({ params: { userId } }: { params: { userId: string } }) => {
             isOwner={isOwner}
             education={userDetails.education}
           />
-          <ProfileHireme />
+          <ProfileHireme
+            email={userDetails.email}
+            contactEmail={userDetails.contactEmail || ''}
+            resume={userDetails.resume || ''}
+          />
         </>
       )}
     </>
diff --git a/src/app/newProfile/layout.tsx b/src/app/newProfile/layout.tsx
index 77d8b0fa..a0c6ac42 100644
--- a/src/app/newProfile/layout.tsx
+++ b/src/app/newProfile/layout.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 
 const ProfileLayout = ({ children }: { children: React.ReactNode }) => {
   return (
-    <div className="flex flex-col w-full container md:gap-6 md:pt-6 relative">
+    <div className="flex flex-col w-full container gap-6 md:gap-6 md:pt-6 relative px-0">
       {children}
     </div>
   );
diff --git a/src/components/profile/ProfileAboutMe.tsx b/src/components/profile/ProfileAboutMe.tsx
index 0c589d54..8297d809 100644
--- a/src/components/profile/ProfileAboutMe.tsx
+++ b/src/components/profile/ProfileAboutMe.tsx
@@ -5,6 +5,7 @@ import { Button } from '@/components/ui/button';
 import SheetWrapper from './sheets/SheetWrapper';
 import ReadMeForm from './forms/ReadMeForm';
 import { SHEETS } from '@/lib/constant/profile.constant';
+import ProfileEmptyContainers from './emptycontainers/ProfileEmptyContainers';
 
 const ProfileAboutMe = ({
   aboutMe,
@@ -42,20 +43,20 @@ const ProfileAboutMe = ({
         )}
       </div>
       {!aboutMe && (
-        <div className="border rounded-2xl  h-80 overflow-hidden flex flex-col gap-y-4 px-6 items-center justify-center">
-          <FileText width={32} height={32} />
-          <div className="text-center">
-            <h4 className="font-bold text-xl">
-              You haven’t added an about me yet
-            </h4>
-            <p className="text-sm font-medium text-gray-500">
-              Share a brief introduction to let companies know who you are.
-            </p>
-          </div>
-          <Button onClick={handleOpen} className="text-white rounded-sm">
-            Add About Me
-          </Button>
-        </div>
+        <ProfileEmptyContainers
+          isOwner={isOwner}
+          buttonText="Add About Me"
+          handleClick={handleOpen}
+          title={
+            isOwner ? 'You haven’t added an about me yet' : 'No About Me added.'
+          }
+          description={
+            isOwner
+              ? 'Share a brief introduction to let companies know who you are.'
+              : ''
+          }
+          Icon={FileText}
+        />
       )}
       {aboutMe && (
         <div className="rounded-2xl p-6 dark:bg-slate-900 bg-slate-100">
diff --git a/src/components/profile/ProfileEducation.tsx b/src/components/profile/ProfileEducation.tsx
index aafbafc2..2bbb6a17 100644
--- a/src/components/profile/ProfileEducation.tsx
+++ b/src/components/profile/ProfileEducation.tsx
@@ -8,6 +8,7 @@ import EducationForm from './forms/EducationForm';
 import { EducationType } from '@/types/user.types';
 import { format } from 'date-fns';
 import { EducationDeleteDialog } from './EducationDeleteDialog';
+import ProfileEmptyContainers from './emptycontainers/ProfileEmptyContainers';
 
 const ProfileEducation = ({
   isOwner,
@@ -55,20 +56,20 @@ const ProfileEducation = ({
         )}
       </div>
       {education.length === 0 && (
-        <div className="border rounded-2xl  h-80 overflow-hidden flex flex-col gap-y-4 px-6 items-center justify-center">
-          <Info width={32} height={32} />
-          <div className="text-center">
-            <h4 className="font-bold text-xl">
-              You haven’t added education yet
-            </h4>
-            <p className="text-sm font-medium text-gray-500">
-              Provide your education background to complete your profile.
-            </p>
-          </div>
-          <Button onClick={handleOpen} className="text-white rounded-sm">
-            Add your education
-          </Button>
-        </div>
+        <ProfileEmptyContainers
+          isOwner={isOwner}
+          buttonText="Add your education"
+          handleClick={handleOpen}
+          title={
+            isOwner ? 'You haven’t added education yet' : 'No Education added.'
+          }
+          description={
+            isOwner
+              ? 'Provide your education background to complete your profile.'
+              : ''
+          }
+          Icon={Info}
+        />
       )}
       {education.length !== 0 && (
         <div className="rounded-2xl p-6 dark:bg-slate-900 bg-slate-100">
@@ -97,19 +98,21 @@ const ProfileEducation = ({
                         )}
                       </div>
                     </div>
-                    <div className="flex gap-3 items-center w-fit">
-                      <EducationDeleteDialog educationId={education.id} />
-                      <Button
-                        className="bg-transparent p-0 b-0 hover:bg-transparent"
-                        onClick={() => handleEditClick(education)}
-                      >
-                        <Pencil
-                          width={16}
-                          height={16}
-                          className="dark:text-slate-400 text-slate-500"
-                        />
-                      </Button>
-                    </div>
+                    {isOwner && (
+                      <div className="flex gap-3 items-center w-fit">
+                        <EducationDeleteDialog educationId={education.id} />
+                        <Button
+                          className="bg-transparent p-0 b-0 hover:bg-transparent"
+                          onClick={() => handleEditClick(education)}
+                        >
+                          <Pencil
+                            width={16}
+                            height={16}
+                            className="dark:text-slate-400 text-slate-500"
+                          />
+                        </Button>
+                      </div>
+                    )}
                   </div>
                 </div>
               </div>
diff --git a/src/components/profile/ProfileExperience.tsx b/src/components/profile/ProfileExperience.tsx
index 4247aa53..097c9d38 100644
--- a/src/components/profile/ProfileExperience.tsx
+++ b/src/components/profile/ProfileExperience.tsx
@@ -8,6 +8,7 @@ import ExperienceForm from './forms/ExperienceForm';
 import { ExperienceType } from '@/types/user.types';
 import { format } from 'date-fns';
 import { ExperienceDeleteDialog } from './ExperienceDeleteDialog';
+import ProfileEmptyContainers from './emptycontainers/ProfileEmptyContainers';
 
 const ProfileExperience = ({
   isOwner,
@@ -56,21 +57,24 @@ const ProfileExperience = ({
           </Button>
         )}
       </div>
+
       {experiences.length === 0 && (
-        <div className="border rounded-2xl  h-80 overflow-hidden flex flex-col gap-y-4 px-6 items-center justify-center">
-          <Info width={32} height={32} />
-          <div className="text-center">
-            <h4 className="font-bold text-xl">
-              You haven’t added work experience yet
-            </h4>
-            <p className="text-sm font-medium text-gray-500">
-              Share your experience to attract the right companies.
-            </p>
-          </div>
-          <Button onClick={handleOpen} className="text-white rounded-sm">
-            Add your work experience
-          </Button>
-        </div>
+        <ProfileEmptyContainers
+          isOwner={isOwner}
+          buttonText=" Add your work experience"
+          handleClick={handleOpen}
+          title={
+            isOwner
+              ? 'You haven’t added work experience yet'
+              : 'No Work Experience added.'
+          }
+          description={
+            isOwner
+              ? 'Share your experience to attract the right companies.'
+              : ''
+          }
+          Icon={Info}
+        />
       )}
 
       {experiences.length !== 0 && (
@@ -83,7 +87,7 @@ const ProfileExperience = ({
                   <div className="w-[2px] h-full bg-gradient-to-b from-[#3259e8] to-[#F1F5F9] dark:to-[#0F172A]"></div>
                 </div>
                 <div className="flex flex-col gap-2 mb-3 w-full">
-                  <div className="flex justify-between">
+                  <div className="flex flex-col sm:flex-row justify-between">
                     <div className="flex flex-col gap-1">
                       <h2 className="dark:text-slate-50 text-[#020817] text-xl font-bold ">
                         {experience.designation}
@@ -104,19 +108,21 @@ const ProfileExperience = ({
                         )}
                       </div>
                     </div>
-                    <div className="flex gap-3 items-center w-fit">
-                      <ExperienceDeleteDialog experienceId={experience.id} />
-                      <Button
-                        className="bg-transparent p-0 b-0 hover:bg-transparent"
-                        onClick={() => handleEditClick(experience)}
-                      >
-                        <Pencil
-                          width={16}
-                          height={16}
-                          className="dark:text-slate-400 text-slate-500"
-                        />
-                      </Button>
-                    </div>
+                    {isOwner && (
+                      <div className="flex gap-3 items-center w-fit">
+                        <ExperienceDeleteDialog experienceId={experience.id} />
+                        <Button
+                          className="bg-transparent p-0 b-0 hover:bg-transparent"
+                          onClick={() => handleEditClick(experience)}
+                        >
+                          <Pencil
+                            width={16}
+                            height={16}
+                            className="dark:text-slate-400 text-slate-500"
+                          />
+                        </Button>
+                      </div>
+                    )}
                   </div>
                   <p className="text-[#020817] dark:text-slate-50 text-base font-medium">
                     {experience.description}
diff --git a/src/components/profile/ProfileHireme.tsx b/src/components/profile/ProfileHireme.tsx
index b0ef4fda..7b889076 100644
--- a/src/components/profile/ProfileHireme.tsx
+++ b/src/components/profile/ProfileHireme.tsx
@@ -1,11 +1,19 @@
 import { ArrowRight, Mail } from 'lucide-react';
 import React from 'react';
-import { Button } from '../ui/button';
+import Link from 'next/link';
 
-const ProfileHireme = () => {
+const ProfileHireme = ({
+  contactEmail,
+  email,
+  resume,
+}: {
+  contactEmail: string;
+  email: string;
+  resume: string;
+}) => {
   return (
     <>
-      <div className="border rounded-2xl bg-gradient-to-b from-white to-slate-100 dark:from-gray-800 dark:to-gray-900  h-40 overflow-hidden flex flex-col gap-y-4 px-6 items-center justify-center">
+      <div className="border rounded-2xl bg-gradient-to-b from-white to-slate-100 dark:from-gray-800 dark:to-gray-900  min-h-40 overflow-hidden flex flex-col gap-y-4 px-6 py-4 items-center justify-center">
         <div className="text-center">
           <h4 className="font-bold text-xl">
             Hire Me, Let’s Make Magic Happen!
@@ -15,17 +23,23 @@ const ProfileHireme = () => {
             to your goals!
           </p>
         </div>
-        <div className="flex gap-2 items-center">
-          <Button className="text-white rounded-sm flex gap-1">
-            <Mail /> <p> Contact Me</p>
-          </Button>
-          <Button
-            className="dark:text-slate-400  rounded-sm flex gap-1 bg-transparent text-slate-500"
-            variant={'outline'}
+        <div className="flex gap-2 flex-col sm:flex-row items-center">
+          <Link
+            href={`mailto:${contactEmail ? contactEmail : email}`}
+            className="bg-[#3259E8] px-3 py-2 text-white rounded-sm flex gap-1"
           >
-            Contact Me
-            <ArrowRight />
-          </Button>
+            <Mail /> <p> Contact Me</p>
+          </Link>
+          {resume && (
+            <Link
+              href={resume}
+              target="_blank"
+              className="dark:text-slate-400 bg-white border-slate-200 px-3 py-2 dark:bg-[#020817]  rounded-sm flex gap-1 bg-transparent text-slate-500"
+            >
+              View Resume
+              <ArrowRight />
+            </Link>
+          )}
         </div>
       </div>
     </>
diff --git a/src/components/profile/ProfileProject.tsx b/src/components/profile/ProfileProject.tsx
index c518efab..b4d344e4 100644
--- a/src/components/profile/ProfileProject.tsx
+++ b/src/components/profile/ProfileProject.tsx
@@ -9,14 +9,16 @@ import Link from 'next/link';
 const ProfileProject = ({
   project,
   handleEditClick,
+  isOwner,
 }: {
   project: ProjectType;
   handleEditClick: (project: ProjectType) => void;
+  isOwner: boolean;
 }) => {
   return (
     <div
       key={project.id}
-      className=" flex flex-col gap-y-6 p-6 dark:bg-slate-900 bg-slate-100 rounded-2xl"
+      className=" flex flex-col gap-y-6 p-3 sm:p-6 dark:bg-slate-900 bg-slate-100 rounded-2xl"
     >
       <div className="relative w-full aspect-w-16 h-48 rounded-[8px] overflow-hidden">
         <Image
@@ -31,19 +33,21 @@ const ProfileProject = ({
       <div className="flex gap-y-3 flex-col">
         <div className="flex justify-between items-center">
           <h2 className="text-xl font-bold truncate">{project.projectName}</h2>
-          <div className="flex gap-3 items-center w-fit">
-            <ProjectDeleteDialog projectId={project.id} />
-            <Button
-              className="bg-transparent p-0 b-0 hover:bg-transparent"
-              onClick={() => handleEditClick(project)}
-            >
-              <Pencil
-                width={16}
-                height={16}
-                className="dark:text-slate-400 text-slate-500"
-              />
-            </Button>
-          </div>
+          {isOwner && (
+            <div className="flex gap-3 items-center w-fit">
+              <ProjectDeleteDialog projectId={project.id} />
+              <Button
+                className="bg-transparent p-0 b-0 hover:bg-transparent"
+                onClick={() => handleEditClick(project)}
+              >
+                <Pencil
+                  width={16}
+                  height={16}
+                  className="dark:text-slate-400 text-slate-500"
+                />
+              </Button>
+            </div>
+          )}
         </div>
         <p className="text-slate-500 dark:text-slate-400 font-medium text-sm leading-tight">
           {project.projectSummary}
@@ -52,12 +56,12 @@ const ProfileProject = ({
           {project.stack}
         </div>
       </div>
-      <div className="flex gap-2">
+      <div className="flex gap-2 flex-wrap">
         {project.projectLiveLink && (
           <Link
             target="_blank"
             href={project.projectLiveLink}
-            className="w-fit flex gap-2 items-center bg-white border border-slate-200 px-3 py-2 rounded-[8px] text-slate-500 dark:text-slate-400 dark:bg-[#020817] dark:border-slate-800"
+            className="w-fit flex gap-2 text-base items-center bg-white border border-slate-200 px-3 py-2 rounded-[8px] text-slate-500 dark:text-slate-400 dark:bg-[#020817] dark:border-slate-800"
           >
             View Project <ArrowUpRight height={16} width={16} />
           </Link>
@@ -66,14 +70,14 @@ const ProfileProject = ({
           <Link
             target="_blank"
             href={project.projectGithub}
-            className="w-fit flex gap-2 items-center border-none px-3 py-2 rounded-[8px] text-slate-500 dark:text-slate-400"
+            className="w-fit text-base flex gap-2 items-center border-none px-3 py-2 rounded-[8px] text-slate-500 dark:text-slate-400"
           >
             <Github
               height={16}
               width={16}
               className="dark:fill-slate-400 fill-slate-500"
             />{' '}
-            Github
+            View
           </Link>
         )}
       </div>
diff --git a/src/components/profile/ProfileProjects.tsx b/src/components/profile/ProfileProjects.tsx
index bcad3788..7a60fb6e 100644
--- a/src/components/profile/ProfileProjects.tsx
+++ b/src/components/profile/ProfileProjects.tsx
@@ -7,6 +7,7 @@ import { SHEETS } from '@/lib/constant/profile.constant';
 import ProjectForm from './forms/ProjectForm';
 import { ProjectType } from '@/types/user.types';
 import ProfileProject from './ProfileProject';
+import ProfileEmptyContainers from './emptycontainers/ProfileEmptyContainers';
 
 const ProfileProjects = ({
   isOwner,
@@ -63,30 +64,34 @@ const ProfileProjects = ({
           </Button>
         )}
       </div>
+
       {featuredProjects.length === 0 && (
-        <div className="border rounded-2xl  h-80 overflow-hidden flex flex-col gap-y-4 px-6 items-center justify-center">
-          <Info width={32} height={32} />
-          <div className="text-center">
-            <h4 className="font-bold text-xl">
-              You haven’t added any projects yet
-            </h4>
-            <p className="text-sm font-medium text-gray-500">
-              Showcase your projects to demonstrate your skills and expertise.
-            </p>
-          </div>
-          <Button className="text-white rounded-sm" onClick={handleOpen}>
-            Add your projects
-          </Button>
-        </div>
+        <ProfileEmptyContainers
+          isOwner={isOwner}
+          buttonText="Add Your Projects"
+          handleClick={handleOpen}
+          title={
+            isOwner
+              ? 'You haven’t added any projects yet'
+              : 'No Projects Added.'
+          }
+          description={
+            isOwner
+              ? 'Showcase your projects to demonstrate your skills and expertise.'
+              : ''
+          }
+          Icon={Info}
+        />
       )}
       {featuredProjects.length !== 0 && !isSeeMore && (
         <>
-          <div className=" grid grid-cols-3 gap-x-6 gap-y-6 ">
+          <div className=" grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-x-6 gap-y-6 ">
             {featuredProjects.map((project) => (
               <ProfileProject
                 key={project.id}
                 project={project}
                 handleEditClick={handleEditClick}
+                isOwner={isOwner}
               />
             ))}
           </div>
@@ -106,6 +111,7 @@ const ProfileProjects = ({
                 key={project.id}
                 project={project}
                 handleEditClick={handleEditClick}
+                isOwner={isOwner}
               />
             ))}
           </div>
diff --git a/src/components/profile/ProfileResume.tsx b/src/components/profile/ProfileResume.tsx
index 3684ff9b..2ddf9210 100644
--- a/src/components/profile/ProfileResume.tsx
+++ b/src/components/profile/ProfileResume.tsx
@@ -7,6 +7,8 @@ import { SHEETS } from '@/lib/constant/profile.constant';
 import UploadResumeForm from './forms/UploadResumeForm';
 import { format } from 'date-fns';
 import { ResumeDeleteDialog } from './resumeDeleteDialog';
+import Link from 'next/link';
+import ProfileEmptyContainers from './emptycontainers/ProfileEmptyContainers';
 
 const ProfileResume = ({
   isOwner,
@@ -44,25 +46,24 @@ const ProfileResume = ({
       </div>
 
       {resume.length === 0 && (
-        <div className="border rounded-2xl  h-80 overflow-hidden flex flex-col gap-y-4 px-6 items-center justify-center">
-          <FileText width={32} height={32} />
-          <div className="text-center">
-            <h4 className="font-bold text-xl">
-              You haven’t uploaded a resume yet
-            </h4>
-            <p className="text-sm font-medium text-gray-500">
-              Upload your resume to showcase your skills and experiences to
-              recruiters.
-            </p>
-          </div>
-          <Button className="text-white rounded-sm" onClick={handleOpen}>
-            Upload your resume
-          </Button>
-        </div>
+        <ProfileEmptyContainers
+          isOwner={isOwner}
+          buttonText="Upload your resume"
+          handleClick={handleOpen}
+          title={
+            isOwner ? 'You haven’t uploaded a resume yet' : 'No Resume added.'
+          }
+          description={
+            isOwner
+              ? 'Upload your resume to showcase your skills and experiences to recruiters.'
+              : ''
+          }
+          Icon={FileText}
+        />
       )}
       {resume && (
         <div className="rounded-2xl gap-y-4 p-6 dark:bg-slate-900 bg-slate-100 flex justify-between items-center">
-          <div className="flex gap-x-4">
+          <Link href={resume} target="_blank" className="flex gap-x-4">
             <div className="border-slate-200 w-fit border dark:border-slate-800 p-2 rounded-[12px]">
               <FileText width={32} height={32} className="text-slate-500" />
             </div>
@@ -75,7 +76,7 @@ const ProfileResume = ({
                 {format(resumeUpdateDate, 'dd MMM yyyy')}
               </p>
             </div>
-          </div>
+          </Link>
           {isOwner && <ResumeDeleteDialog />}
         </div>
       )}
diff --git a/src/components/profile/ProfileSkills.tsx b/src/components/profile/ProfileSkills.tsx
index 53ed76fc..19624368 100644
--- a/src/components/profile/ProfileSkills.tsx
+++ b/src/components/profile/ProfileSkills.tsx
@@ -5,6 +5,7 @@ import { Button } from '../ui/button';
 import SheetWrapper from './sheets/SheetWrapper';
 import { SHEETS } from '@/lib/constant/profile.constant';
 import { SkillsForm } from './forms/SkillsForm';
+import ProfileEmptyContainers from './emptycontainers/ProfileEmptyContainers';
 
 const ProfileSkills = ({
   isOwner,
@@ -35,21 +36,22 @@ const ProfileSkills = ({
           </Button>
         )}
       </div>
+
       {skills.length === 0 && (
-        <div className="border rounded-2xl  h-80 overflow-hidden flex flex-col gap-y-4 px-6 items-center justify-center">
-          <Info width={32} height={32} />
-          <div className="text-center">
-            <h4 className="font-bold text-xl">
-              You haven’t added any skills yet
-            </h4>
-            <p className="text-sm font-medium text-gray-500">
-              Highlight your skills to stand out to potential employers.
-            </p>
-          </div>
-          <Button onClick={handleOpen} className="text-white rounded-sm">
-            Add your skills
-          </Button>
-        </div>
+        <ProfileEmptyContainers
+          isOwner={isOwner}
+          buttonText="Add your skills"
+          handleClick={handleOpen}
+          title={
+            isOwner ? ' You haven’t added any skills yet' : 'No Skills added.'
+          }
+          description={
+            isOwner
+              ? 'Highlight your skills to stand out to potential employers.'
+              : ''
+          }
+          Icon={Info}
+        />
       )}
       {skills.length !== 0 && (
         <div className="rounded-2xl gap-x-2 p-6 dark:bg-slate-900 bg-slate-100 flex flex-wrap">
diff --git a/src/components/profile/emptycontainers/ProfileEmptyContainers.tsx b/src/components/profile/emptycontainers/ProfileEmptyContainers.tsx
index 5c2909b5..51d3401c 100644
--- a/src/components/profile/emptycontainers/ProfileEmptyContainers.tsx
+++ b/src/components/profile/emptycontainers/ProfileEmptyContainers.tsx
@@ -1,7 +1,35 @@
+import { Button } from '@/components/ui/button';
 import React from 'react';
 
-const ProfileEmptyContainers = () => {
-  return <div></div>;
+const ProfileEmptyContainers = ({
+  title,
+  isOwner,
+  Icon,
+  description,
+  handleClick,
+  buttonText,
+}: {
+  title: string;
+  Icon: React.ElementType;
+  description: string;
+  handleClick: () => void;
+  buttonText: string;
+  isOwner: boolean;
+}) => {
+  return (
+    <div className="border rounded-2xl  h-80 overflow-hidden flex flex-col gap-y-4 px-6 items-center justify-center">
+      <Icon width={32} height={32} />
+      <div className="text-center">
+        <h4 className="font-bold text-xl">{title}</h4>
+        <p className="text-sm font-medium text-gray-500">{description}</p>
+      </div>
+      {isOwner && (
+        <Button onClick={handleClick} className="text-white rounded-sm">
+          {buttonText}
+        </Button>
+      )}
+    </div>
+  );
 };
 
 export default ProfileEmptyContainers;
diff --git a/src/components/profile/forms/EditProfileForm.tsx b/src/components/profile/forms/EditProfileForm.tsx
index 7869edae..405745b0 100644
--- a/src/components/profile/forms/EditProfileForm.tsx
+++ b/src/components/profile/forms/EditProfileForm.tsx
@@ -74,7 +74,9 @@ const EditProfileForm = ({
 
   const onSubmit = async (data: ProfileSchemaType) => {
     try {
-      data.avatar = (await submitImage(file)) ?? '/main.svg';
+      if (file) {
+        data.avatar = (await submitImage(file)) ?? '/main.svg';
+      }
       const response = await updateUserDetails(data);
 
       if (!response.status) {
@@ -285,7 +287,7 @@ const EditProfileForm = ({
             type="reset"
             onClick={handleFormClose}
             variant={'outline'}
-            className="mt-0 text-white rounded-[8px]"
+            className="mt-0 text-slate-500 dark:text-slate-400 rounded-[8px]"
           >
             Cancel
           </Button>
diff --git a/src/components/profile/forms/ReadMeForm.tsx b/src/components/profile/forms/ReadMeForm.tsx
index 0ec3732e..f592f6b9 100644
--- a/src/components/profile/forms/ReadMeForm.tsx
+++ b/src/components/profile/forms/ReadMeForm.tsx
@@ -88,7 +88,7 @@ const ReadMeForm = ({
             <Button
               onClick={handleFormClose}
               variant={'outline'}
-              className="mt-0 text-white rounded-[8px]"
+              className="mt-0 text-slate-500 dark:text-slate-400 rounded-[8px]"
               type="reset"
             >
               Cancel
diff --git a/src/lib/authOptions.ts b/src/lib/authOptions.ts
index c34b5d0a..5ed400bb 100644
--- a/src/lib/authOptions.ts
+++ b/src/lib/authOptions.ts
@@ -96,6 +96,7 @@ export const authOptions = {
               oauthProvider: 'GOOGLE',
               email: email as string,
               name: name as string,
+              username: 'ishadfoi', //to do
               avatar,
               isVerified: true,
               emailVerified: new Date(),

From 1a8a9393b8c2dc2c6bbfa43df9de1b915793a7a3 Mon Sep 17 00:00:00 2001
From: Dev Sharma <devsharmasoe@gmail.com>
Date: Sat, 26 Oct 2024 10:39:00 +0530
Subject: [PATCH 06/14] added delete account

---
 src/actions/user.profile.actions.ts           | 47 ++++++----
 .../profile/AccountDeleteDialog.tsx           | 86 +++++++++++++++++++
 .../profile/DeleteAccountDialog.tsx           |  9 +-
 .../profile/forms/AccountSeetingForm.tsx      | 50 +++++++++--
 4 files changed, 159 insertions(+), 33 deletions(-)
 create mode 100644 src/components/profile/AccountDeleteDialog.tsx

diff --git a/src/actions/user.profile.actions.ts b/src/actions/user.profile.actions.ts
index 6817483d..37212bab 100644
--- a/src/actions/user.profile.actions.ts
+++ b/src/actions/user.profile.actions.ts
@@ -47,36 +47,39 @@ export const updateUser = async (
   }
 };
 
-export const changePassword = async (
-  email: string,
-  data: {
-    currentPassword: string;
-    newPassword: string;
-    confirmNewPassword: string;
-  }
-) => {
+export const changePassword = async (data: {
+  currentPassword: string;
+  newPassword: string;
+  confirmNewPassword: string;
+}) => {
   try {
-    const existingUser = await prisma.user.findFirst({
-      where: { email: email },
-    });
+    const auth = await getServerSession(authOptions);
+
+    if (!auth || !auth?.user?.id)
+      throw new ErrorHandler('Not Authorized', 'UNAUTHORIZED');
+
     const { currentPassword, newPassword, confirmNewPassword } = data;
     if (!currentPassword || !newPassword || !confirmNewPassword) {
-      return { error: 'Password is required' };
+      throw new ErrorHandler('Invalid Data', 'BAD_REQUEST');
     }
     if (newPassword !== confirmNewPassword) {
-      return { error: 'Passwords do not match' };
+      throw new ErrorHandler('Invalid Data', 'BAD_REQUEST');
     }
 
-    if (!existingUser) return { error: 'User not found!' };
+    const existingUser = await prisma.user.findFirst({
+      where: { id: auth.user.id },
+    });
+
+    if (!existingUser) throw new ErrorHandler('User Not Found', 'NOT_FOUND');
     if (!existingUser.password) {
-      return { error: 'User password not found!' };
+      throw new ErrorHandler('Invalid Credientials', 'AUTHENTICATION_FAILED');
     }
     const matchPassword = await bcryptjs.compare(
       currentPassword,
       existingUser.password
     );
     if (!matchPassword) {
-      return { error: 'Invalid credentials' };
+      throw new ErrorHandler('Invalid Credientials', 'AUTHENTICATION_FAILED');
     }
 
     const hashedPassword = await bcryptjs.hash(newPassword, 10);
@@ -88,9 +91,15 @@ export const changePassword = async (
       },
     });
 
-    return { success: 'Your password has been successfully updated.' };
-  } catch (error) {
-    return { error: error };
+    return new SuccessResponse(
+      'Successfully Password Updated.',
+      200
+    ).serialize();
+  } catch (_error) {
+    throw new ErrorHandler(
+      'Something went wrong while changing password.',
+      'INTERNAL_SERVER_ERROR'
+    );
   }
 };
 
diff --git a/src/components/profile/AccountDeleteDialog.tsx b/src/components/profile/AccountDeleteDialog.tsx
new file mode 100644
index 00000000..c8964b7e
--- /dev/null
+++ b/src/components/profile/AccountDeleteDialog.tsx
@@ -0,0 +1,86 @@
+import { useState } from 'react';
+import { deleteExperience } from '@/actions/user.profile.actions';
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from '@/components/ui/alert-dialog';
+import { Button } from '@/components/ui/button';
+import { Trash2 } from 'lucide-react';
+import { useToast } from '../ui/use-toast';
+
+export function ExperienceDeleteDialog({
+  experienceId,
+}: {
+  experienceId: number;
+}) {
+  const { toast } = useToast();
+  const [isOpen, setIsOpen] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+
+  const handleContinueClick = async () => {
+    try {
+      setIsLoading(true);
+      const response = await deleteExperience(experienceId);
+
+      if (!response.status) {
+        toast({
+          title: response.message || 'Error',
+          variant: 'destructive',
+        });
+        return;
+      }
+
+      toast({
+        title: response.message,
+        variant: 'success',
+      });
+
+      setIsOpen(false);
+    } catch (_error) {
+      toast({
+        title: 'Something went wrong while deleting the resume',
+        description: 'Internal server error',
+        variant: 'destructive',
+      });
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <AlertDialog open={isOpen} onOpenChange={setIsOpen}>
+      <AlertDialogTrigger asChild>
+        <Button
+          className="bg-transparent p-0 b-0 hover:bg-transparent"
+          onClick={() => setIsOpen(true)}
+        >
+          <Trash2 width={16} height={16} className="text-[#C32518]" />
+        </Button>
+      </AlertDialogTrigger>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
+          <AlertDialogDescription>
+            This action cannot be undone. This will delete your Accounts and all
+            the associated assets with it.
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel onClick={() => setIsOpen(false)}>
+            Cancel
+          </AlertDialogCancel>
+          <AlertDialogAction disabled={isLoading} onClick={handleContinueClick}>
+            {isLoading ? 'Please wait...' : 'Continue'}
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+}
diff --git a/src/components/profile/DeleteAccountDialog.tsx b/src/components/profile/DeleteAccountDialog.tsx
index fee934ef..92c94d8b 100644
--- a/src/components/profile/DeleteAccountDialog.tsx
+++ b/src/components/profile/DeleteAccountDialog.tsx
@@ -24,7 +24,7 @@ import {
 } from '@/lib/validators/user.profile.validator';
 
 import { deleteUser } from '@/actions/user.profile.actions';
-import { Trash, X } from 'lucide-react';
+import { X } from 'lucide-react';
 import { FaSpinner } from 'react-icons/fa';
 
 export const DeleteAccountDialog = () => {
@@ -80,12 +80,11 @@ export const DeleteAccountDialog = () => {
     <Dialog open={modalOpen}>
       <DialogTrigger asChild>
         <Button
-          className="w-40 flex gap-2 text-red-500"
-          variant={'ghost'}
+          variant={'destructive'}
+          className="mt-3"
           onClick={() => setModalOpen(true)}
         >
-          <Trash size={15} />
-          Delete Account
+          Delete my account
         </Button>
       </DialogTrigger>
 
diff --git a/src/components/profile/forms/AccountSeetingForm.tsx b/src/components/profile/forms/AccountSeetingForm.tsx
index 541d6941..bccec13b 100644
--- a/src/components/profile/forms/AccountSeetingForm.tsx
+++ b/src/components/profile/forms/AccountSeetingForm.tsx
@@ -15,6 +15,9 @@ import { useForm } from 'react-hook-form';
 import { Input } from '@/components/ui/input';
 import { Button } from '@/components/ui/button';
 import { TriangleAlert } from 'lucide-react';
+import { changePassword } from '@/actions/user.profile.actions';
+import { useToast } from '@/components/ui/use-toast';
+import { DeleteAccountDialog } from '../DeleteAccountDialog';
 
 const AccountSeetingForm = ({ handleClose }: { handleClose: () => void }) => {
   const form = useForm<UserPasswordSchemaType>({
@@ -26,7 +29,30 @@ const AccountSeetingForm = ({ handleClose }: { handleClose: () => void }) => {
     },
   });
 
-  const onSubmit = () => {};
+  const { toast } = useToast();
+
+  const onSubmit = async (values: UserPasswordSchemaType) => {
+    try {
+      const response = await changePassword(values);
+
+      if (!response.status) {
+        return toast({
+          title: response.message || 'Error',
+          variant: 'destructive',
+        });
+      }
+      toast({
+        title: response.message,
+        variant: 'success',
+      });
+      handleFormClose();
+    } catch (_error) {
+      toast({
+        variant: 'destructive',
+        title: 'Something went wrong while updating.',
+      });
+    }
+  };
 
   const handleFormClose = () => {
     form.clearErrors();
@@ -99,12 +125,18 @@ const AccountSeetingForm = ({ handleClose }: { handleClose: () => void }) => {
                 type="reset"
                 onClick={handleFormClose}
                 variant={'outline'}
-                className="mt-0 text-white rounded-[8px]"
+                className="mt-0 text-slate-500 dark:text-slate-400 rounded-[8px]"
               >
                 Cancel
               </Button>
-              <Button type="submit" className="mt-0 text-white rounded-[8px]">
-                Update Password
+              <Button
+                disabled={form.formState.isSubmitting}
+                type="submit"
+                className="mt-0 text-white rounded-[8px]"
+              >
+                {form.formState.isSubmitting
+                  ? 'Please wait...'
+                  : 'Update Profile'}
               </Button>
             </div>
           </div>
@@ -113,14 +145,14 @@ const AccountSeetingForm = ({ handleClose }: { handleClose: () => void }) => {
 
       <div className="h-60 bg-red-600 bg-opacity-10 mt-5 rounded-md flex flex-col justify-center items-center p-6 text-center ">
         <TriangleAlert height={32} width={32} className="text-[#DD503F]" />
-        <h4 className="text-xl font-bold text-slate-50">Delete account</h4>
-        <p className="text-slate-400 text-sm">
+        <h4 className="text-xl font-bold dark:text-slate-50 text-[#020817] ">
+          Delete account
+        </h4>
+        <p className="text-slate-500 dark:text-slate-400 text-sm">
           Permanently delete your account and all associated data. This action
           cannot be undone.
         </p>
-        <Button variant={'destructive'} className="mt-3">
-          Delete my account
-        </Button>
+        <DeleteAccountDialog />
       </div>
     </div>
   );

From be8aee64816efca73b99d13ff0bf18e28923643e Mon Sep 17 00:00:00 2001
From: Dev Sharma <devsharmasoe@gmail.com>
Date: Sat, 26 Oct 2024 10:51:12 +0530
Subject: [PATCH 07/14] added 404 page

---
 src/app/newProfile/[userId]/page.tsx | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/app/newProfile/[userId]/page.tsx b/src/app/newProfile/[userId]/page.tsx
index c84fcb85..9fe4e909 100644
--- a/src/app/newProfile/[userId]/page.tsx
+++ b/src/app/newProfile/[userId]/page.tsx
@@ -1,4 +1,5 @@
 import { getUserDetailsWithId } from '@/actions/user.profile.actions';
+import Custom404Page from '@/app/[...404]/page';
 import ProfileAboutMe from '@/components/profile/ProfileAboutMe';
 import ProfileEducation from '@/components/profile/ProfileEducation';
 import ProfileExperience from '@/components/profile/ProfileExperience';
@@ -20,6 +21,10 @@ const Page = async ({ params: { userId } }: { params: { userId: string } }) => {
     userDetails = res.additional;
   }
 
+  if (!res.status) {
+    return <Custom404Page />;
+  }
+
   return (
     <>
       {userDetails && (

From fa92ea5dee4c3c340b6657fb032929e4eac0e8db Mon Sep 17 00:00:00 2001
From: Dev Sharma <devsharmasoe@gmail.com>
Date: Sat, 26 Oct 2024 10:55:21 +0530
Subject: [PATCH 08/14] updated navbar

---
 src/app/newProfile/layout.tsx                 | 12 ----
 .../[userId]/loading.tsx                      |  0
 .../{newProfile => profile}/[userId]/page.tsx |  0
 src/app/profile/bookmarks/page.tsx            | 71 -------------------
 src/app/profile/edit/page.tsx                 | 27 -------
 src/app/profile/experience/page.tsx           | 42 -----------
 src/app/profile/layout.tsx                    | 38 +---------
 src/app/profile/page.tsx                      | 36 ----------
 src/app/profile/projects/page.tsx             | 42 -----------
 src/app/profile/resume/page.tsx               | 23 ------
 src/app/profile/settings/page.tsx             | 25 -------
 src/app/profile/skills/page.tsx               | 42 -----------
 src/layouts/header.tsx                        |  5 +-
 13 files changed, 7 insertions(+), 356 deletions(-)
 delete mode 100644 src/app/newProfile/layout.tsx
 rename src/app/{newProfile => profile}/[userId]/loading.tsx (100%)
 rename src/app/{newProfile => profile}/[userId]/page.tsx (100%)
 delete mode 100644 src/app/profile/bookmarks/page.tsx
 delete mode 100644 src/app/profile/edit/page.tsx
 delete mode 100644 src/app/profile/experience/page.tsx
 delete mode 100644 src/app/profile/page.tsx
 delete mode 100644 src/app/profile/projects/page.tsx
 delete mode 100644 src/app/profile/resume/page.tsx
 delete mode 100644 src/app/profile/settings/page.tsx
 delete mode 100644 src/app/profile/skills/page.tsx

diff --git a/src/app/newProfile/layout.tsx b/src/app/newProfile/layout.tsx
deleted file mode 100644
index a0c6ac42..00000000
--- a/src/app/newProfile/layout.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-'use client';
-import React from 'react';
-
-const ProfileLayout = ({ children }: { children: React.ReactNode }) => {
-  return (
-    <div className="flex flex-col w-full container gap-6 md:gap-6 md:pt-6 relative px-0">
-      {children}
-    </div>
-  );
-};
-
-export default ProfileLayout;
diff --git a/src/app/newProfile/[userId]/loading.tsx b/src/app/profile/[userId]/loading.tsx
similarity index 100%
rename from src/app/newProfile/[userId]/loading.tsx
rename to src/app/profile/[userId]/loading.tsx
diff --git a/src/app/newProfile/[userId]/page.tsx b/src/app/profile/[userId]/page.tsx
similarity index 100%
rename from src/app/newProfile/[userId]/page.tsx
rename to src/app/profile/[userId]/page.tsx
diff --git a/src/app/profile/bookmarks/page.tsx b/src/app/profile/bookmarks/page.tsx
deleted file mode 100644
index ac0f826c..00000000
--- a/src/app/profile/bookmarks/page.tsx
+++ /dev/null
@@ -1,71 +0,0 @@
-'use client';
-
-import { GetBookmarkByUserId } from '@/actions/job.action';
-import BookmarkCardSkeleton from '@/components/BookmarkCardSkeletion';
-import JobCard from '@/components/Jobcard';
-
-import { JobType } from '@/types/jobs.types';
-import { useEffect, useState } from 'react';
-
-export default function BookmarkPage() {
-  const [loading, setLoading] = useState(true);
-  const [errorNoPost, setErrorNoPost] = useState(false);
-  const [bookmarkedJobs, setBookmarkedJobs] = useState<
-    {
-      job: JobType;
-    }[]
-  >();
-
-  useEffect(() => {
-    const getBookmark = async () => {
-      setLoading(true);
-      try {
-        const response = await GetBookmarkByUserId();
-        if (response.status !== 200 || !response.data) {
-          return setErrorNoPost(true);
-        }
-        setBookmarkedJobs(response.data);
-      } finally {
-        setLoading(false);
-      }
-    };
-    getBookmark();
-  }, []);
-
-  return (
-    <div className="md:container flex flex-col w-full">
-      <div className="flex justify-between items-center">
-        <span>Bookmarks</span>
-      </div>
-
-      {loading ? (
-        <div className="space-y-4 w-full">
-          {[1, 2, 3, 4, 5].map((e: number) => (
-            <BookmarkCardSkeleton key={e} />
-          ))}
-        </div>
-      ) : (
-        <>
-          {errorNoPost ? (
-            <div className="w-full h-screen flex items-center justify-center text-white">
-              <p>No Bookmarks found</p>
-            </div>
-          ) : (
-            <div className="h-full overflow-y-scroll no-scrollbar flex flex-col gap-8 my-3">
-              {bookmarkedJobs?.map(({ job }, index) => {
-                return (
-                  <JobCard
-                    job={job}
-                    key={index}
-                    className="w-full"
-                    isBookmarked={true}
-                  />
-                );
-              })}
-            </div>
-          )}
-        </>
-      )}
-    </div>
-  );
-}
diff --git a/src/app/profile/edit/page.tsx b/src/app/profile/edit/page.tsx
deleted file mode 100644
index e5b60817..00000000
--- a/src/app/profile/edit/page.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-'use client';
-import { EditProfile } from '@/components/profile/EditProfile';
-import APP_PATHS from '@/config/path.config';
-import { useSession } from 'next-auth/react';
-import { useRouter } from 'next/navigation';
-import React, { useEffect } from 'react';
-
-const EditProfilePage = () => {
-  const router = useRouter();
-  const session = useSession();
-  useEffect(() => {
-    if (session.status === 'unauthenticated')
-      router.push(`${APP_PATHS.SIGNIN}?redirectTo=/profile`);
-  }, [session.status, router]);
-  const user = session.data?.user;
-
-  return (
-    <div className="md:container flex flex-col w-full">
-      <div className="flex justify-between items-center">
-        <span>Edit Profile</span>
-      </div>
-      <EditProfile name={user?.name || ''} email={user?.email || ''} />
-    </div>
-  );
-};
-
-export default EditProfilePage;
diff --git a/src/app/profile/experience/page.tsx b/src/app/profile/experience/page.tsx
deleted file mode 100644
index e657a7a9..00000000
--- a/src/app/profile/experience/page.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-'use client';
-import { UserExperience } from '@/components/profile/UserExperience';
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from '@/components/ui/dialog';
-import { AddExperience } from '@/components/user-multistep-form/addExperience-form';
-import APP_PATHS from '@/config/path.config';
-import { useSession } from 'next-auth/react';
-import { useRouter } from 'next/navigation';
-import React, { useEffect } from 'react';
-
-export default function AccountExperiencePage() {
-  const router = useRouter();
-  const session = useSession();
-  useEffect(() => {
-    if (session.status !== 'loading' && session.status === 'unauthenticated')
-      router.push(`${APP_PATHS.SIGNIN}?redirectTo=/profile`);
-  }, [session.status, router]);
-  return (
-    <div className="md:container flex flex-col w-full gap-4">
-      <div className="flex md:justify-between justify-start items-center gap-5">
-        <span>Experience</span>
-        <Dialog>
-          <DialogTrigger>Add more</DialogTrigger>
-          <DialogContent className="max-w-md max-h-[90vh] flex flex-col p-0">
-            <DialogHeader className="p-6 pb-2">
-              <DialogTitle>Add Experience</DialogTitle>
-            </DialogHeader>
-            <div className="flex-grow overflow-y-auto px-6 pb-6">
-              <AddExperience />
-            </div>
-          </DialogContent>
-        </Dialog>
-      </div>
-      <UserExperience />
-    </div>
-  );
-}
diff --git a/src/app/profile/layout.tsx b/src/app/profile/layout.tsx
index 738f71d2..a0c6ac42 100644
--- a/src/app/profile/layout.tsx
+++ b/src/app/profile/layout.tsx
@@ -1,42 +1,10 @@
 'use client';
-import { getUserDetails } from '@/actions/user.profile.actions';
-import Sidebar from '@/components/profile/sidebar';
-import APP_PATHS from '@/config/path.config';
-import { useSession } from 'next-auth/react';
-import { useRouter } from 'next/navigation';
-import React, { useEffect } from 'react';
+import React from 'react';
 
 const ProfileLayout = ({ children }: { children: React.ReactNode }) => {
-  const router = useRouter();
-  const session = useSession();
-  useEffect(() => {
-    if (session.status !== 'loading' && session.status === 'unauthenticated')
-      router.push(`${APP_PATHS.SIGNIN}?redirectTo=/profile`);
-  }, [session.status, router]);
-  useEffect(() => {
-    async function fetchUserDetails() {
-      try {
-        const res = await getUserDetails();
-        if (res.status) {
-          localStorage.setItem(
-            'skills',
-            JSON.stringify(res.additional?.skills)
-          );
-          localStorage.setItem(
-            'resume',
-            JSON.stringify(res.additional?.resume)
-          );
-        }
-      } catch (_error) {}
-    }
-    fetchUserDetails();
-  }, []);
   return (
-    <div className="container flex max-md:flex-col md:gap-5 w-full relative">
-      <Sidebar />
-      <div className="flex px-2 w-full overflow-y-auto md:max-h-[73vh] lg:h-full md:border md:rounded-xl md:pt-6 no-scrollbar">
-        {children}
-      </div>
+    <div className="flex flex-col w-full container gap-6 md:gap-6 md:pt-6 relative px-0">
+      {children}
     </div>
   );
 };
diff --git a/src/app/profile/page.tsx b/src/app/profile/page.tsx
deleted file mode 100644
index 30509244..00000000
--- a/src/app/profile/page.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-'use client';
-import { ProfileInfo } from '@/components/profile/ProfileInfo';
-import APP_PATHS from '@/config/path.config';
-import { Edit } from 'lucide-react';
-import { useSession } from 'next-auth/react';
-import Link from 'next/link';
-import { useRouter } from 'next/navigation';
-import React, { useEffect } from 'react';
-
-const ProfilePage = () => {
-  const session = useSession();
-  const router = useRouter();
-
-  useEffect(() => {
-    if (session.status !== 'loading' && session.status === 'unauthenticated')
-      router.push(`${APP_PATHS.SIGNIN}?redirectTo=/create`);
-  }, [session.status, router]);
-
-  return (
-    <div className="md:container flex flex-col w-full">
-      <div className="flex justify-between items-start mb-4 w-full">
-        <span className="w-full">My Account</span>
-        <Link
-          href={'/profile/edit'}
-          className="sm:w-40 w-full items-center justify-center gap-4 md:flex hidden"
-        >
-          <Edit size={18} />
-          Edit Profile
-        </Link>
-      </div>
-      <ProfileInfo />
-    </div>
-  );
-};
-
-export default ProfilePage;
diff --git a/src/app/profile/projects/page.tsx b/src/app/profile/projects/page.tsx
deleted file mode 100644
index 517a3480..00000000
--- a/src/app/profile/projects/page.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-'use client';
-import { UserProjects } from '@/components/profile/UserProject';
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from '@/components/ui/dialog';
-import { AddProject } from '@/components/user-multistep-form/add-project-form';
-import APP_PATHS from '@/config/path.config';
-import { useSession } from 'next-auth/react';
-import { useRouter } from 'next/navigation';
-import React, { useEffect } from 'react';
-
-export default function AccountProjectPage() {
-  const router = useRouter();
-  const session = useSession();
-  useEffect(() => {
-    if (session.status !== 'loading' && session.status === 'unauthenticated')
-      router.push(`${APP_PATHS.SIGNIN}?redirectTo=/profile`);
-  }, [session.status, router]);
-  return (
-    <div className="md:container flex flex-col w-full gap-4">
-      <div className="flex md:justify-between justify-start gap-5 items-center">
-        <span>Projects</span>
-        <Dialog>
-          <DialogTrigger>Add more</DialogTrigger>
-          <DialogContent className="max-w-md max-h-[90vh] flex flex-col p-0">
-            <DialogHeader className="p-6 pb-2">
-              <DialogTitle>Add Project</DialogTitle>
-            </DialogHeader>
-            <div className="flex-grow overflow-y-auto px-6 pb-6">
-              <AddProject />
-            </div>
-          </DialogContent>
-        </Dialog>
-      </div>
-      <UserProjects />
-    </div>
-  );
-}
diff --git a/src/app/profile/resume/page.tsx b/src/app/profile/resume/page.tsx
deleted file mode 100644
index f9efcefe..00000000
--- a/src/app/profile/resume/page.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-'use client';
-import { UserResume } from '@/components/profile/UserResume';
-import APP_PATHS from '@/config/path.config';
-import { useSession } from 'next-auth/react';
-import { useRouter } from 'next/navigation';
-import React, { useEffect } from 'react';
-
-export default function AccountResumePage() {
-  const router = useRouter();
-  const session = useSession();
-  useEffect(() => {
-    if (session.status !== 'loading' && session.status === 'unauthenticated')
-      router.push(`${APP_PATHS.SIGNIN}?redirectTo=/profile`);
-  }, [session.status, router]);
-  return (
-    <div className="md:container flex flex-col w-full gap-4">
-      <div className="flex justify-between items-center">
-        <span>Resume</span>
-      </div>
-      <UserResume />
-    </div>
-  );
-}
diff --git a/src/app/profile/settings/page.tsx b/src/app/profile/settings/page.tsx
deleted file mode 100644
index 9cd66ff1..00000000
--- a/src/app/profile/settings/page.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-'use client';
-import { AccountSettings } from '@/components/profile/AccountSettings';
-import APP_PATHS from '@/config/path.config';
-import { useSession } from 'next-auth/react';
-import { useRouter } from 'next/navigation';
-import React, { useEffect } from 'react';
-
-const AccountSettingsPage = () => {
-  const router = useRouter();
-  const session = useSession();
-  useEffect(() => {
-    if (session.status !== 'loading' && session.status === 'unauthenticated')
-      router.push(`${APP_PATHS.SIGNIN}?redirectTo=/profile`);
-  }, [session.status, router]);
-  return (
-    <div className="md:container flex flex-col w-full">
-      <div className="flex justify-between items-center mb-4">
-        <span>Account Settings</span>
-      </div>
-      <AccountSettings />
-    </div>
-  );
-};
-
-export default AccountSettingsPage;
diff --git a/src/app/profile/skills/page.tsx b/src/app/profile/skills/page.tsx
deleted file mode 100644
index c9fd1b2b..00000000
--- a/src/app/profile/skills/page.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-'use client';
-import { UserSkills } from '@/components/profile/UserSkills';
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from '@/components/ui/dialog';
-import { AddSkills } from '@/components/user-multistep-form/add-skills-form';
-import APP_PATHS from '@/config/path.config';
-import { useSession } from 'next-auth/react';
-import { useRouter } from 'next/navigation';
-import React, { useEffect } from 'react';
-
-export default function AccountResumePage() {
-  const router = useRouter();
-  const session = useSession();
-  useEffect(() => {
-    if (session.status !== 'loading' && session.status === 'unauthenticated')
-      router.push(`${APP_PATHS.SIGNIN}?redirectTo=/profile`);
-  }, [session.status, router]);
-  return (
-    <div className="md:container flex flex-col w-full gap-4">
-      <div className="flex md:justify-between justify-start items-center gap-5">
-        <span>Skills</span>
-        <Dialog>
-          <DialogTrigger>Add more</DialogTrigger>
-          <DialogContent className="max-w-md max-h-[90vh] flex flex-col p-0">
-            <DialogHeader className="p-6 pb-2">
-              <DialogTitle>Add Skills</DialogTitle>
-            </DialogHeader>
-            <div className="flex-grow overflow-y-auto px-6 pb-6">
-              <AddSkills />
-            </div>
-          </DialogContent>
-        </Dialog>
-      </div>
-      <UserSkills />
-    </div>
-  );
-}
diff --git a/src/layouts/header.tsx b/src/layouts/header.tsx
index 2f345a32..f2c5d185 100644
--- a/src/layouts/header.tsx
+++ b/src/layouts/header.tsx
@@ -142,7 +142,10 @@ const Header = () => {
                     >
                       <DropdownMenuItem>
                         <icons.profile className="mr-2 h-4 w-4" />
-                        <Link className="w-full" href={'/profile'}>
+                        <Link
+                          className="w-full"
+                          href={'/profile/' + session.data.user.id}
+                        >
                           Profile
                         </Link>
                       </DropdownMenuItem>

From 8db29938870306364fa807bc60dd39a584e49d57 Mon Sep 17 00:00:00 2001
From: Dev Sharma <devsharmasoe@gmail.com>
Date: Sat, 26 Oct 2024 11:05:30 +0530
Subject: [PATCH 09/14] all checked passed

---
 prisma/seed.ts                                | 40 +++++++++++--------
 src/actions/auth.actions.ts                   |  3 +-
 src/components/profile/ChangePassword.tsx     | 21 +++++-----
 .../user-multistep-form/add-project-form.tsx  |  3 +-
 src/lib/auth.ts                               |  1 +
 5 files changed, 40 insertions(+), 28 deletions(-)

diff --git a/prisma/seed.ts b/prisma/seed.ts
index 77428662..11397753 100644
--- a/prisma/seed.ts
+++ b/prisma/seed.ts
@@ -12,9 +12,22 @@ import bcrypt from 'bcryptjs';
 const prisma = new PrismaClient();
 
 const users = [
-  { id: '1', name: 'Jack', email: 'user@gmail.com', username: "jackcoder" },
-  { id: '2', name: 'Admin', email: 'admin@gmail.com', role: Role.ADMIN, onBoard: true, username: "admincoder" },
-  { id: '3', name: 'Hr', email: 'hr@gmail.com', role: Role.HR, username: "hrcoder" },
+  { id: '1', name: 'Jack', email: 'user@gmail.com', username: 'jackcoder' },
+  {
+    id: '2',
+    name: 'Admin',
+    email: 'admin@gmail.com',
+    role: Role.ADMIN,
+    onBoard: true,
+    username: 'admincoder',
+  },
+  {
+    id: '3',
+    name: 'Hr',
+    email: 'hr@gmail.com',
+    role: Role.HR,
+    username: 'hrcoder',
+  },
 ];
 
 let jobs = [
@@ -63,7 +76,6 @@ let jobs = [
     minSalary: null,
     maxSalary: null,
     isVerifiedJob: false,
-
   },
   {
     id: '3',
@@ -87,7 +99,7 @@ let jobs = [
     minSalary: 90000,
     maxSalary: 120000,
     isVerifiedJob: true,
-    deleted: true
+    deleted: true,
   },
   {
     id: '4',
@@ -136,7 +148,7 @@ let jobs = [
     minSalary: 110000,
     maxSalary: 150000,
     isVerifiedJob: true,
-    deleted: true
+    deleted: true,
   },
   {
     id: '6',
@@ -162,7 +174,6 @@ let jobs = [
     minSalary: 80000,
     maxSalary: 100000,
     isVerifiedJob: false,
-
   },
   {
     id: '7',
@@ -187,8 +198,7 @@ let jobs = [
     minSalary: 70000,
     maxSalary: 90000,
     isVerifiedJob: false,
-    delted: true
-
+    delted: true,
   },
   {
     id: '8',
@@ -213,8 +223,7 @@ let jobs = [
     minSalary: null,
     maxSalary: null,
     isVerifiedJob: true,
-    deleted: true
-
+    deleted: true,
   },
   {
     id: '9',
@@ -237,7 +246,6 @@ let jobs = [
     minSalary: 100000,
     maxSalary: 130000,
     isVerifiedJob: true,
-
   },
   {
     id: '10',
@@ -262,7 +270,6 @@ let jobs = [
     minSalary: 75000,
     maxSalary: 95000,
     isVerifiedJob: false,
-
   },
   {
     id: '11',
@@ -284,7 +291,6 @@ let jobs = [
     minSalary: 25000,
     maxSalary: 50000,
     isVerifiedJob: true,
-
   },
   {
     id: '12',
@@ -309,7 +315,7 @@ let jobs = [
     minSalary: null,
     maxSalary: null,
     isVerifiedJob: true,
-    delted: false
+    delted: false,
   },
 ];
 
@@ -328,7 +334,7 @@ async function seedUsers() {
             password: hashedPassword,
             role: u.role || Role.USER,
             emailVerified: new Date(),
-            username: u.username
+            username: u.username,
           },
         });
         console.log(`User created or updated: ${u.email}`);
@@ -406,4 +412,4 @@ async function main() {
   await seedJobs();
 }
 
-main();
\ No newline at end of file
+main();
diff --git a/src/actions/auth.actions.ts b/src/actions/auth.actions.ts
index 9db6d30b..3a156ac7 100644
--- a/src/actions/auth.actions.ts
+++ b/src/actions/auth.actions.ts
@@ -42,7 +42,8 @@ export const signUp = withServerActionAsyncCatcher<
     await prisma.$transaction(
       async (txn) => {
         const user = await txn.user.create({
-          data: { ...data, password: hashedPassword },
+          // todo username
+          data: { ...data, password: hashedPassword, username: 'asdif' },
         });
 
         const verificationToken = await txn.verificationToken.create({
diff --git a/src/components/profile/ChangePassword.tsx b/src/components/profile/ChangePassword.tsx
index 21edafd1..26ce6bfa 100644
--- a/src/components/profile/ChangePassword.tsx
+++ b/src/components/profile/ChangePassword.tsx
@@ -3,7 +3,6 @@
 import { useState, useTransition } from 'react';
 
 import { useForm } from 'react-hook-form';
-import { useSession } from 'next-auth/react';
 import { useToast } from '../ui/use-toast';
 
 import { zodResolver } from '@hookform/resolvers/zod';
@@ -28,7 +27,6 @@ import {
 import Loader from '../loader';
 
 export const ChangePassword = () => {
-  const session = useSession();
   const { toast } = useToast();
 
   const { register, watch } = useForm();
@@ -60,14 +58,19 @@ export const ChangePassword = () => {
   const handleFormSubmit = async (data: UserPasswordSchemaType) => {
     try {
       startTransition(() => {
-        changePassword(session.data?.user.email as string, data)
+        changePassword(data)
           .then((res) => {
-            res?.error
-              ? toast({
-                  title: (res.error as string) || 'something went wrong',
-                  variant: 'destructive',
-                })
-              : toast({ title: res.success as string, variant: 'success' });
+            res?.status &&
+              toast({
+                title: res.message as string,
+                variant: 'success',
+              });
+          })
+          .catch((error) => {
+            toast({
+              title: error.message as string,
+              variant: 'destructive',
+            });
           })
           .then(() => {
             form.reset();
diff --git a/src/components/user-multistep-form/add-project-form.tsx b/src/components/user-multistep-form/add-project-form.tsx
index 3a555e60..ad1bfabb 100644
--- a/src/components/user-multistep-form/add-project-form.tsx
+++ b/src/components/user-multistep-form/add-project-form.tsx
@@ -119,7 +119,8 @@ export const AddProject = () => {
     try {
       setIsLoading(true);
       data.projectThumbnail = (await submitImage(file)) ?? '';
-      const response = await addUserProjects(data);
+      // todo isFeature
+      const response = await addUserProjects({ ...data, isFeature: false });
       if (!response.status) {
         return toast({
           title: response.message || 'Error',
diff --git a/src/lib/auth.ts b/src/lib/auth.ts
index f5c44e4d..b6e19639 100644
--- a/src/lib/auth.ts
+++ b/src/lib/auth.ts
@@ -105,6 +105,7 @@ export const options = {
             email: email,
             password: hashedPassword,
             name: name,
+            username: 'random', // todo username
           },
           select: {
             id: true,

From b564fe14217e34fc1608e844a3bd83826cb18d6c Mon Sep 17 00:00:00 2001
From: Dev Sharma <devsharmasoe@gmail.com>
Date: Sat, 26 Oct 2024 14:16:25 +0530
Subject: [PATCH 10/14] added socials

---
 src/actions/user.profile.actions.ts           | 10 +++
 src/components/profile/ProfileHeroSection.tsx |  4 +-
 src/components/profile/ProfileSocials.tsx     | 81 ++++++++++++++++++
 .../profile/forms/EditProfileForm.tsx         | 85 +++++++++++++++++++
 src/lib/icons.ts                              |  2 +
 src/lib/validators/user.profile.validator.ts  | 37 ++++++++
 src/types/user.types.ts                       |  5 ++
 7 files changed, 223 insertions(+), 1 deletion(-)
 create mode 100644 src/components/profile/ProfileSocials.tsx

diff --git a/src/actions/user.profile.actions.ts b/src/actions/user.profile.actions.ts
index 37212bab..519c3504 100644
--- a/src/actions/user.profile.actions.ts
+++ b/src/actions/user.profile.actions.ts
@@ -382,6 +382,11 @@ export const getUserDetailsWithId = async (id: string) => {
         aboutMe: true,
         project: true,
         resumeUpdateDate: true,
+        discordLink: true,
+        githubLink: true,
+        linkedinLink: true,
+        portfolioLink: true,
+        twitterLink: true,
       },
     });
     if (!res) throw new ErrorHandler('User Not Found', 'NOT_FOUND');
@@ -419,6 +424,11 @@ export const updateUserDetails = withSession<
         contactEmail: data.contactEmail,
         aboutMe: data.aboutMe,
         avatar: data.avatar,
+        discordLink: data.discordLink,
+        linkedinLink: data.linkedinLink,
+        twitterLink: data.twitterLink,
+        portfolioLink: data.portfolioLink,
+        githubLink: data.githubLink,
       },
     });
     revalidatePath(`/newProfile/${session.user.id}`);
diff --git a/src/components/profile/ProfileHeroSection.tsx b/src/components/profile/ProfileHeroSection.tsx
index 380dc241..30d5907d 100644
--- a/src/components/profile/ProfileHeroSection.tsx
+++ b/src/components/profile/ProfileHeroSection.tsx
@@ -9,6 +9,7 @@ import { SHEETS } from '@/lib/constant/profile.constant';
 import AccountSeetingForm from './forms/AccountSeetingForm';
 import { useSession } from 'next-auth/react';
 import { UserType } from '@/types/user.types';
+import ProfileSocials from './ProfileSocials';
 
 const ProfileHeroSection = ({ userdetails }: { userdetails: UserType }) => {
   const [isSheetOpen, setIsSheetOpen] = useState<boolean>(false);
@@ -27,7 +28,7 @@ const ProfileHeroSection = ({ userdetails }: { userdetails: UserType }) => {
 
   return (
     <>
-      <div className="border rounded-2xl  h-72 overflow-hidden">
+      <div className="border rounded-2xl  min-h-72 overflow-hidden">
         <div className="w-full h-32 bg-gradient-to-r from-blue-500 to-indigo-500"></div>
         <div className="p-6 relative flex-col flex gap-y-3">
           <Avatar className="h-32 w-32 absolute -top-16">
@@ -65,6 +66,7 @@ const ProfileHeroSection = ({ userdetails }: { userdetails: UserType }) => {
               @{userdetails.username}
             </a>
           </div>
+          <ProfileSocials userdetails={userdetails} />
         </div>
       </div>
       {status === 'authenticated' && data.user.id === userdetails.id && (
diff --git a/src/components/profile/ProfileSocials.tsx b/src/components/profile/ProfileSocials.tsx
new file mode 100644
index 00000000..b4d4d70d
--- /dev/null
+++ b/src/components/profile/ProfileSocials.tsx
@@ -0,0 +1,81 @@
+import { UserType } from '@/types/user.types';
+import { Globe } from 'lucide-react';
+import Link from 'next/link';
+import React from 'react';
+import Icon from '../ui/icon';
+
+const ProfileSocials = ({ userdetails }: { userdetails: UserType }) => {
+  return (
+    <div className="flex flex-wrap gap-x-3 gap-y-3">
+      {userdetails.githubLink && (
+        <Link
+          target="_blank"
+          href={userdetails.githubLink}
+          className="px-3 dark:text-slate-50 flex gap-1 items-center w-fit py-2 text-base dark:bg-slate-900 bg-slate-100 rounded-[8px] "
+        >
+          <Icon
+            icon={'github'}
+            className="w-6 h-6 dark:text-slate-400 text-slate-500"
+          />
+          {userdetails.githubLink.split('/').filter(Boolean).pop()}
+        </Link>
+      )}
+      {userdetails.linkedinLink && (
+        <Link
+          target="_blank"
+          href={userdetails.linkedinLink}
+          className="px-3 dark:text-slate-50 flex gap-1 items-center w-fit py-2 text-base dark:bg-slate-900 bg-slate-100 rounded-[8px] "
+        >
+          <Icon
+            icon={'linkedin'}
+            className="w-6 h-6 dark:text-slate-400 text-slate-500"
+          />
+          {userdetails.linkedinLink.split('/').filter(Boolean).pop()}
+        </Link>
+      )}
+      {userdetails.twitterLink && (
+        <Link
+          target="_blank"
+          href={userdetails.twitterLink}
+          className="px-3 dark:text-slate-50 flex gap-1 items-center w-fit py-2 text-base dark:bg-slate-900 bg-slate-100 rounded-[8px] "
+        >
+          <Icon
+            icon={'twitter'}
+            className="w-6 h-6 dark:text-slate-400 text-slate-500"
+          />
+          {userdetails.twitterLink.split('/').filter(Boolean).pop()}
+        </Link>
+      )}
+      {userdetails.discordLink && (
+        <Link
+          target="_blank"
+          href={userdetails.discordLink}
+          className="px-3 dark:text-slate-50 flex gap-1 items-center w-fit py-2 text-base dark:bg-slate-900 bg-slate-100 rounded-[8px] "
+        >
+          <Icon
+            icon={'discord'}
+            className="w-6 h-6 dark:text-slate-400 text-slate-500"
+          />
+          {userdetails.discordLink.split('/').filter(Boolean).pop()}
+        </Link>
+      )}
+
+      {userdetails.portfolioLink && (
+        <Link
+          target="_blank"
+          href={userdetails.portfolioLink}
+          className="px-3 dark:text-slate-50 flex gap-1 items-center w-fit py-2 text-base dark:bg-slate-900 bg-slate-100 rounded-[8px] "
+        >
+          <Globe
+            width={24}
+            height={24}
+            className="dark:text-slate-400 text-slate-500"
+          />
+          Portfolio
+        </Link>
+      )}
+    </div>
+  );
+};
+
+export default ProfileSocials;
diff --git a/src/components/profile/forms/EditProfileForm.tsx b/src/components/profile/forms/EditProfileForm.tsx
index 405745b0..03a9b421 100644
--- a/src/components/profile/forms/EditProfileForm.tsx
+++ b/src/components/profile/forms/EditProfileForm.tsx
@@ -47,6 +47,11 @@ const EditProfileForm = ({
       contactEmail: userdetails.contactEmail || '',
       avatar: userdetails.avatar || '/main.svg',
       name: userdetails.name || '',
+      discordLink: userdetails.discordLink || '',
+      linkedinLink: userdetails.linkedinLink || '',
+      twitterLink: userdetails.twitterLink || '',
+      githubLink: userdetails.githubLink || '',
+      portfolioLink: userdetails.portfolioLink || '',
     },
   });
 
@@ -262,6 +267,86 @@ const EditProfileForm = ({
               </FormItem>
             )}
           />
+          <FormField
+            control={form.control}
+            name="portfolioLink"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel> Portfolio Link </FormLabel>
+                <FormControl>
+                  <Input
+                    placeholder="https://"
+                    {...field}
+                    className="rounded-[8px]"
+                  />
+                </FormControl>
+              </FormItem>
+            )}
+          />
+          <FormField
+            control={form.control}
+            name="githubLink"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Github Link </FormLabel>
+                <FormControl>
+                  <Input
+                    placeholder="https://github.com/"
+                    {...field}
+                    className="rounded-[8px]"
+                  />
+                </FormControl>
+              </FormItem>
+            )}
+          />
+          <FormField
+            control={form.control}
+            name="twitterLink"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>X Link </FormLabel>
+                <FormControl>
+                  <Input
+                    placeholder="https://x.com/"
+                    {...field}
+                    className="rounded-[8px]"
+                  />
+                </FormControl>
+              </FormItem>
+            )}
+          />
+          <FormField
+            control={form.control}
+            name="linkedinLink"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Linkedin Link </FormLabel>
+                <FormControl>
+                  <Input
+                    placeholder="https://linkedin.com/"
+                    {...field}
+                    className="rounded-[8px]"
+                  />
+                </FormControl>
+              </FormItem>
+            )}
+          />
+          <FormField
+            control={form.control}
+            name="discordLink"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Discord Link </FormLabel>
+                <FormControl>
+                  <Input
+                    placeholder="https://discord.com/user"
+                    {...field}
+                    className="rounded-[8px]"
+                  />
+                </FormControl>
+              </FormItem>
+            )}
+          />
           <FormField
             control={form.control}
             name="aboutMe"
diff --git a/src/lib/icons.ts b/src/lib/icons.ts
index 8cb54c36..33e6ba01 100644
--- a/src/lib/icons.ts
+++ b/src/lib/icons.ts
@@ -6,6 +6,7 @@ import {
   FaTelegramPlane,
   FaYoutube,
   FaSpinner,
+  FaDiscord,
 } from 'react-icons/fa';
 import {
   ArrowRight,
@@ -36,6 +37,7 @@ const icons = {
   youtube: FaYoutube,
   linkedin: FaLinkedin,
   github: FaGithub,
+  discord: FaDiscord,
   instagram: FaInstagram,
   telergam: FaTelegramPlane,
   loading: FaSpinner,
diff --git a/src/lib/validators/user.profile.validator.ts b/src/lib/validators/user.profile.validator.ts
index 83276094..713d4106 100644
--- a/src/lib/validators/user.profile.validator.ts
+++ b/src/lib/validators/user.profile.validator.ts
@@ -97,6 +97,43 @@ export const profileSchema = z.object({
     .min(50, { message: 'Description must be at least 50 characters' })
     .max(255, { message: 'Description cannot exceed 255 characters' })
     .optional(),
+  githubLink: z
+    .string({ message: 'Github Link is required' })
+    .url({ message: 'Invalid URL format' })
+    .refine((url) => url.startsWith('https://github.com/'), {
+      message: 'URL must be a GitHub link starting with "https://github.com/"',
+    })
+    .optional(),
+  portfolioLink: z
+    .string({ message: 'Portfolio Link is required' })
+    .url({ message: 'Invalid URL format' })
+    .refine((url) => url.startsWith('https://'), {
+      message: 'URL must start with "https"',
+    })
+    .optional(),
+  linkedinLink: z
+    .string({ message: 'Linkedin Link is required' })
+    .url({ message: 'Invalid URL format' })
+    .refine((url) => url.startsWith('https://linkedin.com/'), {
+      message:
+        'URL must be a Linkedin link starting with "https://linkedin.com/"',
+    })
+    .optional(),
+  twitterLink: z
+    .string({ message: 'Twitter Link is required' })
+    .url({ message: 'Invalid URL format' })
+    .refine((url) => url.startsWith('https://x.com/'), {
+      message: 'URL must be a Linkedin link starting with "https://x.com/"',
+    })
+    .optional(),
+  discordLink: z
+    .string({ message: 'Discord Link is required' })
+    .url({ message: 'Invalid URL format' })
+    .refine((url) => url.startsWith('https://discordapp.com/'), {
+      message:
+        'URL must be a Linkedin link starting with "https://discordapp.com/"',
+    })
+    .optional(),
 });
 
 export const profileResumeSchema = z.object({
diff --git a/src/types/user.types.ts b/src/types/user.types.ts
index f7bed4f3..54d92389 100644
--- a/src/types/user.types.ts
+++ b/src/types/user.types.ts
@@ -50,4 +50,9 @@ export interface UserType {
   education: EducationType[];
   project: ProjectType[];
   resumeUpdateDate: Date | null;
+  githubLink: string | null;
+  portfolioLink: string | null;
+  linkedinLink: string | null;
+  twitterLink: string | null;
+  discordLink: string | null;
 }

From f3258ec974a0f34e2621b18d94c3e7154e3f5bde Mon Sep 17 00:00:00 2001
From: Dev Sharma <devsharmasoe@gmail.com>
Date: Sun, 27 Oct 2024 20:36:57 +0530
Subject: [PATCH 11/14] social url optional

---
 next.config.js                                |  6 +-
 prisma/seed.ts                                |  2 +-
 src/app/profile/[userId]/page.tsx             |  2 +-
 .../{ProfileAboutMe.tsx => AboutMe.tsx}       |  0
 .../profile/AccountDeleteDialog.tsx           | 86 -------------------
 .../profile/ExperienceDeleteDialog.tsx        |  2 +-
 src/lib/validators/user.profile.validator.ts  | 46 ++++------
 7 files changed, 22 insertions(+), 122 deletions(-)
 rename src/components/profile/{ProfileAboutMe.tsx => AboutMe.tsx} (100%)
 delete mode 100644 src/components/profile/AccountDeleteDialog.tsx

diff --git a/next.config.js b/next.config.js
index 69d5539f..376019e0 100644
--- a/next.config.js
+++ b/next.config.js
@@ -34,11 +34,7 @@ const nextConfig = {
       {
         protocol: 'https',
         hostname: 'www.example.com',
-      },
-      {
-        protocol: 'https',
-        hostname: 'devsharmapull.b-cdn.net', // Add your new domain here
-      },
+      }
     ],
   },
 };
diff --git a/prisma/seed.ts b/prisma/seed.ts
index 11397753..1856b278 100644
--- a/prisma/seed.ts
+++ b/prisma/seed.ts
@@ -12,7 +12,7 @@ import bcrypt from 'bcryptjs';
 const prisma = new PrismaClient();
 
 const users = [
-  { id: '1', name: 'Jack', email: 'user@gmail.com', username: 'jackcoder' },
+  { id: '1', name: 'Jack', email: 'user@gmail.com', username: 'jackcoder', role: Role.USER },
   {
     id: '2',
     name: 'Admin',
diff --git a/src/app/profile/[userId]/page.tsx b/src/app/profile/[userId]/page.tsx
index 9fe4e909..6384616f 100644
--- a/src/app/profile/[userId]/page.tsx
+++ b/src/app/profile/[userId]/page.tsx
@@ -1,6 +1,6 @@
 import { getUserDetailsWithId } from '@/actions/user.profile.actions';
 import Custom404Page from '@/app/[...404]/page';
-import ProfileAboutMe from '@/components/profile/ProfileAboutMe';
+import ProfileAboutMe from '@/components/profile/AboutMe';
 import ProfileEducation from '@/components/profile/ProfileEducation';
 import ProfileExperience from '@/components/profile/ProfileExperience';
 import ProfileHeroSection from '@/components/profile/ProfileHeroSection';
diff --git a/src/components/profile/ProfileAboutMe.tsx b/src/components/profile/AboutMe.tsx
similarity index 100%
rename from src/components/profile/ProfileAboutMe.tsx
rename to src/components/profile/AboutMe.tsx
diff --git a/src/components/profile/AccountDeleteDialog.tsx b/src/components/profile/AccountDeleteDialog.tsx
deleted file mode 100644
index c8964b7e..00000000
--- a/src/components/profile/AccountDeleteDialog.tsx
+++ /dev/null
@@ -1,86 +0,0 @@
-import { useState } from 'react';
-import { deleteExperience } from '@/actions/user.profile.actions';
-import {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogTitle,
-  AlertDialogTrigger,
-} from '@/components/ui/alert-dialog';
-import { Button } from '@/components/ui/button';
-import { Trash2 } from 'lucide-react';
-import { useToast } from '../ui/use-toast';
-
-export function ExperienceDeleteDialog({
-  experienceId,
-}: {
-  experienceId: number;
-}) {
-  const { toast } = useToast();
-  const [isOpen, setIsOpen] = useState(false);
-  const [isLoading, setIsLoading] = useState(false);
-
-  const handleContinueClick = async () => {
-    try {
-      setIsLoading(true);
-      const response = await deleteExperience(experienceId);
-
-      if (!response.status) {
-        toast({
-          title: response.message || 'Error',
-          variant: 'destructive',
-        });
-        return;
-      }
-
-      toast({
-        title: response.message,
-        variant: 'success',
-      });
-
-      setIsOpen(false);
-    } catch (_error) {
-      toast({
-        title: 'Something went wrong while deleting the resume',
-        description: 'Internal server error',
-        variant: 'destructive',
-      });
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
-  return (
-    <AlertDialog open={isOpen} onOpenChange={setIsOpen}>
-      <AlertDialogTrigger asChild>
-        <Button
-          className="bg-transparent p-0 b-0 hover:bg-transparent"
-          onClick={() => setIsOpen(true)}
-        >
-          <Trash2 width={16} height={16} className="text-[#C32518]" />
-        </Button>
-      </AlertDialogTrigger>
-      <AlertDialogContent>
-        <AlertDialogHeader>
-          <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
-          <AlertDialogDescription>
-            This action cannot be undone. This will delete your Accounts and all
-            the associated assets with it.
-          </AlertDialogDescription>
-        </AlertDialogHeader>
-        <AlertDialogFooter>
-          <AlertDialogCancel onClick={() => setIsOpen(false)}>
-            Cancel
-          </AlertDialogCancel>
-          <AlertDialogAction disabled={isLoading} onClick={handleContinueClick}>
-            {isLoading ? 'Please wait...' : 'Continue'}
-          </AlertDialogAction>
-        </AlertDialogFooter>
-      </AlertDialogContent>
-    </AlertDialog>
-  );
-}
diff --git a/src/components/profile/ExperienceDeleteDialog.tsx b/src/components/profile/ExperienceDeleteDialog.tsx
index 27caa874..c55cd570 100644
--- a/src/components/profile/ExperienceDeleteDialog.tsx
+++ b/src/components/profile/ExperienceDeleteDialog.tsx
@@ -68,7 +68,7 @@ export function ExperienceDeleteDialog({
         <AlertDialogHeader>
           <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
           <AlertDialogDescription>
-            This action cannot be undone. This will delete your Project.
+            This action cannot be undone. This will delete your Experience.
           </AlertDialogDescription>
         </AlertDialogHeader>
         <AlertDialogFooter>
diff --git a/src/lib/validators/user.profile.validator.ts b/src/lib/validators/user.profile.validator.ts
index 713d4106..5e35bd35 100644
--- a/src/lib/validators/user.profile.validator.ts
+++ b/src/lib/validators/user.profile.validator.ts
@@ -98,42 +98,32 @@ export const profileSchema = z.object({
     .max(255, { message: 'Description cannot exceed 255 characters' })
     .optional(),
   githubLink: z
-    .string({ message: 'Github Link is required' })
-    .url({ message: 'Invalid URL format' })
-    .refine((url) => url.startsWith('https://github.com/'), {
+    .string()
+    .refine((url) => url === '' || url.startsWith('https://github.com/'), {
       message: 'URL must be a GitHub link starting with "https://github.com/"',
-    })
-    .optional(),
+    }),
   portfolioLink: z
-    .string({ message: 'Portfolio Link is required' })
-    .url({ message: 'Invalid URL format' })
-    .refine((url) => url.startsWith('https://'), {
+    .string()
+    .refine((url) => url === '' || url.startsWith('https://'), {
       message: 'URL must start with "https"',
-    })
-    .optional(),
+    }),
   linkedinLink: z
-    .string({ message: 'Linkedin Link is required' })
-    .url({ message: 'Invalid URL format' })
-    .refine((url) => url.startsWith('https://linkedin.com/'), {
+    .string()
+    .refine((url) => url === '' || url.startsWith('https://linkedin.com/'), {
       message:
-        'URL must be a Linkedin link starting with "https://linkedin.com/"',
-    })
-    .optional(),
+        'URL must be a LinkedIn link starting with "https://linkedin.com/"',
+    }),
   twitterLink: z
-    .string({ message: 'Twitter Link is required' })
-    .url({ message: 'Invalid URL format' })
-    .refine((url) => url.startsWith('https://x.com/'), {
-      message: 'URL must be a Linkedin link starting with "https://x.com/"',
-    })
-    .optional(),
+    .string()
+    .refine((url) => url === '' || url.startsWith('https://x.com/'), {
+      message: 'URL must be a Twitter link starting with "https://x.com/"',
+    }),
   discordLink: z
-    .string({ message: 'Discord Link is required' })
-    .url({ message: 'Invalid URL format' })
-    .refine((url) => url.startsWith('https://discordapp.com/'), {
+    .string()
+    .refine((url) => url === '' || url.startsWith('https://discordapp.com/'), {
       message:
-        'URL must be a Linkedin link starting with "https://discordapp.com/"',
-    })
-    .optional(),
+        'URL must be a Discord link starting with "https://discordapp.com/"',
+    }),
 });
 
 export const profileResumeSchema = z.object({

From e44cf69043831f6f9003390d180d992ad47cac52 Mon Sep 17 00:00:00 2001
From: Dev Sharma <devsharmasoe@gmail.com>
Date: Thu, 31 Oct 2024 11:56:14 +0530
Subject: [PATCH 12/14] added share button + edge cases

---
 .../migration.sql                             |  11 ++
 prisma/schema.prisma                          |   2 -
 prisma/seed.ts                                |   5 +-
 src/actions/auth.actions.ts                   |   3 +-
 src/actions/user.profile.actions.ts           |   2 -
 src/components/comboBox.tsx                   |   5 +-
 src/components/profile/AboutMe.tsx            |   8 +-
 src/components/profile/ProfileEducation.tsx   |   4 +-
 src/components/profile/ProfileExperience.tsx  |   4 +-
 src/components/profile/ProfileHeroSection.tsx |  20 +--
 src/components/profile/ProfileProjects.tsx    |  58 ++++-----
 src/components/profile/ProfileShare.tsx       |  88 +++++++++++++
 .../ProfileEmptyContainers.tsx                |  10 +-
 .../profile/forms/EditProfileForm.tsx         |  21 +--
 src/components/profile/forms/ProjectForm.tsx  |  17 ++-
 src/components/profile/forms/ReadMeForm.tsx   |  12 +-
 src/components/profile/forms/SkillsForm.tsx   |  15 +--
 .../profile/profile-skills-combobox.tsx       | 122 ++++++++++++++++++
 src/components/profile/profileComboBox.tsx    | 109 ++++++++++++++++
 src/components/skills-combobox.tsx            |  65 +++++-----
 src/lib/auth.ts                               |   1 -
 src/lib/authOptions.ts                        |   1 -
 src/lib/validators/user.profile.validator.ts  |  12 +-
 src/types/user.types.ts                       |   1 -
 24 files changed, 452 insertions(+), 144 deletions(-)
 create mode 100644 prisma/migrations/20241031043344_username_remove/migration.sql
 create mode 100644 src/components/profile/ProfileShare.tsx
 create mode 100644 src/components/profile/profile-skills-combobox.tsx
 create mode 100644 src/components/profile/profileComboBox.tsx

diff --git a/prisma/migrations/20241031043344_username_remove/migration.sql b/prisma/migrations/20241031043344_username_remove/migration.sql
new file mode 100644
index 00000000..ee88353a
--- /dev/null
+++ b/prisma/migrations/20241031043344_username_remove/migration.sql
@@ -0,0 +1,11 @@
+/*
+  Warnings:
+
+  - You are about to drop the column `username` on the `User` table. All the data in the column will be lost.
+
+*/
+-- DropIndex
+DROP INDEX "User_username_key";
+
+-- AlterTable
+ALTER TABLE "User" DROP COLUMN "username";
diff --git a/prisma/schema.prisma b/prisma/schema.prisma
index 37185446..9d14ae77 100644
--- a/prisma/schema.prisma
+++ b/prisma/schema.prisma
@@ -38,8 +38,6 @@ model User {
   twitterLink    String?
   discordLink    String?
 
-  username       String @unique
-
   contactEmail   String?
 
   aboutMe        String?
diff --git a/prisma/seed.ts b/prisma/seed.ts
index 1856b278..352d9078 100644
--- a/prisma/seed.ts
+++ b/prisma/seed.ts
@@ -12,21 +12,19 @@ import bcrypt from 'bcryptjs';
 const prisma = new PrismaClient();
 
 const users = [
-  { id: '1', name: 'Jack', email: 'user@gmail.com', username: 'jackcoder', role: Role.USER },
+  { id: '1', name: 'Jack', email: 'user@gmail.com', role: Role.USER },
   {
     id: '2',
     name: 'Admin',
     email: 'admin@gmail.com',
     role: Role.ADMIN,
     onBoard: true,
-    username: 'admincoder',
   },
   {
     id: '3',
     name: 'Hr',
     email: 'hr@gmail.com',
     role: Role.HR,
-    username: 'hrcoder',
   },
 ];
 
@@ -334,7 +332,6 @@ async function seedUsers() {
             password: hashedPassword,
             role: u.role || Role.USER,
             emailVerified: new Date(),
-            username: u.username,
           },
         });
         console.log(`User created or updated: ${u.email}`);
diff --git a/src/actions/auth.actions.ts b/src/actions/auth.actions.ts
index 3a156ac7..9db6d30b 100644
--- a/src/actions/auth.actions.ts
+++ b/src/actions/auth.actions.ts
@@ -42,8 +42,7 @@ export const signUp = withServerActionAsyncCatcher<
     await prisma.$transaction(
       async (txn) => {
         const user = await txn.user.create({
-          // todo username
-          data: { ...data, password: hashedPassword, username: 'asdif' },
+          data: { ...data, password: hashedPassword },
         });
 
         const verificationToken = await txn.verificationToken.create({
diff --git a/src/actions/user.profile.actions.ts b/src/actions/user.profile.actions.ts
index 519c3504..f1a24e9e 100644
--- a/src/actions/user.profile.actions.ts
+++ b/src/actions/user.profile.actions.ts
@@ -369,7 +369,6 @@ export const getUserDetailsWithId = async (id: string) => {
         id: id,
       },
       select: {
-        username: true,
         name: true,
         id: true,
         skills: true,
@@ -419,7 +418,6 @@ export const updateUserDetails = withSession<
       },
       data: {
         name: data.name,
-        username: data.username,
         email: data.email,
         contactEmail: data.contactEmail,
         aboutMe: data.aboutMe,
diff --git a/src/components/comboBox.tsx b/src/components/comboBox.tsx
index 97f3a0df..aed07fae 100644
--- a/src/components/comboBox.tsx
+++ b/src/components/comboBox.tsx
@@ -43,9 +43,10 @@ export function Combobox({
           variant="outline"
           role="combobox"
           aria-expanded={open}
-          className="w-full justify-between border border-slate-200 dark:bg-gray-800 text-slate-500 rounded-[8px] dark:text-white"
+          className="w-full justify-between dark:bg-gray-800 border-none dark:text-white"
+          aria-label="skillset"
         >
-          Enter Skills
+          Search skillset ...
           <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
         </Button>
       </PopoverTrigger>
diff --git a/src/components/profile/AboutMe.tsx b/src/components/profile/AboutMe.tsx
index 8297d809..4c67013e 100644
--- a/src/components/profile/AboutMe.tsx
+++ b/src/components/profile/AboutMe.tsx
@@ -1,11 +1,11 @@
 'use client';
-import { FileText, Pencil } from 'lucide-react';
+import { SquareUserRound, Pencil } from 'lucide-react';
 import React, { useState } from 'react';
 import { Button } from '@/components/ui/button';
 import SheetWrapper from './sheets/SheetWrapper';
-import ReadMeForm from './forms/ReadMeForm';
 import { SHEETS } from '@/lib/constant/profile.constant';
 import ProfileEmptyContainers from './emptycontainers/ProfileEmptyContainers';
+import AboutMeForm from './forms/ReadMeForm';
 
 const ProfileAboutMe = ({
   aboutMe,
@@ -55,7 +55,7 @@ const ProfileAboutMe = ({
               ? 'Share a brief introduction to let companies know who you are.'
               : ''
           }
-          Icon={FileText}
+          Icon={SquareUserRound}
         />
       )}
       {aboutMe && (
@@ -70,7 +70,7 @@ const ProfileAboutMe = ({
           title={title}
           description={SHEETS.aboutMe.description}
         >
-          <ReadMeForm handleClose={handleClose} aboutMe={aboutMe} />
+          <AboutMeForm handleClose={handleClose} aboutMe={aboutMe} />
         </SheetWrapper>
       )}
     </>
diff --git a/src/components/profile/ProfileEducation.tsx b/src/components/profile/ProfileEducation.tsx
index 2bbb6a17..c9ddb673 100644
--- a/src/components/profile/ProfileEducation.tsx
+++ b/src/components/profile/ProfileEducation.tsx
@@ -1,5 +1,5 @@
 'use client';
-import { Circle, Info, Pencil, Plus } from 'lucide-react';
+import { Circle, BookOpenCheck, Pencil, Plus } from 'lucide-react';
 import React, { useState } from 'react';
 import { Button } from '../ui/button';
 import SheetWrapper from './sheets/SheetWrapper';
@@ -68,7 +68,7 @@ const ProfileEducation = ({
               ? 'Provide your education background to complete your profile.'
               : ''
           }
-          Icon={Info}
+          Icon={BookOpenCheck}
         />
       )}
       {education.length !== 0 && (
diff --git a/src/components/profile/ProfileExperience.tsx b/src/components/profile/ProfileExperience.tsx
index 097c9d38..a877d1c2 100644
--- a/src/components/profile/ProfileExperience.tsx
+++ b/src/components/profile/ProfileExperience.tsx
@@ -1,5 +1,5 @@
 'use client';
-import { Circle, Info, Pencil, Plus } from 'lucide-react';
+import { Circle, Building2, Pencil, Plus } from 'lucide-react';
 import React, { useState } from 'react';
 import { Button } from '../ui/button';
 import SheetWrapper from './sheets/SheetWrapper';
@@ -73,7 +73,7 @@ const ProfileExperience = ({
               ? 'Share your experience to attract the right companies.'
               : ''
           }
-          Icon={Info}
+          Icon={Building2}
         />
       )}
 
diff --git a/src/components/profile/ProfileHeroSection.tsx b/src/components/profile/ProfileHeroSection.tsx
index 30d5907d..71e7b6c4 100644
--- a/src/components/profile/ProfileHeroSection.tsx
+++ b/src/components/profile/ProfileHeroSection.tsx
@@ -2,7 +2,7 @@
 import React, { useState } from 'react';
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
 import { Button } from '@/components/ui/button';
-import { Pencil, Settings, Share2 } from 'lucide-react';
+import { Pencil, Settings, User } from 'lucide-react';
 import SheetWrapper from './sheets/SheetWrapper';
 import EditProfileForm from './forms/EditProfileForm';
 import { SHEETS } from '@/lib/constant/profile.constant';
@@ -10,6 +10,7 @@ import AccountSeetingForm from './forms/AccountSeetingForm';
 import { useSession } from 'next-auth/react';
 import { UserType } from '@/types/user.types';
 import ProfileSocials from './ProfileSocials';
+import { ProfileShareDialog } from './ProfileShare';
 
 const ProfileHeroSection = ({ userdetails }: { userdetails: UserType }) => {
   const [isSheetOpen, setIsSheetOpen] = useState<boolean>(false);
@@ -31,11 +32,17 @@ const ProfileHeroSection = ({ userdetails }: { userdetails: UserType }) => {
       <div className="border rounded-2xl  min-h-72 overflow-hidden">
         <div className="w-full h-32 bg-gradient-to-r from-blue-500 to-indigo-500"></div>
         <div className="p-6 relative flex-col flex gap-y-3">
-          <Avatar className="h-32 w-32 absolute -top-16">
+          <Avatar className="h-32 w-32 absolute -top-16 bg-slate-100 dark:bg-slate-900">
             {userdetails.avatar && (
               <AvatarImage src={userdetails.avatar} alt="@shadcn" />
             )}
-            <AvatarFallback>{userdetails.name[0]}</AvatarFallback>
+            <AvatarFallback>
+              <User
+                width={32}
+                height={32}
+                className="dark:text-slate-400 text-slate-500"
+              />
+            </AvatarFallback>
           </Avatar>
           <div className="w-full flex justify-end gap-2 h-10">
             {status === 'authenticated' && data.user.id === userdetails.id && (
@@ -54,17 +61,12 @@ const ProfileHeroSection = ({ userdetails }: { userdetails: UserType }) => {
                 >
                   <Settings height={16} width={16} />
                 </Button>
-                <Button variant={'outline'} className="px-3 py-2 rounded-sm">
-                  <Share2 height={16} width={16} />
-                </Button>
               </>
             )}
+            <ProfileShareDialog />
           </div>
           <div>
             <h2 className="text-4xl font-bold">{userdetails.name}</h2>
-            <a href="#" className="text-sm text-primary font-semibold">
-              @{userdetails.username}
-            </a>
           </div>
           <ProfileSocials userdetails={userdetails} />
         </div>
diff --git a/src/components/profile/ProfileProjects.tsx b/src/components/profile/ProfileProjects.tsx
index 7a60fb6e..f913238c 100644
--- a/src/components/profile/ProfileProjects.tsx
+++ b/src/components/profile/ProfileProjects.tsx
@@ -1,5 +1,5 @@
 'use client';
-import { ChevronDown, ChevronUp, Info, Plus } from 'lucide-react';
+import { ChevronDown, ChevronUp, FileStack, Plus } from 'lucide-react';
 import React, { useMemo, useState } from 'react';
 import { Button } from '@/components/ui/button';
 import SheetWrapper from './sheets/SheetWrapper';
@@ -38,13 +38,16 @@ const ProfileProjects = ({
     setIsSeeMore(!isSeeMore);
   };
 
-  const featuredProjects = useMemo(() => {
-    return projects.filter((project) => project.isFeature === true);
-  }, [projects]);
-
-  const nonFeaturedProjects = useMemo(() => {
-    return projects.filter((project) => project.isFeature === false);
-  }, [projects]);
+  const allProjects = useMemo(() => {
+    return projects
+      .filter((project) => {
+        if (!isSeeMore) {
+          return project.isFeature === true;
+        }
+        return true;
+      })
+      .sort((a, b) => Number(b.isFeature) - Number(a.isFeature));
+  }, [projects, isSeeMore]);
 
   const title = selectedProject
     ? SHEETS.project.title.replace('Add New', 'Edit')
@@ -65,7 +68,7 @@ const ProfileProjects = ({
         )}
       </div>
 
-      {featuredProjects.length === 0 && (
+      {projects.length === 0 && (
         <ProfileEmptyContainers
           isOwner={isOwner}
           buttonText="Add Your Projects"
@@ -80,33 +83,13 @@ const ProfileProjects = ({
               ? 'Showcase your projects to demonstrate your skills and expertise.'
               : ''
           }
-          Icon={Info}
+          Icon={FileStack}
         />
       )}
-      {featuredProjects.length !== 0 && !isSeeMore && (
+      {projects.length !== 0 && (
         <>
           <div className=" grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-x-6 gap-y-6 ">
-            {featuredProjects.map((project) => (
-              <ProfileProject
-                key={project.id}
-                project={project}
-                handleEditClick={handleEditClick}
-                isOwner={isOwner}
-              />
-            ))}
-          </div>
-          <Button
-            onClick={handleSeeMore}
-            className="dark:border-slate-800 px-3 bg-transparent hover:bg-transparent w-fit border py-2 text-base font-medium flex gap-2 rounded-[8px] border-slate-200 text-slate-500 dark:text-slate-400"
-          >
-            See more <ChevronDown height={16} width={16} />
-          </Button>
-        </>
-      )}
-      {projects.length !== 0 && isSeeMore && (
-        <>
-          <div className=" grid grid-cols-3 gap-x-6 gap-y-6 ">
-            {[...featuredProjects, ...nonFeaturedProjects].map((project) => (
+            {allProjects.map((project) => (
               <ProfileProject
                 key={project.id}
                 project={project}
@@ -119,7 +102,16 @@ const ProfileProjects = ({
             onClick={handleSeeMore}
             className="dark:border-slate-800 px-3 bg-transparent hover:bg-transparent w-fit border py-2 text-base font-medium flex gap-2 rounded-[8px] border-slate-200 text-slate-500 dark:text-slate-400"
           >
-            Hide <ChevronUp height={16} width={16} />
+            {isSeeMore
+              ? 'Hide'
+              : allProjects.length === 0
+                ? 'Show non featured projects'
+                : 'See More'}
+            {isSeeMore ? (
+              <ChevronUp height={16} width={16} />
+            ) : (
+              <ChevronDown height={16} width={16} />
+            )}
           </Button>
         </>
       )}
diff --git a/src/components/profile/ProfileShare.tsx b/src/components/profile/ProfileShare.tsx
new file mode 100644
index 00000000..ca1f7103
--- /dev/null
+++ b/src/components/profile/ProfileShare.tsx
@@ -0,0 +1,88 @@
+import React from 'react';
+import { Button } from '@/components/ui/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@/components/ui/dialog';
+import { Twitter, Linkedin, Share2, Copy } from 'lucide-react';
+import { useToast } from '../ui/use-toast';
+
+interface ShareOption {
+  name: string;
+  icon: React.ReactNode;
+  shareFunction: () => void;
+}
+
+export const ProfileShareDialog = () => {
+  const { toast } = useToast();
+
+  const shareOptions: ShareOption[] = [
+    {
+      name: 'Twitter',
+      icon: <Twitter className="h-5 w-5" />,
+      shareFunction: () => {
+        const text = encodeURIComponent(
+          `Check out my new profile at 100xdevs Job-Board: ${window.location.href}`
+        );
+        window.open(`https://twitter.com/intent/tweet?text=${text}`, '_blank');
+      },
+    },
+    {
+      name: 'LinkedIn',
+      icon: <Linkedin className="h-5 w-5" />,
+      shareFunction: () => {
+        const url = encodeURIComponent(window.location.href);
+        const title = encodeURIComponent('My New Profile');
+        const summary = encodeURIComponent(
+          `Excited to share my new profile on 100xdevs Job-Board! Check it out here: ${url} #JobSearch #Hiring #OpenToWork`
+        );
+        window.open(
+          `https://www.linkedin.com/sharing/share-offsite/?url=${url}&title=${title}&summary=${summary}`,
+          '_blank'
+        );
+      },
+    },
+    {
+      name: 'Copy',
+      icon: <Copy className="h-5 w-5" />,
+      shareFunction: () => {
+        window.navigator.clipboard.writeText(window.location.href);
+        toast({
+          variant: 'success',
+          description: 'Successfully copied the Profile Url.',
+        });
+      },
+    },
+  ];
+
+  return (
+    <Dialog>
+      <DialogTrigger asChild>
+        <Button variant={'outline'} className="px-3 py-2 rounded-sm">
+          <Share2 height={16} width={16} />
+        </Button>
+      </DialogTrigger>
+      <DialogContent className="sm:max-w-md">
+        <DialogHeader>
+          <DialogTitle>Share Job</DialogTitle>
+        </DialogHeader>
+        <div className="flex flex-col space-y-4">
+          {shareOptions.map((option) => (
+            <Button
+              key={option.name}
+              variant="outline"
+              className="w-full justify-start gap-2"
+              onClick={() => option.shareFunction()}
+            >
+              {option.icon}
+              {option.name === 'Copy' ? 'Copy Url' : `Share on ${option.name}`}
+            </Button>
+          ))}
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+};
diff --git a/src/components/profile/emptycontainers/ProfileEmptyContainers.tsx b/src/components/profile/emptycontainers/ProfileEmptyContainers.tsx
index 51d3401c..025caf44 100644
--- a/src/components/profile/emptycontainers/ProfileEmptyContainers.tsx
+++ b/src/components/profile/emptycontainers/ProfileEmptyContainers.tsx
@@ -18,10 +18,16 @@ const ProfileEmptyContainers = ({
 }) => {
   return (
     <div className="border rounded-2xl  h-80 overflow-hidden flex flex-col gap-y-4 px-6 items-center justify-center">
-      <Icon width={32} height={32} />
+      <Icon
+        width={32}
+        height={32}
+        className="dark:text-slate-400 text-slate-500"
+      />
       <div className="text-center">
         <h4 className="font-bold text-xl">{title}</h4>
-        <p className="text-sm font-medium text-gray-500">{description}</p>
+        <p className="text-sm font-medium text-slate-500 dark:text-slate-400">
+          {description}
+        </p>
       </div>
       {isOwner && (
         <Button onClick={handleClick} className="text-white rounded-sm">
diff --git a/src/components/profile/forms/EditProfileForm.tsx b/src/components/profile/forms/EditProfileForm.tsx
index 03a9b421..ae0380f5 100644
--- a/src/components/profile/forms/EditProfileForm.tsx
+++ b/src/components/profile/forms/EditProfileForm.tsx
@@ -42,10 +42,9 @@ const EditProfileForm = ({
     resolver: zodResolver(profileSchema),
     defaultValues: {
       aboutMe: userdetails.aboutMe || '',
-      username: userdetails.username || '',
       email: userdetails.email || '',
       contactEmail: userdetails.contactEmail || '',
-      avatar: userdetails.avatar || '/main.svg',
+      avatar: userdetails.avatar || '',
       name: userdetails.name || '',
       discordLink: userdetails.discordLink || '',
       linkedinLink: userdetails.linkedinLink || '',
@@ -127,6 +126,7 @@ const EditProfileForm = ({
     }
     setPreviewImg(null);
     setFile(null);
+    form.setValue('avatar', '');
   };
   const handleFileChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
     const selectedFile = e.target.files ? e.target.files[0] : null;
@@ -219,22 +219,7 @@ const EditProfileForm = ({
               </FormItem>
             )}
           />
-          <FormField
-            control={form.control}
-            name="username"
-            render={({ field }) => (
-              <FormItem>
-                <FormLabel>Username</FormLabel>
-                <FormControl>
-                  <Input
-                    placeholder="username"
-                    {...field}
-                    className="rounded-[8px]"
-                  />
-                </FormControl>
-              </FormItem>
-            )}
-          />
+
           <FormField
             control={form.control}
             name="email"
diff --git a/src/components/profile/forms/ProjectForm.tsx b/src/components/profile/forms/ProjectForm.tsx
index c14c757f..46238e2c 100644
--- a/src/components/profile/forms/ProjectForm.tsx
+++ b/src/components/profile/forms/ProjectForm.tsx
@@ -49,7 +49,7 @@ const ProjectForm = ({
   const onDrop = useCallback(
     (acceptedFiles: File[]) => {
       if (
-        acceptedFiles[0].size < 1024 * 1024 * 5 &&
+        acceptedFiles[0].size < 1024 * 1024 * 5 && //5mb
         acceptedFiles[0].type.includes('image')
       ) {
         setFiles(acceptedFiles[0]);
@@ -78,13 +78,13 @@ const ProjectForm = ({
     },
   });
 
-  // function onSubmit(values: ProfileProjectType) {
-  //   console.log(values)
-  // }
   async function onSubmit(data: ProfileProjectType) {
     try {
       if (file) {
-        data.projectThumbnail = await submitImage(file);
+        data.projectThumbnail = (await submitImage(file)) ?? '';
+      }
+      if (!previewImg) {
+        return;
       }
       let response;
       if (selectedProject?.id) {
@@ -123,6 +123,7 @@ const ProjectForm = ({
   const handleImageReset = () => {
     setFiles(null);
     setPreviewImg(null);
+    form.setValue('projectThumbnail', './main.svg');
   };
 
   return (
@@ -171,6 +172,12 @@ const ProjectForm = ({
                   />
                 )}
               </div>
+              <p className="text-red-700 text-xs">
+                {' '}
+                {!previewImg &&
+                  form.formState.errors.projectThumbnail?.message &&
+                  'Project Thumbnail is required.'}{' '}
+              </p>
             </div>
             <FormField
               control={form.control}
diff --git a/src/components/profile/forms/ReadMeForm.tsx b/src/components/profile/forms/ReadMeForm.tsx
index f592f6b9..8ef09697 100644
--- a/src/components/profile/forms/ReadMeForm.tsx
+++ b/src/components/profile/forms/ReadMeForm.tsx
@@ -6,6 +6,7 @@ import {
   FormDescription,
   FormField,
   FormItem,
+  FormMessage,
 } from '@/components/ui/form';
 import { Textarea } from '@/components/ui/textarea';
 import { useForm } from 'react-hook-form';
@@ -17,7 +18,7 @@ import {
 import { updateAboutMe } from '@/actions/user.profile.actions';
 import { useToast } from '@/components/ui/use-toast';
 
-const ReadMeForm = ({
+const AboutMeForm = ({
   handleClose,
   aboutMe,
 }: {
@@ -80,6 +81,7 @@ const ReadMeForm = ({
                   <FormDescription>
                     Describe yourself between 50 to 255 characters.
                   </FormDescription>
+                  <FormMessage />
                 </FormItem>
               )}
             />
@@ -98,7 +100,11 @@ const ReadMeForm = ({
               type="submit"
               className="mt-0 text-white rounded-[8px]"
             >
-              {form.formState.isSubmitting ? 'Please Wait...' : 'Add About Me'}
+              {form.formState.isSubmitting
+                ? 'Please Wait...'
+                : aboutMe
+                  ? 'Update About Me'
+                  : 'Add About Me'}
             </Button>
           </div>
         </form>
@@ -107,4 +113,4 @@ const ReadMeForm = ({
   );
 };
 
-export default ReadMeForm;
+export default AboutMeForm;
diff --git a/src/components/profile/forms/SkillsForm.tsx b/src/components/profile/forms/SkillsForm.tsx
index 2fd1afa2..2e9ad5c5 100644
--- a/src/components/profile/forms/SkillsForm.tsx
+++ b/src/components/profile/forms/SkillsForm.tsx
@@ -8,9 +8,8 @@ import {
 import { addUserSkills } from '@/actions/user.profile.actions';
 import { useToast } from '@/components/ui/use-toast';
 import { Form } from '@/components/ui/form';
-import { SkillsCombobox } from '@/components/skills-combobox';
-import { LoadingSpinner } from '@/components/loading-spinner';
 import { Button } from '@/components/ui/button';
+import { ProfileSkillsCombobox } from '../profile-skills-combobox';
 
 export const SkillsForm = ({
   handleClose,
@@ -21,7 +20,6 @@ export const SkillsForm = ({
 }) => {
   const [comboBoxSelectedValues, setComboBoxSelectedValues] =
     useState<string[]>(skills);
-  const [isLoading, setIsLoading] = useState<boolean>(false);
 
   const form = useForm<addSkillsSchemaType>({
     resolver: zodResolver(addSkillsSchema),
@@ -32,7 +30,6 @@ export const SkillsForm = ({
   const { toast } = useToast();
   const onSubmit = async (data: addSkillsSchemaType) => {
     try {
-      setIsLoading(true);
       const response = await addUserSkills(data);
       if (!response.status) {
         return toast({
@@ -53,7 +50,6 @@ export const SkillsForm = ({
         variant: 'destructive',
       });
     } finally {
-      setIsLoading(false);
       handleClose();
     }
   };
@@ -72,16 +68,11 @@ export const SkillsForm = ({
         className="flex h-full flex-col justify-between"
       >
         <div>
-          <SkillsCombobox
+          <ProfileSkillsCombobox
             comboBoxSelectedValues={comboBoxSelectedValues}
             setComboBoxSelectedValues={setComboBoxSelectedValues}
             form={form}
-          ></SkillsCombobox>
-          {isLoading && (
-            <div className="mt-4">
-              <LoadingSpinner />{' '}
-            </div>
-          )}
+          ></ProfileSkillsCombobox>
         </div>
         <div className="py-4 flex gap-4 justify-end">
           <Button
diff --git a/src/components/profile/profile-skills-combobox.tsx b/src/components/profile/profile-skills-combobox.tsx
new file mode 100644
index 00000000..ab1c7cfe
--- /dev/null
+++ b/src/components/profile/profile-skills-combobox.tsx
@@ -0,0 +1,122 @@
+import { useState } from 'react';
+import { Button } from '../ui/button';
+import { FormLabel } from '../ui/form';
+import { useDebounce } from '@uidotdev/usehooks';
+import { getBearerToken } from '@/actions/skills.cron';
+import React from 'react';
+import { UseFormReturn } from 'react-hook-form';
+import { JobPostSchemaType } from '@/lib/validators/jobs.validator';
+import _ from 'lodash';
+import { X } from 'lucide-react';
+import { addSkillsSchemaType } from '@/lib/validators/user.profile.validator';
+import { ProfileComboBox } from './profileComboBox';
+
+export function ProfileSkillsCombobox({
+  form,
+  comboBoxSelectedValues,
+  setComboBoxSelectedValues,
+}: {
+  comboBoxSelectedValues: string[];
+  form: UseFormReturn<JobPostSchemaType> | UseFormReturn<addSkillsSchemaType>;
+  setComboBoxSelectedValues: React.Dispatch<React.SetStateAction<string[]>>;
+}) {
+  const [comboBoxInputValue, setComboBoxInputValue] = useState('');
+  const [comboBoxLoading, setComboBoxLoading] = useState(false);
+  const [skillDropdownValues, setSkillDropdownValues] = useState<
+    {
+      value: string;
+      label: string;
+    }[]
+  >([{ value: '', label: '' }]);
+
+  const debouncedComboboxValues = useDebounce(comboBoxInputValue, 300);
+
+  async function fetchDropdownValues(searchTerm: string) {
+    setComboBoxLoading(true);
+    fetch(
+      `https://emsiservices.com/skills/versions/latest/skills?q=${searchTerm}&fields=name&limit=5`,
+      {
+        headers: {
+          Authorization: `Bearer ${await getBearerToken()}`,
+        },
+      }
+    )
+      .then((response) => {
+        if (!response.ok) {
+          throw new Error(`HTTP error! Status: ${response.status}`);
+        }
+        return response.json();
+      })
+      .then((data: { data: { name: string }[] }) => {
+        const dropdownValues = data.data.map((d) => {
+          return { value: d.name, label: d.name };
+        });
+        setSkillDropdownValues(dropdownValues);
+      })
+      .catch((error) => console.error('Error:', error))
+      .finally(() => {
+        setComboBoxLoading(false);
+      });
+  }
+
+  React.useEffect(() => {
+    !!debouncedComboboxValues.length
+      ? fetchDropdownValues(debouncedComboboxValues)
+      : fetchDropdownValues('javascript');
+  }, [debouncedComboboxValues]);
+
+  React.useEffect(() => {
+    (form as UseFormReturn<addSkillsSchemaType>).setValue(
+      'skills',
+      comboBoxSelectedValues
+    );
+  }, [comboBoxSelectedValues, form]);
+  return (
+    <>
+      <div className="flex flex-col gap-2">
+        <FormLabel className="font-medium">Skills</FormLabel>
+        <ProfileComboBox
+          comboBoxSelectedValues={comboBoxSelectedValues}
+          setComboBoxSelectedValues={setComboBoxSelectedValues}
+          setComboBoxInputValue={setComboBoxInputValue}
+          dropdownValues={skillDropdownValues}
+          isLoading={comboBoxLoading}
+        ></ProfileComboBox>
+      </div>
+      {comboBoxSelectedValues.length !== 0 && (
+        <div className="flex mt-3 flex-wrap gap-3 space-y-0 p-4 dark:bg-slate-900 bg-slate-100 rounded-[16px]">
+          {comboBoxSelectedValues.map((item, index) => (
+            <div key={index} className="flex items-csele space-y-0 group">
+              <div
+                className={`font-medium text-sm cursor-pointer flex items-center gap-1 text-center justify-start py-2 px-4 rounded-full borderpr-1 bg-slate-500 bg-opacity-10  dark:bg-opacity-10 text-slate-500  dark:text-slate-400 '}`}
+              >
+                {_.startCase(item.toLowerCase())}
+                {
+                  <Button
+                    className="p-0 h-fit bg-tranparent hover:bg-transparent"
+                    onClick={(e) => {
+                      e.preventDefault();
+                      setComboBoxSelectedValues((prev) => {
+                        const foundIndex = prev.findIndex(
+                          (val) => val === item
+                        );
+                        if (foundIndex >= 0) {
+                          const updatedComboBoxSelectedValues = [...prev];
+                          updatedComboBoxSelectedValues.splice(foundIndex, 1);
+                          return updatedComboBoxSelectedValues;
+                        }
+                        return prev;
+                      });
+                    }}
+                  >
+                    <X className="text-slate-500" size={15} />
+                  </Button>
+                }
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+    </>
+  );
+}
diff --git a/src/components/profile/profileComboBox.tsx b/src/components/profile/profileComboBox.tsx
new file mode 100644
index 00000000..16f0fdec
--- /dev/null
+++ b/src/components/profile/profileComboBox.tsx
@@ -0,0 +1,109 @@
+import * as React from 'react';
+import { Check, ChevronsUpDown } from 'lucide-react';
+
+import { cn } from '@/lib/utils';
+import { Button } from '@/components/ui/button';
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from '@/components/ui/command';
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@/components/ui/popover';
+import { LoadingSpinner } from '../loading-spinner';
+
+export type TcomboBoxValue = { value: string; label: string };
+
+export function ProfileComboBox({
+  dropdownValues,
+  setComboBoxInputValue,
+  isLoading,
+  setComboBoxSelectedValues,
+  comboBoxSelectedValues,
+}: {
+  comboBoxSelectedValues: string[];
+  isLoading: boolean;
+  setComboBoxInputValue: React.Dispatch<React.SetStateAction<string>>;
+  dropdownValues: TcomboBoxValue[];
+  setComboBoxSelectedValues: React.Dispatch<React.SetStateAction<string[]>>;
+}) {
+  const [open, setOpen] = React.useState(false);
+  const [value, setValue] = React.useState('');
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          variant="outline"
+          role="combobox"
+          aria-expanded={open}
+          className="w-full justify-between border border-slate-200 dark:bg-gray-800 text-slate-500 rounded-[8px] dark:text-white"
+        >
+          Enter Skills
+          <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="min-w-full p-0">
+        <Command>
+          <CommandInput
+            className="w-full"
+            onValueChange={(value) => {
+              setComboBoxInputValue(value);
+            }}
+            placeholder="Search skillset ..."
+          />
+          <CommandList>
+            {isLoading ? (
+              <CommandEmpty>
+                <LoadingSpinner></LoadingSpinner>
+              </CommandEmpty>
+            ) : (
+              <>
+                {!dropdownValues.length && (
+                  <CommandEmpty>No framework found.</CommandEmpty>
+                )}
+
+                <CommandGroup>
+                  {dropdownValues.map((item) => (
+                    <CommandItem
+                      key={item.value}
+                      value={item.value}
+                      onSelect={(currentValue) => {
+                        setValue(currentValue === value ? '' : currentValue);
+                        setOpen(false);
+                        setComboBoxSelectedValues((prev) => {
+                          const foundSelectedValueIndex = prev.findIndex(
+                            (val) => val === item.value
+                          );
+                          if (foundSelectedValueIndex < 0) {
+                            return [...prev, currentValue];
+                          } else return prev;
+                        });
+                      }}
+                    >
+                      <Check
+                        className={cn(
+                          'mr-2 h-4 w-4',
+                          comboBoxSelectedValues.includes(item.value)
+                            ? 'opacity-100'
+                            : 'opacity-0'
+                        )}
+                      />
+                      {item.label}
+                    </CommandItem>
+                  ))}
+                </CommandGroup>
+              </>
+            )}
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  );
+}
diff --git a/src/components/skills-combobox.tsx b/src/components/skills-combobox.tsx
index 53b3ed69..6977dfb8 100644
--- a/src/components/skills-combobox.tsx
+++ b/src/components/skills-combobox.tsx
@@ -74,7 +74,7 @@ export function SkillsCombobox({
   return (
     <>
       <div className="flex flex-col gap-2">
-        <FormLabel className="font-medium">Skills</FormLabel>
+        <FormLabel className="font-medium">Skills Required</FormLabel>
         <Combobox
           comboBoxSelectedValues={comboBoxSelectedValues}
           setComboBoxSelectedValues={setComboBoxSelectedValues}
@@ -83,40 +83,37 @@ export function SkillsCombobox({
           isLoading={comboBoxLoading}
         ></Combobox>
       </div>
-      {comboBoxSelectedValues.length !== 0 && (
-        <div className="flex mt-3 flex-wrap gap-3 space-y-0 p-4 dark:bg-slate-900 bg-slate-100 rounded-[16px]">
-          {comboBoxSelectedValues.map((item, index) => (
-            <div key={index} className="flex items-csele space-y-0 group">
-              <div
-                className={`font-medium text-sm cursor-pointer flex items-center gap-1 text-center justify-start py-2 px-4 rounded-full borderpr-1 bg-slate-500 bg-opacity-10  dark:bg-opacity-10 text-slate-500  dark:text-slate-400 '}`}
-              >
-                {_.startCase(item.toLowerCase())}
-                {
-                  <Button
-                    className="p-0 h-fit bg-tranparent hover:bg-transparent"
-                    onClick={(e) => {
-                      e.preventDefault();
-                      setComboBoxSelectedValues((prev) => {
-                        const foundIndex = prev.findIndex(
-                          (val) => val === item
-                        );
-                        if (foundIndex >= 0) {
-                          const updatedComboBoxSelectedValues = [...prev];
-                          updatedComboBoxSelectedValues.splice(foundIndex, 1);
-                          return updatedComboBoxSelectedValues;
-                        }
-                        return prev;
-                      });
-                    }}
-                  >
-                    <X className="text-slate-500" size={15} />
-                  </Button>
-                }
-              </div>
+
+      <div className="flex flex-wrap gap-2 space-y-0">
+        {comboBoxSelectedValues.map((item, index) => (
+          <div key={index} className="flex items-csele space-y-0 group">
+            <div
+              className={`font-medium text-xs cursor-pointer flex gap-1 text-center justify-start py-2 px-4 rounded-full borderpr-1 bg-blue-100 dark:bg-blue-500 dark:bg-opacity-10 bg-opacity-90 text-blue-700 dark:text-blue-400 border-blue-800 dark:border-blue-400 '}`}
+            >
+              {_.startCase(item.toLowerCase())}
+              {
+                <Button
+                  className="p-0 h-fit bg-tranparent"
+                  onClick={() => {
+                    setComboBoxSelectedValues((prev) => {
+                      const foundIndex = prev.findIndex((val) => val === item);
+                      if (foundIndex >= 0) {
+                        const updatedComboBoxSelectedValues = [...prev];
+                        updatedComboBoxSelectedValues.splice(foundIndex, 1);
+                        return updatedComboBoxSelectedValues;
+                      }
+                      return prev;
+                    });
+                  }}
+                  aria-label="x"
+                >
+                  <X className="text-white" size={15} />
+                </Button>
+              }
             </div>
-          ))}
-        </div>
-      )}
+          </div>
+        ))}
+      </div>
     </>
   );
 }
diff --git a/src/lib/auth.ts b/src/lib/auth.ts
index b6e19639..f5c44e4d 100644
--- a/src/lib/auth.ts
+++ b/src/lib/auth.ts
@@ -105,7 +105,6 @@ export const options = {
             email: email,
             password: hashedPassword,
             name: name,
-            username: 'random', // todo username
           },
           select: {
             id: true,
diff --git a/src/lib/authOptions.ts b/src/lib/authOptions.ts
index 5ed400bb..c34b5d0a 100644
--- a/src/lib/authOptions.ts
+++ b/src/lib/authOptions.ts
@@ -96,7 +96,6 @@ export const authOptions = {
               oauthProvider: 'GOOGLE',
               email: email as string,
               name: name as string,
-              username: 'ishadfoi', //to do
               avatar,
               isVerified: true,
               emailVerified: new Date(),
diff --git a/src/lib/validators/user.profile.validator.ts b/src/lib/validators/user.profile.validator.ts
index 5e35bd35..a9d36a90 100644
--- a/src/lib/validators/user.profile.validator.ts
+++ b/src/lib/validators/user.profile.validator.ts
@@ -83,15 +83,16 @@ export const aboutMeSchema = z.object({
   aboutMe: z
     .string()
     .min(50, { message: 'Description must be at least 50 characters' })
-    .max(255, { message: 'Description cannot exceed 255 characters' }),
+    .max(255, { message: 'Description cannot exceed 255 characters' })
+    .optional()
+    .or(z.literal('')),
 });
 
 export const profileSchema = z.object({
   avatar: z.string().optional(),
   name: z.string().min(1, 'Name is required'),
-  username: z.string().min(1, 'Username is required'),
   email: z.string().min(1, 'Email is required').email(),
-  contactEmail: z.string().email().optional(),
+  contactEmail: z.string().email().optional().or(z.literal('')),
   aboutMe: z
     .string()
     .min(50, { message: 'Description must be at least 50 characters' })
@@ -131,7 +132,7 @@ export const profileResumeSchema = z.object({
 });
 
 export const profileProjectSchema = z.object({
-  projectThumbnail: z.string().optional(),
+  projectThumbnail: z.string().min(1, 'Project Thumbnail is required.'),
   projectName: z.string().min(1, 'Project name is required'),
   projectSummary: z
     .string()
@@ -143,7 +144,8 @@ export const profileProjectSchema = z.object({
     .refine((url) => url.startsWith('https://'), {
       message: 'URL must be a https request',
     })
-    .optional(),
+    .optional()
+    .or(z.literal('')),
   projectGithub: z
     .string({ message: 'Github Link is required' })
     .url({ message: 'Invalid URL format' })
diff --git a/src/types/user.types.ts b/src/types/user.types.ts
index 54d92389..e0369982 100644
--- a/src/types/user.types.ts
+++ b/src/types/user.types.ts
@@ -38,7 +38,6 @@ export interface ExperienceType {
 
 export interface UserType {
   name: string;
-  username: string;
   id: string;
   email: string;
   skills: string[];

From c52ceb4d0e6d195a6dfac1f43aa172daf9ed563b Mon Sep 17 00:00:00 2001
From: Dev Sharma <devsharmasoe@gmail.com>
Date: Thu, 31 Oct 2024 12:04:50 +0530
Subject: [PATCH 13/14] fix error build

---
 src/actions/user.profile.actions.ts                     | 4 ++--
 src/components/user-multistep-form/add-project-form.tsx | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/actions/user.profile.actions.ts b/src/actions/user.profile.actions.ts
index f1a24e9e..fe7c33cd 100644
--- a/src/actions/user.profile.actions.ts
+++ b/src/actions/user.profile.actions.ts
@@ -9,7 +9,7 @@ import {
   ProfileProjectType,
   profileSchema,
   ProfileSchemaType,
-  // projectSchemaType,
+  projectSchemaType,
   UserProfileSchemaType,
 } from '@/lib/validators/user.profile.validator';
 import bcryptjs from 'bcryptjs';
@@ -228,7 +228,7 @@ export const addUserEducation = withServerActionAsyncCatcher<
 });
 
 export const addUserProjects = withServerActionAsyncCatcher<
-  ProfileProjectType,
+  projectSchemaType,
   ServerActionReturnType
 >(async (data) => {
   const auth = await getServerSession(authOptions);
diff --git a/src/components/user-multistep-form/add-project-form.tsx b/src/components/user-multistep-form/add-project-form.tsx
index ad1bfabb..16a33936 100644
--- a/src/components/user-multistep-form/add-project-form.tsx
+++ b/src/components/user-multistep-form/add-project-form.tsx
@@ -120,7 +120,7 @@ export const AddProject = () => {
       setIsLoading(true);
       data.projectThumbnail = (await submitImage(file)) ?? '';
       // todo isFeature
-      const response = await addUserProjects({ ...data, isFeature: false });
+      const response = await addUserProjects({ ...data });
       if (!response.status) {
         return toast({
           title: response.message || 'Error',

From 5b9f388ad2f437fcceaabb4331097eb023094786 Mon Sep 17 00:00:00 2001
From: Dev Sharma <devsharmasoe@gmail.com>
Date: Thu, 31 Oct 2024 12:21:04 +0530
Subject: [PATCH 14/14] fix conflicts and build

---
 .../20241031064849_company/migration.sql      | 26 +++++++++++++++++++
 src/actions/user.profile.actions.ts           |  7 ++---
 2 files changed, 30 insertions(+), 3 deletions(-)
 create mode 100644 prisma/migrations/20241031064849_company/migration.sql

diff --git a/prisma/migrations/20241031064849_company/migration.sql b/prisma/migrations/20241031064849_company/migration.sql
new file mode 100644
index 00000000..13bf066d
--- /dev/null
+++ b/prisma/migrations/20241031064849_company/migration.sql
@@ -0,0 +1,26 @@
+/*
+  Warnings:
+
+  - A unique constraint covering the columns `[companyId]` on the table `User` will be added. If there are existing duplicate values, this will fail.
+
+*/
+-- AlterTable
+ALTER TABLE "User" ADD COLUMN     "companyId" TEXT,
+ADD COLUMN     "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP;
+
+-- CreateTable
+CREATE TABLE "Company" (
+    "id" TEXT NOT NULL,
+    "companyName" TEXT NOT NULL,
+    "companyLogo" TEXT,
+    "companyEmail" TEXT NOT NULL,
+    "companyBio" TEXT NOT NULL,
+
+    CONSTRAINT "Company_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateIndex
+CREATE UNIQUE INDEX "User_companyId_key" ON "User"("companyId");
+
+-- AddForeignKey
+ALTER TABLE "User" ADD CONSTRAINT "User_companyId_fkey" FOREIGN KEY ("companyId") REFERENCES "Company"("id") ON DELETE SET NULL ON UPDATE CASCADE;
diff --git a/src/actions/user.profile.actions.ts b/src/actions/user.profile.actions.ts
index 8f48915d..e4e1219b 100644
--- a/src/actions/user.profile.actions.ts
+++ b/src/actions/user.profile.actions.ts
@@ -362,7 +362,6 @@ export const getUserDetails = async () => {
   }
 };
 
-
 export const getUserDetailsWithId = async (id: string) => {
   try {
     const res = await prisma.user.findFirst({
@@ -622,7 +621,10 @@ export const deleteEducation = async (educationId: number) => {
     });
     revalidatePath(`/newProfile/${auth.user.id}`);
     return new SuccessResponse('Project Deleted Successfully', 200).serialize();
-
+  } catch (_error) {
+    return new ErrorHandler('Internal server error', 'DATABASE_ERROR');
+  }
+};
 export const getUserRecruiters = async () => {
   const auth = await getServerSession(authOptions);
 
@@ -654,7 +656,6 @@ export const getUserRecruiters = async () => {
     return new SuccessResponse('Recruiter SuccessFully Fetched', 200, {
       recruiters: res,
     }).serialize();
-
   } catch (_error) {
     return new ErrorHandler('Internal server error', 'DATABASE_ERROR');
   }