display contact in list view

src/pages/Directory/Directory.jsx

@@ -3,11 +3,16 @@ import Breadcrumb from "../../components/common/Breadcrumb";
 import IconButton from "../../components/common/IconButton";
 import GlobalModel from "../../components/common/GlobalModel";
 import ManageDirectory from "../../components/Directory/ManageDirectory";
+import ListViewDirectory from "../../components/Directory/ListViewDirectory";
+import {useDirectory} from "../../hooks/useDirectory";
+
 
 const Directory = () => {
   const [isOpenModal, setIsOpenModal] = useState(false);
   const closedModel = () => setIsOpenModal( false );
   
+  const {contacts} = useDirectory();
+  console.log(contacts)
   return (
     <div className="container-xxl flex-grow-1 container-p-y">
       <Breadcrumb
@@ -17,17 +22,17 @@ const Directory = () => {
         ]}
       ></Breadcrumb>
 
-      <GlobalModel isOpen={isOpenModal} closeModal={closedModel}>
+      <GlobalModel isOpen={isOpenModal} closeModal={closedModel} size="lg">
         <ManageDirectory />
       </GlobalModel>
 
-      <div className="row">
+      <div className="card p-2">
         <div className="row mx-0 px-0">
           <div className="col-md-4 col-6 flex-grow-1 mb-2 px-1">
             <input
               type="search"
               className="form-control form-control-sm"
-              placeholder="Search projects..."
+              placeholder="Search Contact..."
             />
           </div>
           <div className="col-md-8 col-6 text-end flex-grow-1 mb-2 px-1">
@@ -45,20 +50,28 @@ const Directory = () => {
           <table className="table px-2">
             <thead >
               <tr> 
-                <th className="text-start" colSpan="2">
-                  Name
-                </th>
-                <th className="px-2">
+                <th>
                   <div className="d-flex align-items-center gap-1">
+                    <IconButton
+                      size={12}
+                      iconClass="bx bx-user"
+                      color="secondary"
+                      onClick={() => alert("User icon clicked")}
+                    />
+                    <span>Name</span>
+                  </div>
+                </th>
+                <th colSpan="2" className="px-2 text-center">
+                  <div className="d-flex text-center align-items-center gap-1 justify-content-center">
                     <IconButton
                       size={12}
                       iconClass="bx bx-envelope"
                       color="primary"
-                      onClick={() => alert("User icon clicked")}
                     />
                     <span>Email</span>
                   </div>
                 </th>
+
                 <th className="mx-2">
                   <div className="d-flex align-items-center m-0 p-0 gap-1">
                     <IconButton
@@ -87,7 +100,7 @@ const Directory = () => {
                       data-bs-toggle="dropdown"
                       aria-expanded="false"
                     >
-                      Type <i className="bx bx-filter bx-sm"></i>
+                      Category <i className="bx bx-filter bx-sm"></i>
                     </a>
                     {/* <ul className="dropdown-menu p-2 text-capitalize">
                           {[
@@ -124,11 +137,9 @@ const Directory = () => {
               </tr>
             </thead>
             <tbody className="table-border-bottom-0 overflow-auto ">
-              <tr>
-                <td colSpan="12" className="text-center py-4">
-                  comming soon....
-                </td>
-              </tr>
+              {contacts.map((contact) => (
+                <ListViewDirectory contact={contact} />
+              ))}
             </tbody>
           </table>
         </div>