EMPLOYER PROFILE PAGE (#204)

* feat: employer profile page

* fix: added the use client keyword

* fix: routing

src/app/dashboard/employer/components/employer-sidebar.tsx

@@ -52,7 +52,7 @@ export function Sidebar() {
             />
           </div>
           <div>
-            <h2 className="font-semibold">Air Peace</h2>
+            <h2 className="font-semibold">The Buidl</h2>
           </div>
           <ChevronDown className="absolute right-3" size={20} color="#BABABA" />
         </div>
@@ -84,7 +84,7 @@ export function Sidebar() {
             onClick={() => onSectionChange("notifications")}
           />
 
-          <ChatBotButton/>
+          <ChatBotButton />
         </nav>
       </div>
     </aside>

src/app/dashboard/employer/page.tsx

@@ -5,6 +5,7 @@ import { useContext } from "react";
 import { DashBoardContext } from "@/app/useContext/dashboardContext";
 import JobOpening from "./job-openings/job-openings";
 import Notifications from "./notifications/notifications";
+import Profile from "./profile/profile";
 
 function Page() {
   const { activeSection } = useContext(DashBoardContext);
@@ -17,6 +18,8 @@ function Page() {
         return <JobOpening />;
       case "notifications":
         return <Notifications />;
+      case "profile":
+        return <Profile />;
 
       default:
         return <EmployerDashboard />;

src/app/dashboard/employer/profile/components/Dropdown.tsx

@@ -0,0 +1,18 @@
+import { Bookmark, SendHorizonal } from "lucide-react";
+import React from "react";
+
+export default function Dropdown() {
+  return (
+    <div className="absolute right-0 -top-20 p-2 mt-2 w-40 bg-[#101110] text-white border border-gray-700 rounded-md shadow-lg">
+      <button className="flex items-center space-x-2 px-4 py-2 w-full text-left">
+        <Bookmark size={16} />
+        <span>Save</span>
+      </button>
+      <div className="border-t border-gray-700"></div>
+      <button className="flex items-center space-x-2 px-4 py-2 w-full text-left">
+        <SendHorizonal size={16} />
+        <span>Share</span>
+      </button>
+    </div>
+  );
+}

src/app/dashboard/employer/profile/components/EditOverviewForm.tsx

@@ -0,0 +1,59 @@
+import { CirclePlus } from "lucide-react";
+import FormInput from "./FormInput";
+
+export default function EditOverviewForm() {
+  return (
+    <form>
+      <div className="space-y-5">
+        <FormInput
+          title="Company Name"
+          id="companyName"
+          placeholder="Enter Your Company name"
+        />
+        <FormInput
+          title="Company Size"
+          id="companySize"
+          placeholder="Enter Your Company size"
+        />
+
+        <FormInput
+          title="Industy"
+          id="industry"
+          placeholder="Enter the industry your company falls under"
+        />
+
+        <div className="flex flex-col gap-y-1">
+          <label htmlFor="aboutCompany" className="text-[#BBBBBB] space-x-1">
+            <span>About</span>
+            <span className="text-red-500">*</span>
+          </label>
+          <textarea
+            name="aboutCompany"
+            id="aboutCompany"
+            placeholder="Write about your company here"
+            className="bg-transparent w-full h-32 outline-none border border-[#252625] p-2 rounded-md resize-none"
+          ></textarea>
+          <p className="text-sm text-[#BBBBBB]">
+            For the best help, share details, steps tried, and error
+            screenshots.
+          </p>
+        </div>
+        <div>
+          <p className="text-sm text-[#9596A0]">
+            Values (asides from the skills, select attributes the company hold
+            in high esteem)
+          </p>
+          <button className="flex justify-center items-center space-x-1 w-full p-2 border border-[#252625] rounded-md">
+            <span className="text-[#A8C789]">
+              <CirclePlus />
+            </span>
+            <span className="text-[#696969]">Add Value</span>
+          </button>
+        </div>
+        <button className="rounded-md w-full p-2 bg-primary text-black mt-3">
+          Save
+        </button>
+      </div>
+    </form>
+  );
+}

src/app/dashboard/employer/profile/components/FormInput.tsx

@@ -0,0 +1,34 @@
+import { cn } from "@/lib/utils";
+
+interface FormInputProps {
+  id: string;
+  title: string;
+  placeholder: string;
+  className?: string;
+}
+
+export default function FormInput({
+  id,
+  title,
+  placeholder,
+  className,
+}: FormInputProps) {
+  return (
+    <div className="flex flex-col gap-y-1">
+      <label htmlFor={id} className="text-[#BBBBBB] space-x-1">
+        <span>{title}</span>
+        <span className="text-red-500">*</span>
+      </label>
+      <input
+        type="text"
+        name={id}
+        id={id}
+        placeholder={placeholder}
+        className={cn(
+          "bg-transparent w-full outline-none border border-[#252625] p-2  rounded-md",
+          className
+        )}
+      />
+    </div>
+  );
+}

src/app/dashboard/employer/profile/components/JobItem.tsx

@@ -0,0 +1,71 @@
+"use client";
+
+import { Pencil, EllipsisVertical } from "lucide-react";
+import Separator from "./Separator";
+import { cn } from "@/lib/utils";
+import { useState } from "react";
+import Dropdown from "./Dropdown";
+
+interface JobItemProps {
+  onOpenModal: (section: string) => void;
+  isUser: boolean;
+}
+
+export default function JobItem({ onOpenModal, isUser }: JobItemProps) {
+  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+  return (
+    <div className="mb-5">
+      <div className="flex relative items-center justify-between py-4 border-b border-[#313130]">
+        <div>
+          <p className="text-grayText font-medium text-lg">
+            Front-End Developer
+          </p>
+          <p className="text-sm text-[#999999]">Required skills: JavaScript</p>
+          <p className="text-sm text-[#999999] flex items-center space-x-2">
+            <span>3 days ago</span>
+            <Separator />
+            <span>4 applicants</span>
+          </p>
+        </div>
+        <button
+          className={cn(
+            isUser ? "flex" : "hidden",
+            "text-grayText items-center space-x-2"
+          )}
+          onClick={() => onOpenModal("Job Opening")}
+        >
+          <span>
+            <Pencil size={14} />
+          </span>
+          <span className="uppercase">Edit</span>
+        </button>
+
+        <button
+          className={cn(isUser && "hidden", "text-grayText")}
+          onClick={() => setIsDropdownOpen(!isDropdownOpen)}
+        >
+          <EllipsisVertical />
+        </button>
+        {isDropdownOpen && <Dropdown />}
+      </div>
+      <div className="mt-3 space-y-2">
+        <p className="text-[#D9D9D9]">
+          We are seeking a highly skilled and detail-oriented Quality Assurance
+          Manager to lead and manage our QA team. In this role, you will be
+          responsible for ensuring that our products and services meet the
+          highest standards of quality and reliability. You will develop and
+          implement quality assurance strategies, oversee testing processes, and
+          collaborate with cross-functional teams to drive continuous
+          improvement. As the Quality Assurance Manager, you will play a
+          critical role in maintaining customer satisfaction and upholding the
+          company’s reputation for excellence. This position requires strong
+          leadership, analytical, and problem-solving skills, as well as a deep
+          understanding of QA methodologies and best practices.
+        </p>
+        <button className="border border-[#696969] py-2 px-5 text-grayText">
+          More
+        </button>
+      </div>
+    </div>
+  );
+}

src/app/dashboard/employer/profile/components/JobOpenings.tsx

@@ -0,0 +1,29 @@
+import { Plus } from "lucide-react";
+import JobItem from "./JobItem";
+import { cn } from "@/lib/utils";
+
+interface JobOpeningProps {
+  onOpenModal: (section: string) => void;
+  isUser: boolean;
+}
+
+export default function JobOpenings({ onOpenModal, isUser }: JobOpeningProps) {
+  return (
+    <div>
+      <div className="flex justify-between items-center py-4 border-b border-[#313130]">
+        <p className="font-semibold text-2xl">Job Openings</p>
+        <button
+          className={cn(
+            isUser ? "flex" : "hidden",
+            "text-grayText items-center space-x-2"
+          )}
+          onClick={() => onOpenModal("Job Opening")}
+        >
+          <Plus size={20} />
+        </button>
+      </div>
+      <JobItem onOpenModal={onOpenModal} isUser={isUser} />
+      <JobItem onOpenModal={onOpenModal} isUser={isUser} />
+    </div>
+  );
+}

src/app/dashboard/employer/profile/components/JobOpeningsForm.tsx

@@ -0,0 +1,64 @@
+import { CirclePlus } from "lucide-react";
+import FormInput from "./FormInput";
+
+export default function JobOpeningsForm() {
+  return (
+    <form>
+      <div className="space-y-5">
+        <FormInput
+          title="Job Title"
+          id="jobTitle"
+          placeholder="eg Quality Assurance Manager"
+        />
+
+        <FormInput title="Job Type" id="jobType" placeholder="eg Hybrid" />
+        <FormInput title="Level" id="level" placeholder="eg Senior Level" />
+        <FormInput
+          title="Deadline"
+          id="deadline"
+          placeholder="input delivery deadline"
+        />
+
+        <div className="flex flex-col gap-y-1">
+          <label htmlFor="description" className="text-[#BBBBBB] space-x-1">
+            <span>Description</span>
+            <span className="text-red-500">*</span>
+          </label>
+          <textarea
+            name="description"
+            id="description"
+            placeholder="Give a description of the project"
+            className="bg-transparent w-full outline-none border border-[#252625] p-2 rounded-md resize-none"
+          ></textarea>
+        </div>
+        <FormInput
+          title="Key Responsibilities"
+          id="responsibilities"
+          placeholder="Input the key responsibilities that will be handled in this role"
+          className="border-none"
+        />
+        <FormInput
+          title="Minimium Requirements"
+          id="requirements"
+          placeholder="Input minimum requirements for this role"
+        />
+        <div className="space-y-3">
+          <FormInput
+            title="Skills (input all the required skills for this role)"
+            id="skills"
+            placeholder="eg Typescript"
+          />
+          <button className="flex justify-center items-center space-x-1 w-full p-2 border border-[#252625] rounded-md">
+            <span className="text-[#A8C789]">
+              <CirclePlus />
+            </span>
+            <span className="text-[#696969]">Add Skill</span>
+          </button>
+        </div>
+        <button className="rounded-md w-full p-2 bg-primary text-black mt-3">
+          Post
+        </button>
+      </div>
+    </form>
+  );
+}

src/app/dashboard/employer/profile/components/Modal.tsx

@@ -0,0 +1,38 @@
+import { MoveLeft, X } from "lucide-react";
+import EditOverviewForm from "./EditOverviewForm";
+import JobOpeningsForm from "./JobOpeningsForm";
+
+interface ModalProps {
+  activeSection: string | null;
+  onCloseModal: () => void;
+}
+
+export default function Modal({ activeSection, onCloseModal }: ModalProps) {
+  return (
+    <div
+      className="fixed inset-0 bg-black/70 flex justify-center items-center py-5 overflow-auto"
+      onClick={onCloseModal}
+    >
+      <div
+        className="bg-[#161716] border border-[#1D1D1C] rounded-md p-5 w-full md:w-[70%] max-h-[90vh] overflow-y-auto"
+        style={{ scrollbarWidth: "none" }}
+        onClick={(e) => e.stopPropagation()}
+      >
+        <div className="flex justify-between items-center py-4 border-b border-[#313130]">
+          <p className="flex items-center space-x-2">
+            <span className="cursor-pointer" onClick={onCloseModal}>
+              <MoveLeft size={18} />
+            </span>
+            <span>Edit {activeSection}</span>
+          </p>
+          <X onClick={onCloseModal} className="cursor-pointer" />
+        </div>
+
+        <div className="mt-3">
+          {activeSection === "Overview" && <EditOverviewForm />}
+          {activeSection === "Job Opening" && <JobOpeningsForm />}
+        </div>
+      </div>
+    </div>
+  );
+}