feat: integrate backend web server on client

package.json

@@ -16,7 +16,7 @@
     "@radix-ui/react-avatar": "^1.1.0",
     "@radix-ui/react-checkbox": "^1.1.1",
     "@radix-ui/react-context-menu": "^2.2.1",
-    "@radix-ui/react-dialog": "^1.1.1",
+    "@radix-ui/react-dialog": "^1.1.3",
     "@radix-ui/react-dropdown-menu": "^2.1.1",
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-label": "^2.1.0",

src/components/shared/alert-modal.tsx

@@ -9,26 +9,14 @@ type TAlertModalProps = {
   title?: string;
   description?: string;
 };
-export const AlertModal = ({
-  isOpen,
-  onClose,
-  onConfirm,
-  loading,
-  title = "Are you sure?",
-  description = "Are you sure you want to continue?",
-}: TAlertModalProps) => {
+export const AlertModal = ({ isOpen, onClose, onConfirm, loading, title = "Are you sure?", description = "Are you sure you want to continue?" }: TAlertModalProps) => {
   return (
-    <Modal
-      title={title}
-      description={description}
-      isOpen={isOpen}
-      onClose={onClose}
-    >
-      <div className='flex w-full items-center justify-end space-x-2 pt-6'>
-        <Button disabled={loading} variant='outline' onClick={onClose}>
+    <Modal title={title} description={description} isOpen={isOpen} onClose={onClose}>
+      <div className="flex w-full items-center justify-end space-x-2 pt-6">
+        <Button disabled={loading} variant="outline" onClick={onClose}>
           Cancel
         </Button>
-        <Button disabled={loading} variant='destructive' onClick={onConfirm}>
+        <Button disabled={loading} variant="destructive" onClick={onConfirm}>
           Continue
         </Button>
       </div>

src/components/shared/dashboard-nav.tsx

@@ -32,11 +32,17 @@ export default function DashboardNav({
     return null;
   }
 
+   const filteredItems = items.filter((item) => item.user === "Admin");
+
+   if (!filteredItems.length) {
+     return null;
+   }
+
   return (
     <div className='flex flex-col h-full'>
       <nav className='grid items-start gap-2 flex-grow'>
         <TooltipProvider>
-          {items.map((item, index) => {
+          {filteredItems.map((item, index) => {
             const Icon = Icons[item.icon || "arrowRight"];
             return (
               item.href && (

src/components/shared/modal-add-assessment.tsx

@@ -0,0 +1,29 @@
+import { Button } from "@/components/ui/button";
+import { Modal } from "@/components/ui/modal";
+import { Plus } from "lucide-react";
+import { useState } from "react";
+import { ScrollArea } from "../ui/scroll-area";
+
+type TPopupModalProps = {
+  onConfirm?: () => void;
+  loading?: boolean;
+  renderModal: (onClose: () => void) => React.ReactNode;
+};
+
+export default function PopupModalAssessment({ renderModal }: TPopupModalProps) {
+  const [isOpen, setIsOpen] = useState(false);
+  const onClose = () => setIsOpen(false);
+  return (
+    <>
+      <Button className="flex-col space-y-3 bg-slate-200 hover:bg-slate-400 dark:bg-slate-800 p-3 rounded-xl min-h-64 hover:text-white text-black " onClick={() => setIsOpen(true)}>
+        <Plus className="h-12 w-12 " />
+        <div className="font-bold text-xl ">
+          <h3>Add new module</h3>
+        </div>
+      </Button>
+      <Modal isOpen={isOpen} onClose={onClose} className={"!bg-background !px-1"}>
+        <ScrollArea className="h-[80dvh] px-6  ">{renderModal(onClose)}</ScrollArea>
+      </Modal>
+    </>
+  );
+}

src/components/shared/modal-add-employee.tsx

@@ -15,17 +15,11 @@ export default function PopupModal({ renderModal }: TPopupModalProps) {
   const onClose = () => setIsOpen(false);
   return (
     <>
-      <Button className='text-xs md:text-sm' onClick={() => setIsOpen(true)}>
-        <Plus className='mr-2 h-4 w-4' /> Add New
+      <Button className="text-xs md:text-sm bg-[#F6517D]" onClick={() => setIsOpen(true)}>
+        <Plus className="mr-2 h-4 w-4" /> Add New
       </Button>
-      <Modal
-        isOpen={isOpen}
-        onClose={onClose}
-        className={"!bg-background !px-1"}
-      >
-        <ScrollArea className='h-[80dvh] px-6  '>
-          {renderModal(onClose)}
-        </ScrollArea>
+      <Modal isOpen={isOpen} onClose={onClose} className={"!bg-background !px-1"}>
+        <ScrollArea className="h-[80dvh] px-6  ">{renderModal(onClose)}</ScrollArea>
       </Modal>
     </>
   );

src/components/shared/table-search-input.tsx

@@ -3,23 +3,15 @@ import { Input } from "../ui/input";
 import { useDebounce } from "use-debounce";
 import { useSearchParams } from "react-router-dom";
 
-export default function TableSearchInput({
-  placeholder,
-}: {
-  placeholder?: string;
-}) {
+export default function TableSearchInput({ placeholder }: { placeholder?: string }) {
   const [searchParams, setSearchParams] = useSearchParams();
   const country = searchParams.get("search") || "";
   const [searchTerm, setSearchTerm] = React.useState(country);
   // debounce the search input
   const [debouncedValue] = useDebounce(searchTerm, 1000);
   const handleSettingSearchParams = useCallback((newSearchValue: string) => {
     // Update the URL with the new search value
-    if (
-      newSearchValue === "" ||
-      newSearchValue === undefined ||
-      !newSearchValue
-    ) {
+    if (newSearchValue === "" || newSearchValue === undefined || !newSearchValue) {
       searchParams.delete("search");
       setSearchParams(searchParams);
       return;
@@ -34,12 +26,5 @@ export default function TableSearchInput({
   React.useEffect(() => {
     handleSettingSearchParams(debouncedValue);
   }, [debouncedValue, handleSettingSearchParams]);
-  return (
-    <Input
-      placeholder={placeholder || `Search country...`}
-      value={searchTerm}
-      onChange={(event) => setSearchTerm(event.target.value)}
-      className='w-full md:max-w-sm'
-    />
-  );
+  return <Input placeholder={placeholder || `Search country...`} value={searchTerm} onChange={(event) => setSearchTerm(event.target.value)} className="w-full md:max-w-sm lg:max-w-full" />;
 }

src/constants/data.ts

@@ -6,18 +6,42 @@ export const navItems: NavItem[] = [
     href: "/dashboard",
     icon: "Dashboard",
     label: "Dashboard",
+    user: "User",
   },
   {
     title: "Leadership",
     href: "/dashboard/leadership",
     icon: "BriefcaseBusiness",
     label: "Leadership",
+    user: "User",
   },
   {
     title: "Career Success Potential",
     href: "/dashboard/career",
     icon: "Rocket",
     label: "Career Success Potential",
+    user: "User",
+  },
+  {
+    title: "Dashboard",
+    href: "/dashboard/admin",
+    icon: "Dashboard",
+    label: "Dashboard",
+    user: "Admin",
+  },
+  {
+    title: "User",
+    href: "/dashboard/admin/user",
+    icon: "Users",
+    label: "Dashboard",
+    user: "Admin",
+  },
+  {
+    title: "Module",
+    href: "/dashboard/admin/modules", // Should have /admin/dashboard/modules
+    icon: "Users", //Change this
+    label: "Dashboard",
+    user: "Admin",
   },
 ];
 
@@ -26,8 +50,7 @@ export const assesments = [
     id: 1,
     tabs: "Welcome",
     completed: true,
-    description:
-      "This study attempts to identify the determining factors of leadership behavior...",
+    description: "This study attempts to identify the determining factors of leadership behavior...",
   },
   {
     id: 2,
@@ -73,12 +96,28 @@ export const BotNavItems: NavItem[] = [
     href: "/dashboard/profile",
     icon: "User",
     label: "Profile",
+    user: "User",
+  },
+  {
+    title: "Logout",
+    href: "/",
+    icon: "LogOut",
+    label: "Logout",
+    user: "User",
+  },
+  {
+    title: "Profile",
+    href: "/dashboard/profile",
+    icon: "User",
+    label: "Profile",
+    user: "Admin",
   },
   {
     title: "Logout",
     href: "/",
     icon: "LogOut",
     label: "Logout",
+    user: "Admin",
   },
 ];
 
@@ -94,14 +133,4 @@ export type Employee = {
   profile_picture?: string | null; // Profile picture can be a string (URL) or null (if no picture)
 };
 
-export const departments = [
-  "Engineering",
-  "Sales",
-  "Marketing",
-  "Human Resources",
-  "Finance",
-  "Legal",
-  "Operations",
-  "Customer Support",
-  "IT",
-];
+export const departments = ["Engineering", "Sales", "Marketing", "Human Resources", "Finance", "Legal", "Operations", "Customer Support", "IT"];

src/lib/axios.ts

@@ -0,0 +1,9 @@
+import axios from "axios";
+
+const BASE_URL = "http://localhost:3000/api"; // change depending on backend server
+
+const instance = axios.create({
+  baseURL: BASE_URL,
+});
+
+export default instance;