Merge pull request 'pramod_Task#105' (#52) from pramod_Task#105 into Issues_April_4W

Reviewed-on: #52

src/components/Directory/ManageDirectory.jsx

@@ -0,0 +1,214 @@
+import React, { useEffect } from "react";
+import { useForm, useFieldArray, FormProvider } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import TagInput from "../common/TagInput";
+import { z } from "zod";
+
+export const directorySchema = z.object({
+  firstName: z.string().min(1, "First Name is required"),
+  lastName: z.string().min(1, "Last Name is required"),
+  organization: z.string().min(1, "Organization name is required"),
+  type: z.string().min(1, "Type is required"),
+  address: z.string().optional(),
+  description: z.string().min(1, { message: "Description is required" }),
+  email: z
+    .array(z.string().email("Invalid email"))
+    .nonempty("At least one email required"),
+  phone: z
+    .array(z.string().regex(/^\d{10}$/, "Phone must be 10 digits"))
+    .nonempty("At least one phone number is required"),
+  tags: z.array(z.string()).optional(),
+});
+
+
+
+const ManageDirectory = () => {
+  const methods = useForm({
+    resolver: zodResolver(directorySchema),
+    defaultValues: {
+      firstName: "",
+      lastName: "",
+      organization: "",
+      type: "",
+      address: "",
+      description: "",
+      email: [""],
+      phone: [""],
+      tags: [],
+    },
+  });
+
+  const {
+    register,
+    handleSubmit,
+    control,
+    getValues,
+    trigger,
+    formState: { errors },
+  } = methods;
+
+  const {
+    fields: emailFields,
+    append: appendEmail,
+    remove: removeEmail,
+  } = useFieldArray({ control, name: "email" });
+
+  const {
+    fields: phoneFields,
+    append: appendPhone,
+    remove: removePhone,
+  } = useFieldArray({ control, name: "phone" });
+
+  useEffect(() => {
+    if (emailFields.length === 0) appendEmail(""); 
+    if (phoneFields.length === 0) appendPhone(""); 
+  }, [emailFields.length, phoneFields.length]);
+
+  const onSubmit = (data) => {
+    console.log("Submitted:\n" + JSON.stringify(data, null, 2));
+  };
+
+  const handleAddEmail = async () => {
+    const emails = getValues("email");
+    const lastIndex = emails.length - 1;
+    const valid = await trigger(`email.${lastIndex}`);
+    if (valid) appendEmail(""); 
+  };
+
+  const handleAddPhone = async () => {
+    const phones = getValues("phone");
+    const lastIndex = phones.length - 1;
+    const valid = await trigger(`phone.${lastIndex}`);
+    if (valid) appendPhone(""); 
+  };
+
+  return (
+    <FormProvider {...methods}>
+      <form className="p-2 p-sm-0" onSubmit={handleSubmit(onSubmit)}>
+        <div className="row">
+          <div className="col-md-6">
+            <label className="form-label">First Name</label>
+            <input className="form-control form-control-sm" {...register("firstName")} />
+            {errors.firstName && <small className="danger-text">{errors.firstName.message}</small>}
+          </div>
+
+          <div className="col-md-6">
+            <label className="form-label">Last Name</label>
+            <input className="form-control form-control-sm" {...register("lastName")} />
+            {errors.lastName && <small className="danger-text">{errors.lastName.message}</small>}
+          </div>
+        </div>
+
+        <div className="col-12">
+          <label className="form-label">Organization</label>
+          <input className="form-control form-control-sm" {...register("organization")} />
+          {errors.organization && <small className="danger-text">{errors.organization.message}</small>}
+        </div>
+
+        <div className="row">
+          <div className="col-md-6">
+            <label className="form-label">Email</label>
+            {emailFields.map((field, index) => (<>
+              <div key={field.id} className="d-flex align-items-center mb-1">
+                <input
+                  type="email"
+                  className="form-control form-control-sm"
+                  {...register(`email.${index}`)}
+                  placeholder="email@example.com"
+                />
+                {index === emailFields.length - 1 ? (
+                  <button
+                    type="button"
+                    className="btn btn-xs btn-primary ms-1"
+                    onClick={handleAddEmail}
+                  >
+                    <i className="bx bx-plus bx-xs" />
+                  </button>
+                ) : (
+                  <button
+                    type="button"
+                    className="btn btn-xs btn-danger ms-1"
+                    onClick={() => removeEmail(index)} 
+                  >
+                    <i className="bx bx-x bx-xs" />
+                  </button>
+                )}
+              </div>
+              {errors.email?.[index] && (
+        <small className="danger-text ms-2">
+          {errors.email[index]?.message}
+        </small>
+      )}
+              </>
+            ))}
+                  
+
+          </div>
+
+          <div className="col-md-6">
+            <label className="form-label">Phone</label>
+            {phoneFields.map((field, index) => (<>
+              <div key={field.id} className="d-flex align-items-center mb-1">
+                <input
+                  type="text"
+                  className="form-control form-control-sm"
+                  {...register(`phone.${index}`)}
+                  placeholder="9876543210"
+                />
+                {index === phoneFields.length - 1 ? (
+                  <button
+                    type="button"
+                    className="btn btn-xs btn-primary ms-1"
+                    onClick={handleAddPhone}
+                  >
+                    <i className="bx bx-plus bx-xs" />
+                  </button>
+                ) : (
+                  <button
+                    type="button"
+                    className="btn btn-xs btn-danger ms-1"
+                    onClick={() => removePhone(index)} // Remove the phone field
+                  >
+                    <i className="bx bx-x bx-xs" />
+                  </button>
+                )}
+              </div>
+              {errors.phone?.[ index ] && <small className="danger-text ms-2">{errors.phone[ index ]?.message}</small>}
+              </>
+            ))}
+         
+          </div>
+        </div>
+
+        <div className="row my-1">
+          <div className="col-md-6">
+            <label className="form-label">Type</label>
+            <input className="form-control form-control-sm" {...register("type")} />
+            {errors.type && <small className="danger-text">{errors.type.message}</small>}
+          </div>
+          <div className="col-md-6">
+            <TagInput name="tags" label="Tags" />
+          </div>
+        </div>
+
+        <div className="col-12">
+          <label className="form-label">Address</label>
+          <textarea className="form-control form-control-sm" rows="2" {...register("address")} />
+        </div>
+
+        <div className="col-12">
+          <label className="form-label">Description</label>
+          <textarea className="form-control form-control-sm" rows="2" {...register("description")} />
+          {errors.description && <small className="danger-text">{errors.description.message}</small>}
+        </div>
+
+        <div className="d-flex justify-content-evenly py-2">
+          <button className="btn btn-sm btn-primary" type="submit">Submit</button>
+          <button className="btn btn-sm btn-secondary" type="button">Cancel</button>
+        </div>
+      </form>
+    </FormProvider>
+  );
+};
+
+export default ManageDirectory;

src/components/Project/ProjectNav.jsx

@@ -18,7 +18,7 @@ const ProjectNav = ({ onPillClick, activePill }) => {
               onPillClick("profile");
             }}
           >
