Fix type checking issues

app/dashboard/DashboardClient.tsx

@@ -1,5 +1,5 @@
 "use client"
-import { useEffect } from "react"
+import { useEffect, useState } from "react"
 import { useSession } from "next-auth/react"
 import { fetchInvoices } from "@/lib/fetchInvoices"
 import { fetchProjects } from "@/lib/fetchProjects"
@@ -15,6 +15,14 @@ export default function DashboardPage() {
   const role = session?.user?.role
   const username = session?.user?.name
 
+  // TODO: The data is now set correctly to avoid runtime errors if hit, but the use of the data itself may be plausible to review
+  const [completedProject, setCompletedProject] = useState()
+  const [pendingProject, setPendingProject] = useState()
+  const [clientName, setClientName] = useState()
+  const [data, setData] = useState()
+  const [loading, setLoading] = useState(true)
+  const [totalEarn, setTotalEarn] = useState()
+
   useEffect(() => {
     if (session && role == "Sales2") {
       fetchProjects()
@@ -41,9 +49,9 @@ export default function DashboardPage() {
               }
             })
 
-            setcompletedproject(completedproject)
-            setclientName(uniqueClientNames)
-            setpendingProject(pendingProjects)
+            setCompletedProject(completedproject)
+            setClientName(uniqueClientNames)
+            setPendingProject(pendingProjects)
             setData(filteredData)
             setLoading(false)
           }
@@ -67,7 +75,7 @@ export default function DashboardPage() {
               0
             )
 
-            settotalEarn(total)
+            setTotalEarn(total)
           }
         })
         .catch((error) => {

components/CropImage.tsx

@@ -28,8 +28,8 @@ const CropImage = ({file,setResult}) => {
         getCroppedImg(image, crop, 'profile.jpeg')
       }
     }
-  
-    const getCroppedImg = () => {
+
+    const getCroppedImg = (image, crop, fileName) => {
       if (image && crop) {
         const canvas = document.createElement('canvas');
         const scaleX = image.naturalWidth / image.width;

components/Editinvoice.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import React, { useEffect, useState } from "react"
+import React, { FormEvent, useEffect, useState } from "react"
 import { useRouter } from "next/navigation"
 import { format } from "date-fns"
 import {

components/InvoiceTable.tsx

@@ -313,7 +313,7 @@ export default function InvoiceTable(props) {
         <h1>loading</h1>
       </>
     )
-  }
+  } else {
   return (
     <div className="w-full">
       <div>
@@ -391,5 +391,6 @@ export default function InvoiceTable(props) {
         </div>
       </div> */}
     </div>
-  )
+    )
+  }
 }

components/SalesTable.tsx

@@ -65,7 +65,7 @@ const handleSalesRowClick = (salesPerson) => {
   window.location.href = `/sales/${salesPerson}`
 }
 
-const columns: ColumnDef<Projects>[] = [
+const columns = [
   {
     accessorKey: "name",
     header: ({ column }) => {

components/SellerList.tsx

@@ -60,13 +60,15 @@ export default function SellerList(props) {
         <div className="flex items-center justify-between">
           <div className="w-5/12">
             <h4 className="block py-5 text-2xl font-semibold text-left text-black">
-              {name && (
-                <div>
-                  Sales People Under
-                  <span className="capitalize">{decodeURIComponent(name)}</span>
-                </div>
-              )}
-              {!name && <>Manage Sales People</>}
+              <>
+                {name && (
+                  <div>
+                    Sales People Under
+                    <span className="capitalize">{decodeURIComponent(name)}</span>
+                  </div>
+                )}
+                {!name && <>Manage Sales People</>}
+              </>
             </h4>
           </div>
           <div className="flex items-center justify-start w-4/12 px-3 bg-white border rounded-md">

components/SetPassword.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import React, { useState } from "react"
+import React, { FormEvent, useState } from "react"
 import { useRouter } from "next/navigation"
 import { Label } from "@radix-ui/react-label"
 

components/datatable.tsx

@@ -346,7 +346,7 @@ export default function DataTable(props) {
               </ScrollArea>
             </SelectContent>
           </Select>
-          {!role === "Admin-IA" ||
+          {!(role === "Admin-IA") ||
             (role == "SuperAdmin" && (
               <Select
                 onValueChange={(value) =>

components/meetings/AddMeeting.tsx

@@ -37,7 +37,7 @@ export default function AddMeeting() {
           title: "video added!",
         })
         setLoading(false)
-        window.location.reload(true)
+        window.location.reload()
       } else {
         console.log("user reg failed!")
         toast({

components/superAdmin/EditClient.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import React, { useEffect, useState } from "react"
+import React, { FormEvent, useEffect, useState } from "react"
 import { Checkbox } from "@/components/ui/checkbox"
 import {
   Calendar as CalendarIcon,

components/superAdmin/EditUser.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import React, { useEffect, useState } from "react"
+import React, { FormEvent, useEffect, useState } from "react"
 import {
   Calendar as CalendarIcon,
   Check,
@@ -163,6 +163,7 @@ export default function EditUser(props) {
           <DialogDescription>
             <div className="grid w-full items-center gap-1.5">
               <form onSubmit={handleSubmit}>
+              <>
                 <label className="mb-1 text-black">Username:</label>
                 <Input
                   className="mb-5"
@@ -260,8 +261,9 @@ export default function EditUser(props) {
                   </div>
                   }
 
-              </>
+                </>
                 )}
+              </>
 
                 {Role && (
                   <>

components/superAdmin/TotalClients.tsx

@@ -1,5 +1,5 @@
 "use client"
-import React, { useState } from "react"
+import React, { useEffect, useState } from "react"
 
 import { fetchProjectsBySales } from "@/lib/fetchProjects"
 

components/superAdmin/TotalEarning.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from "react"
-import {InvoiceByUserId} from "/lib/fetchInvoices"
+import { InvoiceByUserId } from "@/lib/fetchInvoices"
 export default function TotalEarning(props) {
   const userId = props.userId
   const [invoices, setInvoices] = useState(0)

components/superAdmin/TotalProject.tsx

@@ -1,5 +1,5 @@
 "use client"
-import React, { useState } from "react"
+import React, { useEffect, useState } from "react"
 
 export default function TotalEarning(props) {
   const [count, setcount] = useState()

package.json

@@ -73,6 +73,7 @@
   },
   "devDependencies": {
     "@ianvs/prettier-plugin-sort-imports": "^3.7.2",
+    "@types/js-cookie": "^3.0.6",
     "@types/node": "^17.0.45",
     "@types/react": "^18.2.14",
     "@types/react-dom": "^18.2.6",