src/components/Directory/AssignedBucket.jsx

@@ -0,0 +1,14 @@
+import React from "react";
+import EmployeeList from "./EmployeeList";
+
+const AssignedBucket = ({ employees, selectedBucket, onChange }) => {
+  if (!selectedBucket) return null;
+
+  return (
+    <div className="mt-1">
+      <EmployeeList employees={employees} onChange={onChange} bucket={selectedBucket} />
+    </div>
+  );
+};
+
+export default AssignedBucket;

src/components/Directory/BucketForm.jsx

@@ -0,0 +1,44 @@
+import React from "react";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { bucketScheam } from "./DirectorySchema";
+
+const BucketForm = ({ onSubmit, selectedBucket, onCancel, isSubmitting }) => {
+  const {
+    register,
+    handleSubmit,
+    reset,
+    formState: { errors },
+  } = useForm({
+    resolver: zodResolver(bucketScheam),
+    defaultValues: {
+      name: selectedBucket?.name || "",
+      description: selectedBucket?.description || "",
+    },
+  });
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)} className="px-2 px-sm-0">
+      <div className="mb-3">
+        <label htmlFor="bucketName" className="form-label">Bucket Name</label>
+        <input id="bucketName" className="form-control form-control-sm" {...register("name")} />
+        {errors.name && <small className="danger-text">{errors.name.message}</small>}
+      </div>
+
+      <div className="mb-3">
+        <label htmlFor="bucketDescription" className="form-label">Bucket Description</label>
+        <textarea id="bucketDescription" className="form-control form-control-sm" rows="3" {...register("description")} />
+        {errors.description && <small className="danger-text">{errors.description.message}</small>}
+      </div>
+
+      <div className="mt-4 d-flex justify-content-center gap-3">
+        <button type="button" onClick={onCancel} className="btn btn-sm btn-secondary" disabled={isSubmitting}>Cancel</button>
+        <button type="submit" className="btn btn-sm btn-primary" disabled={isSubmitting}>
+          {isSubmitting ? "Please wait..." : "Submit"}
+        </button>
+      </div>
+    </form>
+  );
+};
+
+export default BucketForm;

src/components/Directory/BucketList.jsx