-            <i className="bx bx-user bx-sm me-1_5"></i> Profile
+            <i className="bx bx-user bx-sm me-1_5"></i> <span className="d-none d-md-inline">Profile</span>
           </a>
         </li>
         <li className="nav-item">
@@ -30,7 +30,7 @@ const ProjectNav = ({ onPillClick, activePill }) => {
               onPillClick("teams");
             }}
           >
-            <i className="bx bx-group bx-sm me-1_5"></i> Teams
+            <i className="bx bx-group bx-sm me-1_5"></i><span className="d-none d-md-inline" > Teams</span>
           </a>
         </li>
         <li className={`nav-item ${!HasViewInfraStructure && "d-none"} `}>
@@ -42,7 +42,7 @@ const ProjectNav = ({ onPillClick, activePill }) => {
               onPillClick("infra");
             }}
           >
-            <i className="bx bx-grid-alt bx-sm me-1_5"></i> Infrastructure
+            <i className="bx bx-grid-alt bx-sm me-1_5"></i> <span className="d-none d-md-inline">Infrastructure</span>
           </a>
         </li>
         {/* <li className="nav-item">
@@ -70,7 +70,7 @@ const ProjectNav = ({ onPillClick, activePill }) => {
               onPillClick("imagegallary");
             }}
           >
-            <i className="bx bx-link bx-sm me-1_5"></i> Image Gallary
+            <i className="bx bx-link bx-sm me-1_5"></i> <span className="d-none d-md-inline">Image Gallary</span>
           </a>
         </li>
         <li className="nav-item">
@@ -82,7 +82,7 @@ const ProjectNav = ({ onPillClick, activePill }) => {
               onPillClick("directory");
             }}
           >
-            <i className="bx bx-link bx-sm me-1_5"></i> Directory
+            <i className="bx bx-link bx-sm me-1_5"></i> <span className="d-none d-md-inline">Directory</span>
           </a>
         </li>
       </ul>

src/components/common/IconButton.jsx

@@ -0,0 +1,45 @@
+import React from "react";
+
+// Light background mapping for Bootstrap theme colors
+const lightBackgrounds = {
+  primary: "#e3f2fd",
+  secondary: "#E9EEF4",
+  success: "#e6f4ea",
+  danger: "#fdecea",
+  warning: "#fff3cd",
+  info: "#e0f7fa",
+  dark: "#e9ecef",
+};
+
+const IconButton = ({
+  iconClass,       // icon class string like 'bx bx-user'
+  color = "primary",
+  onClick,
+  size = 20,
+  radius=null,
+  style = {},
+  ...rest
+}) => {
+  const backgroundColor = lightBackgrounds[color] || "#f8f9fa";
+  const iconColor = `var(--bs-${color})`;
+
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      className={`border-0 ${radius ? `rounded-${rounded}` : 'rounded'} d-flex align-items-center justify-content-center`}
+      style={{
+        backgroundColor,
+        color: iconColor,
+          padding: "0.4rem",
+        margin:'0rem 0.2rem',
+        ...style,
+      }}
+      {...rest}
+    >
+      <i className={iconClass} style={{ fontSize: size, color: iconColor }}></i>
+    </button>
+  );
+};
+
+export default IconButton;

src/components/common/TagInput.jsx

@@ -0,0 +1,68 @@
+import React, { useState, useEffect } from "react";
+import { useFormContext } from "react-hook-form";
+
+const TagInput = ({
+  label = "Tags",
+  name = "tags",
+  placeholder = "Enter ... ",
+  color = "#e9ecef",
+}) => {
+  const [tags, setTags] = useState([]);
+  const [input, setInput] = useState("");
+  const { setValue } = useFormContext();
+
+  useEffect(() => {
+    setValue(name, tags); // sync to form when tags change
+  }, [tags, name, setValue]);
+
+  const addTag = (e) => {
+    e.preventDefault();
+    const trimmed = input.trim();
+    if (trimmed !== "" && !tags.includes(trimmed)) {
+      setTags([...tags, trimmed]);
+      setInput("");
+    }
+  };
+
+  const removeTag = (removeIndex) => {
+    const updated = tags.filter((_, i) => i !== removeIndex);
+    setTags(updated);
+  };
+
+  const backgroundColor = color || "#f8f9fa";
+  const iconColor = `var(--bs-${color})`;
+
+  return (
+    <>
+      <label htmlFor={name} className="form-label">{label}</label>
+      <div className="form-control form-control-sm d-flex justify-content-start flex-wrap gap-1" style={{ minHeight: "12px" }}>
+        {tags.map((tag, i) => (
+          <span
+            key={i}
+            className="d-flex align-items-center"
+            style={{
+              color: iconColor,
+              backgroundColor,
+              padding: "2px 3px",
+              borderRadius: "2px"
+            }}
+          >
+            {tag}
+            <i className="bx bx-x bx-xs ms-1" onClick={() => removeTag(i)}></i>
+          </span>
+        ))}
+        <input
+          type="text"
+          className="border-0 flex-grow-1"
+          value={input}
+          onChange={(e) => setInput(e.target.value)}
+          onKeyDown={(e) => (e.key === "Enter" ? addTag(e) : null)}
+          placeholder={placeholder}
+          style={{ outline: "none", minWidth: "120px" }}
+        />
+      </div>
+    </>
+  );
+};
+
+export default TagInput;

src/data/menuData.json

@@ -24,6 +24,11 @@
                         "available": true,
                         "link": "/employees"
                     },
+                    {
+                        "text": "Directory",
+                        "available": true,
+                        "link": "/directory"
+                    },
                     {
                         "text": "Project Status",
                         "available": true,

src/index.css

@@ -100,3 +100,23 @@ button:focus-visible {
 .checkbox-column {
   flex: 1;
 }
+
+/* Custom Scrollbar for Webkit browsers (Chrome, Safari, Edge) */
+::-webkit-scrollbar {
+  width: 6px; /* Width of the scrollbar */
+  height: 6px; /* Height of the scrollbar (for horizontal scrollbar) */
+}
+
+::-webkit-scrollbar-track {
+  background-color: #f1f1f1; /* Background of the scrollbar track */
+  border-radius: 2px; /* Rounded corners for the track */
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: #888; /* Color of the scrollbar thumb */
+  border-radius: 10px; /* Rounded corners for the thumb */
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background-color: #555; /* Color of the thumb on hover */
+}

src/pages/Directory/Directory.jsx

@@ -0,0 +1,140 @@
+import React, { useState } from "react";
+import Breadcrumb from "../../components/common/Breadcrumb";
+import IconButton from "../../components/common/IconButton";
+import GlobalModel from "../../components/common/GlobalModel";
+import ManageDirectory from "../../components/Directory/ManageDirectory";
+
+const Directory = () => {
+  const [isOpenModal, setIsOpenModal] = useState(false);
+  const closedModel = () => setIsOpenModal(false);
+
+  return (
+    <div className="container-xxl flex-grow-1 container-p-y">
+      <Breadcrumb
+        data={[
+          { label: "Home", link: "/dashboard" },
+          { label: "Directory", link: null },
+        ]}
+      ></Breadcrumb>
+
+      <GlobalModel isOpen={isOpenModal} closeModal={closedModel}>
+        <ManageDirectory />
+      </GlobalModel>
+
+      <div className="row">
+        <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..."
+            />
+          </div>
+          <div className="col-md-8 col-6 text-end flex-grow-1 mb-2 px-1">
+            <button
+              type="button"
+              className={`btn btn-sm btn-primary `}
+              onClick={() => setIsOpenModal(true)}
+            >
+              <i className="bx bx-plus-circle me-2"></i>
+              New Contact
+            </button>
+          </div>
+        </div>
+        <div className="table-responsive text-nowrap py-2 ">
+          <table className="table px-2">
+            <thead>
+              <tr>
+                <th className="text-start" colSpan="2">
+                  Name
+                </th>
+                <th className="px-2">
+                  <div className="d-flex align-items-center gap-1">
+                    <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
+                      size={12}
+                      iconClass="bx bx-phone"
+                      color="warning"
+                      onClick={() => alert("User icon clicked")}
+                    />
+                    <span>Phone</span>
+                  </div>
+                </th>
+                <th className="mx-2">
+                  <div className="d-flex align-items-center gap-1">
+                    <IconButton
+                      size={12}
+                      iconClass="bx bxs-grid-alt"
+                      color="info"
+                    />
+                    <span>Organization</span>
+                  </div>
+                </th>
+                <th className="mx-2">
+                  <div className="dropdown">
+                    <a
+                      className="dropdown-toggle hide-arrow cursor-pointer align-items-center"
+                      data-bs-toggle="dropdown"
+                      aria-expanded="false"
+                    >
+                      Type <i className="bx bx-filter bx-sm"></i>
+                    </a>
+                    {/* <ul className="dropdown-menu p-2 text-capitalize">
+                          {[
+                            { id: 1, label: "Active" },
+                            { id: 2, label: "On Hold" },
+                            { id: 3, label: "Inactive" },
+                            { id: 4, label: "Completed" },
+                          ].map(({ id, label }) => (
+                            <li key={id}>
+                              <div className="form-check">
+                                <input
+                                  className="form-check-input  "
+                                  type="checkbox"
+                                  checked={selectedStatuses.includes(id)}
+                                  onChange={() => handleStatusChange(id)}
+                                />
+                                <label className="form-check-label">
+                                  {label}
+                                </label>
+                              </div>
+                            </li>
+                          ))}
+                        </ul> 
+                    */}
+                  </div>
+                </th>
+                <th
+                //   className={`mx-2 ${
+                //     HasManageProject ? "d-sm-table-cell" : "d-none"
+                //   }`}
+                >
+                  Action
+                </th>
+              </tr>
+            </thead>
+            <tbody className="table-border-bottom-0 overflow-auto ">
+              <tr>
+                <td colSpan="12" className="text-center py-4">
+                  No projects found
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Directory;

src/pages/project/ProjectList.jsx

@@ -231,7 +231,7 @@ const ProjectList = () => {
                           data-bs-toggle="dropdown"
                           aria-expanded="false"
                         >
-                          Status <i className="bx bx-filter"></i>
+                          Status <i className="bx bx-filter bx-sm"></i>
                         </a>
                         <ul className="dropdown-menu p-2 text-capitalize">
                           {[

src/router/AppRoutes.jsx

@@ -35,6 +35,7 @@ import LegalInfoCard from "../pages/TermsAndConditions/LegalInfoCard";
 
 // Protected Route Wrapper
 import ProtectedRoute from "./ProtectedRoute";
+import Directory from "../pages/Directory/Directory";
 
 const router = createBrowserRouter(
   [
@@ -63,6 +64,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: "/inventory", element: <Inventory /> },
             { path: "/activities/attendance", element: <AttendancePage /> },
             { path: "/activities/records/:projectId?", element: <DailyTask /> },