Fixed build issues

src/components/Auth/SigninWithPassword.tsx

@@ -2,49 +2,64 @@
 import { PasswordIcon, UserIcon } from "@/assets/icons";
 
 import InputGroup from "../FormElements/InputGroup";
-import { Controller, SubmitHandler, useForm } from "react-hook-form";
+import { SubmitHandler, useForm } from "react-hook-form";
 import { ILoginCredentials } from "@/lib/api";
 import { useLoginQuery } from "@/hooks/queries";
+import { useRef, useState } from "react";
+
+import { FormErrorMessages } from "@/constants/Texts";
 
 export default function SigninWithPassword() {
-  const { handleSubmit, control, reset } = useForm<ILoginCredentials>();
+  const [passwordFieldInputType, setPasswordFieldInputType] = useState<
+    "password" | "text"
+  >("password");
+  const { handleSubmit, control, reset, register } =
+    useForm<ILoginCredentials>();
   const { mutate, isPending } = useLoginQuery();
+  const passwordInputRef = useRef<HTMLInputElement>(null);
   const onSubmit: SubmitHandler<ILoginCredentials> = (data) => {
     mutate(data);
     reset();
   };
-
   return (
     <form onSubmit={handleSubmit(onSubmit)}>
-      <Controller
+      <InputGroup
+        type="username"
+        {...register("username", {
+          required: {
+            value: true,
+            message: FormErrorMessages.required,
+          },
+        })}
+        label="Username"
+        className="mb-4 [&_input]:py-[15px]"
+        placeholder="Enter your Username"
         name="username"
-        control={control}
-        render={({ field: username }) => (
-          <InputGroup
-            type="username"
-            handleChange={(value) => username.onChange(value)}
-            label="Username"
-            className="mb-4 [&_input]:py-[15px]"
-            placeholder="Enter your Username"
-            name="username"
-            icon={<UserIcon />}
-          />
-        )}
+        icon={<UserIcon />}
       />
-      <Controller
+
+      <InputGroup
+        type={passwordFieldInputType}
+        {...register("password", {
+          required: {
+            value: true,
+            message: FormErrorMessages.required,
+          },
+        })}
+        label="Password"
+        className="mb-5 [&_input]:py-[15px]"
+        placeholder="Enter your password"
         name="password"
-        control={control}
-        render={({ field: password }) => (
-          <InputGroup
-            type="password"
-            handleChange={(value) => password.onChange(value)}
-            label="Password"
-            className="mb-5 [&_input]:py-[15px]"
-            placeholder="Enter your password"
-            name="password"
-            icon={<PasswordIcon />}
+        icon={
+          <PasswordIcon
+            className="cursor-pointer"
+            onClick={() => {
+              setPasswordFieldInputType(
+                passwordFieldInputType === "password" ? "text" : "password",
+              );
+            }}
           />
-        )}
+        }
       />
 
       <div className="mb-4.5">
@@ -53,9 +68,6 @@ export default function SigninWithPassword() {
           className="flex w-full cursor-pointer items-center justify-center gap-2 rounded-lg bg-primary p-4 font-medium text-white transition hover:bg-opacity-90"
         >
           Sign In
-          {/* {loading && (
-            <span className="inline-block h-4 w-4 animate-spin rounded-full border-2 border-solid border-white border-t-transparent dark:border-primary dark:border-t-transparent" />
-          )} */}
         </button>
       </div>
     </form>

src/components/Layouts/header/user-info/index.tsx

@@ -11,10 +11,11 @@ import Image from "next/image";
 import Link from "next/link";
 import { useState } from "react";
 import { LogOutIcon, SettingsIcon, UserIcon } from "./icons";
+import { useUser } from "@/contexts";
 
 export function UserInfo() {
   const [isOpen, setIsOpen] = useState(false);
-
+  const { logout } = useUser();
   const USER = {
     name: "John Smith",
     email: "johnson@nextadmin.com",
@@ -106,7 +107,11 @@ export function UserInfo() {
         <div className="p-2 text-base text-[#4B5563] dark:text-dark-6">
           <button
             className="flex w-full items-center gap-2.5 rounded-lg px-2.5 py-[9px] hover:bg-gray-2 hover:text-dark dark:hover:bg-dark-3 dark:hover:text-white"
-            onClick={() => setIsOpen(false)}
+            onClick={() => {
+              setIsOpen(false);
+              logout();
+
+            }}
           >
             <LogOutIcon />
 

src/components/Layouts/sidebar/index.tsx

@@ -41,7 +41,7 @@ export function Sidebar() {
         });
       });
     });
-  }, [pathname]);
+  }, [pathname, expandedItems]);
 
   return (
     <>

src/components/Tables/companies/index.tsx

@@ -50,11 +50,14 @@ const CompaniesTable = ({}: IProps) => {
         </TableHeader>
 
         <TableBody>
-          {allCompanies.map((company) =>
+          {allCompanies.map((company, index) =>
             !company ? (
-              <h6>No Data was Found</h6>
+              <h6 key={index}>No Data was Found</h6>
             ) : (
-              <TableRow key={company.id} className="odd:bg-gray-2 dark:odd:bg-gray-7">
+              <TableRow
+                key={company.id}
+                className="odd:bg-gray-2 dark:odd:bg-gray-7"
+              >
                 <TableHead className="text-start" colSpan={100}>
                   {company.name}
                 </TableHead>

src/components/Tables/customers/index.tsx

@@ -46,8 +46,8 @@ const CustomersTable = () => {
           </TableRow>
         </TableHeader>
         <TableBody>
-          {allCustomers.map((customer, index) => (
-            <TableRow key={index}>
+          {allCustomers.map((customer) => (
+            <TableRow key={customer.id}>
               <TableCell colSpan={100}>{customer.full_name}</TableCell>
               <TableCell colSpan={100}>{customer.email}</TableCell>
               <TableCell colSpan={100}>{customer.created_at}</TableCell>
@@ -55,7 +55,9 @@ const CustomersTable = () => {
               <TableCell colSpan={100}>{customer.status}</TableCell>
               <TableCell colSpan={100}>
                 {customer.companies?.length ? (
-                  customer.companies.map((c) => <span>{c.name}, </span>)
+                  customer.companies.map((c) => (
+                    <span key={c.id}>{c.name}, </span>
+                  ))
                 ) : (
                   <span>None</span>
                 )}

src/components/Tables/tenders/index.tsx

@@ -33,8 +33,10 @@ const TendersTable = () => {
         </TableHeader>
 
         <TableBody>
-          {allTenders.map((item) => {
-            return (
+          {allTenders.map((item, index) =>
+            !item ? (
+              <h6 key={index}>No tenders were found</h6>
+            ) : (
               <TableRow
                 key={item.id}
                 className="odd:bg-gray-2 dark:odd:bg-gray-7"
@@ -49,8 +51,8 @@ const TendersTable = () => {
                   {item.status}
                 </TableCell>
               </TableRow>
-            );
-          })}
+            ),
+          )}
         </TableBody>
       </Table>
     </div>

src/components/Tables/tenders/useTenderListPresenter.ts

@@ -49,11 +49,11 @@ const useTenderListPresenter = () => {
   const handleFilterChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     setSearch(e.target.value);
   };
-  const onConfirmDelete = () => {
-    if (currentTender) {
-      deleteTender(currentTender.id);
-    }
-  };
+  // const onConfirmDelete = () => {
+  //   if (currentTender) {
+  //     deleteTender(currentTender.id);
+  //   }
+  // };
 
   const allTenders = data?.pages.flatMap((page) => page.data.tenders) ?? [];
   return {
@@ -61,7 +61,6 @@ const useTenderListPresenter = () => {
     setCurrentTender,
     search,
     handleFilterChange,
-    onConfirmDelete,
     allTenders,
     error,
     isPending,