@@ -0,0 +1,36 @@
+import React from "react";
+
+const BucketList = ({ buckets, searchTerm, onEdit, onDelete, loading }) => {
+  const filteredBuckets = buckets.filter(bucket =>
+    bucket.name.toLowerCase().includes(searchTerm.toLowerCase())
+  );
+
+  if (loading) return <p className="text-center">Loading...</p>;
+  if (filteredBuckets.length === 0) return <p className="text-center">No buckets found.</p>;
+
+  return (
+    <div className="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-3 pt-3 px-2 px-sm-0">
+      {filteredBuckets.map(bucket => (
+        <div className="col" key={bucket.id}>
+          <div className="card h-100">
+            <div className="card-body p-4">
+              <h6 className="card-title d-flex justify-content-between">
+                <span>{bucket.name}</span>
+                <div className="d-flex gap-2">
+                  <i className="bx bx-edit bx-sm text-primary cursor-pointer" onClick={() => onEdit(bucket)}></i>
+                  <i className="bx bx-trash bx-sm text-danger cursor-pointer" onClick={() => onDelete(bucket.id)}></i>
+                </div>
+              </h6>
+              <h6 className="card-subtitle mb-2 text-muted">Contacts: {bucket.numberOfContacts || 0}</h6>
+              <p className="card-text" title={bucket.description}>
+                {bucket.description || "No description available."}
+              </p>
+            </div>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default BucketList;

src/components/Directory/EmployeeList.jsx

@@ -1,6 +1,7 @@
 import React, { useState, useEffect } from "react";
 import { useSortableData } from "../../hooks/useSortableData";
 import Avatar from "../common/Avatar";
+
 const EmployeeList = ({ employees, onChange, bucket }) => {
   const [employeefiltered, setEmployeeFilter] = useState([]);
   const [employeeStatusList, setEmployeeStatusList] = useState([]);
@@ -69,6 +70,8 @@ const EmployeeList = ({ employees, onChange, bucket }) => {
       `${employee?.firstName} ${employee?.lastName}`?.toLowerCase();
     return fullName.includes(searchTerm.toLowerCase());
   });
+
+  
   return (
     <>
       <div className="d-flex justify-content-between align-items-center mt-2">

src/components/Directory/NotesCardViewDirectory.jsx

@@ -9,8 +9,8 @@ const NotesCardViewDirectory = ({
   searchText,
   filterAppliedNotes,
 }) => {
+  
   const projectId = useSelectedProject(); 
-
   const [allNotes, setAllNotes] = useState([]);
   const [filteredNotes, setFilteredNotes] = useState([]);
   const [loading, setLoading] = useState(true);
@@ -29,7 +29,7 @@ const NotesCardViewDirectory = ({
   const fetchNotes = async (projId) => {
     setLoading(true);
     try {
-      const response = await DirectoryRepository.GetNotes(1000, 1, projId); // ✅ pass projectId
+      const response = await DirectoryRepository.GetNotes(1000, 1, projId); 
       const fetchedNotes = response.data?.data || [];
       setAllNotes(fetchedNotes);
       setNotesForFilter(fetchedNotes)

src/hooks/useDirectory.js

@@ -1,6 +1,7 @@
 import { useEffect, useState } from "react";
 import { DirectoryRepository } from "../repositories/DirectoryRepository";
 import { cacheData, getCachedData } from "../slices/apiDataManager";
+import { useQuery } from "@tanstack/react-query";
 
 export const useDirectory = (isActive,prefernceContacts) => {
   const [contacts, setContacts] = useState([]);
@@ -210,3 +211,22 @@ export const useDesignation = () => {
 
   return { designationList, loading, error };
 };
+
+// ------------------------------Query--------------------------------------------
+
+export const useBucketList =()=>{
+  return useQuery({
+    queryKey:["bucketList"],
+    queryFn:async()=>{
+      const resp = await DirectoryRepository.GetBucktes();
+      return resp.data;
+    }
+  })
+}
+
+export const useDirectoryNotes=(pageSize, pageNumber, filter, searchString)=>{
+  return useQuery({
+    queryKey:["directoryNotes",pageSize, pageNumber, filter, searchString],
+    queryFn:async()=>  await DirectoryRepository.GetBucktes(pageSize, pageNumber, filter, searchString), 
+  })
+}

src/pages/Directory/ContactsPage.jsx

@@ -0,0 +1,23 @@
+import React, { useEffect } from 'react'
+import { useFab } from '../../Context/FabContext';
+
+const ContactsPage = () => {
+    const {setOffcanvasContent,setShowTrigger} = useFab()
+        useEffect(() => {
+        setShowTrigger(true);
+        setOffcanvasContent(
+          "Contacts Filters",
+        <div>hlleo</div>
+        );
+  
+      return () => {
+        setShowTrigger(false);
+        setOffcanvasContent("", null);
+      };
+    }, []);
+  return (
+    <div>ContactsPage</div>
+  )
+}
+
+export default ContactsPage

src/pages/Directory/Directory.jsx

@@ -489,4 +489,5 @@ const Directory = ({ IsPage = true, prefernceContacts }) => {
   );
 };
 
-export default Directory;
+export default Directory;
+

src/pages/Directory/DirectoryPage.jsx

@@ -0,0 +1,187 @@
+import {
+  useState,
+  Suspense,
+  lazy,
+  createContext,
+  useContext,
+  useEffect,
+} from "react";
+import Breadcrumb from "../../components/common/Breadcrumb";
+import { useFab } from "../../Context/FabContext";
+import { useBucketList, useBuckets } from "../../hooks/useDirectory";
+import GlobalModel from "../../components/common/GlobalModel";
+import ManageBucket from "../../components/Directory/ManageBucket";
+
+const NotesPage = lazy(() => import("./NotesPage"));
+const ContactsPage = lazy(() => import("./ContactsPage"));
+
+export const DirectoryContext = createContext();
+export const useDirectoryContext = () => {
+  const context = useContext(DirectoryContext);
+
+  if (!context) {
+    return (
+      <div className="container-fluid">
+        <p>Your Action is out of context</p>
+      </div>
+    );
+  }
+  return context;
+};
+export default function DirectoryPage({ IsPage = true }) {
+  const [activeTab, setActiveTab] = useState("notes");
+  const { setActions } = useFab();
+  const [isOpenBucket, setOpenBucket] = useState(false);
+
+  const { data, isLoading, isError, error } = useBucketList();
+
+  const handleTabClick = (tab, e) => {
+    e.preventDefault();
+    setActiveTab(tab);
+  };
+
+  useEffect(() => {
+    const actions = [];
+
+    if (IsPage) {
+      actions.push({
+        label: "Manage Bucket",
+        icon: "fa-solid fa-bucket fs-5",
+        color: "primary",
+        onClick: () => setOpenBucket(true),
+      });
+    }
+    if (data?.length > 0) {
+      actions.push({
+        label: "New Contact",
+        icon: "bx bx-plus-circle",
+        color: "warning",
+        // onClick: ()=>setOpenBucket(true),
+      });
+    }
+
+    setActions(actions);
+
+    return () => setActions([]);
+  }, [IsPage, data]);
+  
+  if (isLoading) return <div>Loading...</div>;
+  if (isError) return <div>{error.message}</div>;
+  return (
+    <>
+      <DirectoryContext.Provider>
+        <div className="container-fluid">
+          <Breadcrumb
+            data={[
+              { label: "Home", link: "/dashboard" },
+              { label: "Directory", link: null },
+            ]}
+          ></Breadcrumb>
+
+          <div className="card">
+            <div className="nav-align-top mb-1">
+              <ul className="nav nav-tabs">
+                <li className="nav-item cursor-pointer">
+                  <a
+                    className={`nav-link ${
+                      activeTab === "notes" ? "active" : ""
+                    } fs-6`}
+                    onClick={(e) => handleTabClick("notes", e)}
+                  >
+                    <i className="bx bx-note bx-sm me-1_5"></i>
+                    <span className="d-none d-md-inline ">Notes</span>
+                  </a>
+                </li>
+                <li className="nav-item cursor-pointer">
+                  <a
+                    className={`nav-link ${
+                      activeTab === "contacts" ? "active" : ""
+                    } fs-6`}
+                    onClick={(e) => handleTabClick("contacts", e)}
+                  >
+                    <i className="bx bxs-contact bx-sm me-1_5"></i>
+                    <span className="d-none d-md-inline">Contacts</span>
+                  </a>
+                </li>
+              </ul>
+            </div>
+
+            <div className="mb-1">
+              <div className="d-flex align-items-center justify-content-between px-2">
+                <div>
+                  {activeTab === "notes" && (
+                    <input
+                      type="search"
+                      className="form-control form-control-sm"
+                      placeholder="Search notes..."
+                    />
+                  )}
+
+                  {activeTab === "contacts" && (
+                    <div className="d-flex gap-2 align-items-center">
+                      <input
+                        type="text"
+                        className="form-control form-control-sm"
+                        placeholder="Search contacts..."
+                      />
+                      <button className="btn btn-xs btn-outline-secondary">
+                        <i className="bx bx-list-ul"></i>
+                      </button>
+                      <button className="btn btn-xs btn-outline-secondary">
+                        <i className="bx bx-grid-alt"></i>
+                      </button>
+                    </div>
+                  )}
+                </div>
+
+                <div className="btn-group">
+                  <button
+                    className="btn btn-sm btn-secondary dropdown-toggle"
+                    type="button"
+                    data-bs-toggle="dropdown"
+                    aria-haspopup="true"
+                    aria-expanded="false"
+                  >
+                    <i className="bx bx-download"></i> Export
+                  </button>
+                  <ul className="dropdown-menu">
+                    <li>
+                      <a className="dropdown-item">Action</a>
+                    </li>
+                    <li>
+                      <a className="dropdown-item">Another action</a>
+                    </li>
+                  </ul>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div>
+            <Suspense
+              fallback={
+                <div className="text-center py-5">
+                  <div className="spinner-border text-primary" role="status">
+                    <span className="visually-hidden">Loading...</span>
+                  </div>
+                </div>
+              }
+            >
+              {activeTab === "notes" && <NotesPage />}
+              {activeTab === "contacts" && <ContactsPage />}
+            </Suspense>
+          </div>
+
+          {isOpenBucket && (
+            <GlobalModel
+              size="lg"
+              isOpen={isOpenBucket}
+              closeModal={() => setOpenBucket(false)}
+            >
+              <ManageBucket closeModal={() => setOpenBucket(false)} />
+            </GlobalModel>
+          )}
+        </div>
+      </DirectoryContext.Provider>
+    </>
+  );
+}

src/pages/Directory/NotesPage.jsx

@@ -0,0 +1,26 @@
+import React, { useEffect } from 'react'
+import { useFab } from '../../Context/FabContext';
+
+const NotesPage = () => {
+
+  const {setOffcanvasContent,setShowTrigger} = useFab()
+      useEffect(() => {
+      setShowTrigger(true);
+      setOffcanvasContent(
+        "Notes Filters",
+      <div>hlleo</div>
+      );
+
+    return () => {
+      setShowTrigger(false);
+      setOffcanvasContent("", null);
+    };
+  }, []);
+  return (
+    <div className='container'>
+
+    </div>
+  )
+}
+
+export default NotesPage

src/repositories/DirectoryRepository.jsx

@@ -34,8 +34,10 @@ export const DirectoryRepository = {
   DeleteNote: (id, isActive) =>
     api.delete(`/api/directory/note/${id}?active=${isActive}`),
 
-  GetNotes: (pageSize, pageNumber, projectId) =>
-  api.get(
-    `/api/directory/notes?pageSize=${pageSize}&pageNumber=${pageNumber}&projectId=${projectId}`
-  ),
+  GetNotes: (pageSize, pageNumber, filter, searchString) => {
+    const payloadJsonString = JSON.stringify(filter);
+    return api.get(
+      `/api/directory/notes?pageSize=${pageSize}&pageNumber=${pageNumber}&filter=${payloadJsonString}&searchString=${searchString}`
+    );
+  },
 };

src/router/AppRoutes.jsx

@@ -44,6 +44,7 @@ import ExpensePage from "../pages/Expense/ExpensePage";
 import TenantDetails from "../pages/Tenant/TenantDetails";
 import SelfTenantDetails from "../pages/Tenant/SelfTenantDetails";
 import SuperTenantDetails from "../pages/Tenant/SuperTenantDetails";
+import DirectoryPage from "../pages/Directory/DirectoryPage";
 
 const router = createBrowserRouter(
   [
@@ -75,7 +76,7 @@ const router = createBrowserRouter(
             { path: "/employee/:employeeId", element: <EmployeeProfile /> },
             // { path: "/employee/manage", element: <ManageEmp /> },
             // {path: "/employee/manage/:employeeId", element: <ManageEmp />},
-            { path: "/directory", element: <Directory /> },
+            { path: "/directory", element: <DirectoryPage /> },
             { path: "/inventory", element: <Inventory /> },
             { path: "/activities/attendance", element: <AttendancePage /> },
             { path: "/activities/records/:projectId?", element: <DailyTask /> },