fixed table align

2025-11-18 16:56:11 +05:30 · 2025-11-18 16:56:11 +05:30 · 37dbbf53f3
commit 37dbbf53f3
parent 3753d01f7d
6 changed files with 311 additions and 87 deletions
--- a/src/components/ServiceProject/JobComments.jsx
+++ b/src/components/ServiceProject/JobComments.jsx
@ -150,7 +150,6 @@ const JobComments = ({ data }) => {
              type="submit"
              disabled={!watch("comment")?.trim() || isPending}
            >
-              <i className="bx bx-xs bx-send me-1"></i>
              Submit
            </button>
          </div>
--- a/src/components/ServiceProject/ManageJobTicket.jsx
+++ b/src/components/ServiceProject/ManageJobTicket.jsx
@ -141,7 +141,7 @@ const ManageJobTicket = ({ Job }) => {

          <div className="row align-items-start align-items-md-start gap-2">
            <div className="col-12 col-md-auto">
-              <small className="fs-6 fw-medium">Assigned By</small>
+              <small className="fs-6 fw-medium">Assigned To</small>
            </div>

            <div className="col">
--- a/src/components/ServiceProject/ServiceProjectTeam/ServiceProjectTeamAllocation.jsx
+++ b/src/components/ServiceProject/ServiceProjectTeam/ServiceProjectTeamAllocation.jsx
@ -123,12 +123,14 @@ const ServiceProjectTeamAllocation = () => {
      <div className=" text-start">
        <div className="row">
          <div className="d-flex justify-content-end">
-          {!isAddEmployee &&  <button
-              className="btn btn-sm btn-primary"
-              onClick={() => setIsAddEmployee(!isAddEmployee)}
-            >
-              <i className="bx bx-plus-circle me-2"></i>Add Employee
-            </button>}
+            {!isAddEmployee && (
+              <button
+                className="btn btn-sm btn-primary"
+                onClick={() => setIsAddEmployee(!isAddEmployee)}
+              >
+                <i className="bx bx-plus-circle me-2"></i>Add Employee
+              </button>
+            )}
          </div>

          {isAddEmployee && (
@ -166,18 +168,18 @@ const ServiceProjectTeamAllocation = () => {
            </>
          )}
        </div>
-        { isAddEmployee && (
-          <div className="d-flex justify-content-end">
+        {isAddEmployee && (
+          <div className="d-flex justify-content-end my-2">
            {" "}
-              <button
-            type="button"
-            className="btn btn-label-secondary btn-sm me-2"
-            onClick={()=>setIsAddEmployee(false)}
-            aria-label="Close"
-            disabled={isPending }
-          >
-            Cancel
-          </button>
+            <button
+              type="button"
+              className="btn btn-label-secondary btn-sm me-2"
+              onClick={() => setIsAddEmployee(false)}
+              aria-label="Close"
+              disabled={isPending}
+            >
+              Cancel
+            </button>
            <button
              className="btn btn-sm btn-primary"
              disabled={isPending}
@ -188,7 +190,7 @@ const ServiceProjectTeamAllocation = () => {
          </div>
        )}
        <div className="col-12">
-          <table className="table text-center ">
+          <table className="table text-center">
            <thead>
              <tr>
                <th>Name</th>
@ -202,29 +204,30 @@ const ServiceProjectTeamAllocation = () => {
                Team?.map((emp) => (
                  <tr key={emp?.id}>
                    <td className="w-min">
-                      <div className="d-flex align-items-center ">
-                        {" "}
+                      <div className="d-flex align-items-center gap-2">
                        <Avatar
                          size="xs"
                          firstName={emp?.employee?.firstName}
                          lastName={emp?.employee?.lastName}
                        />
-                        <span className="fw-medium">{`${emp?.employee?.firstName} ${emp?.employee?.lastName}`}</span>
+                        <span className="fw-medium">
+                          {emp?.employee?.firstName} {emp?.employee?.lastName}
+                        </span>
                      </div>
                    </td>
+
                    <td>{emp?.teamRole?.name}</td>
-                    <td className="">
-                      {deletingEmp?.emplyee?.id === emp.id && isPending ? (
-                        <div className="spinner-border spinner-border-sm "></div>
+
+                    <td>
+                      {deletingEmp?.employee?.id === emp.id && isPending ? (
+                        <div className="spinner-border spinner-border-sm"></div>
                      ) : (
-                        <span disabled={isPending}>
-                          <i
-                            className="bx bx-trash bx-sm text-danger cursor-pointer"
-                            onClick={() =>
-                              setSeletingEmp({ employee: emp, isOpen: true })
-                            }
-                          ></i>
-                        </span>
+                        <i
+                          className="bx bx-trash bx-sm text-danger cursor-pointer"
+                          onClick={() =>
+                            setSeletingEmp({ employee: emp, isOpen: true })
+                          }
+                        ></i>
                      )}
                    </td>
                  </tr>
@ -233,18 +236,12 @@ const ServiceProjectTeamAllocation = () => {
                <tr>
                  <td
                    colSpan={3}
-                    className="text-muted border-0 d-flex justify-content-center "
+                    className="text-center text-muted py-4 border-0"
                  >
                    {isTeamLoading ? (
                      <SpinnerLoader />
                    ) : (
-                      <div className="bg-light-secondary py-3 w-50 m-auto my-2">
-                        <i className="bx bx-box bx-md text-primary"></i>
-                        <p className="fw-medium mt-3">
-                          {" "}
-                          Please Add a Employee{" "}
-                        </p>
-                      </div>
+                      <p className="m-0 py-4">No Records Found</p>
                    )}
                  </td>
                </tr>
--- a/src/components/ServiceProject/ServiceProjectTeam/ServiceProjectTeamList.jsx
+++ b/src/components/ServiceProject/ServiceProjectTeam/ServiceProjectTeamList.jsx
@ -15,14 +15,17 @@ const ServiceProjectTeamList = () => {
    {
      key: "employeName",
      label: "Name",
-      getValue: (e) => {
-        return (
-          <div className="d-flex align-itmes-center">
-            <Avatar firstName={e.employee.firstName} lastName={e.employee.lastName} />
-            <span>{`${e.employee.firstName} ${e.employee.lastName}`}</span>
-          </div>
-        );
-      },
+      getValue: (e) => (
+        <div className="d-flex align-items-center">
+          {" "}
+          <Avatar size="xs"
+            firstName={e.employee.firstName}
+            lastName={e.employee.lastName}
+          />
+          <small>{`${e.employee.firstName} ${e.employee.lastName}`}</small>
+        </div>
+      ),
+      align: "text-start",
    },
    {
      key: "teamRole",
@ -34,53 +37,54 @@ const ServiceProjectTeamList = () => {
          </div>
        );
      },
+      align: "text-start",
    },
    {
      key: "assignedAt",
      label: "assigned Date",
-      getValue: (e) => {
-        return (
-          <div className="d-flex align-itmes-center text-center">
-            {formatUTCToLocalTime(e.assignedAT)}
-          </div>
-        );
-      },
-      className:"text-center"
+      getValue: (e) => 
+            formatUTCToLocalTime(e.assignedAT)
+      ,
+      align: "text-center",
    },
  ];
  return (
- <div className="table-responsive">
-  <table className="table align-middle mb-0">
-    <thead>
-      <tr>
-        {servceProjectColmen.map((col) => (
-          <th key={col.key}>{col.label}</th>
-        ))}
-      </tr>
-    </thead>
-
-    <tbody>
-      {data?.length > 0 ? (
-        data.map((row) => (
-          <tr key={row.id}>
+    <div className="table-responsive">
+      <table className="table align-middle mb-0">
+        <thead>
+          <tr>
            {servceProjectColmen.map((col) => (
-              <td key={col.key} className={col.className}>
-                {col.getValue(row)}
-              </td>
+              <th key={col.key} className={col.align}>{col.label}</th>
            ))}
          </tr>
-        ))
-      ) : (
-        <tr>
-          <td colSpan={servceProjectColmen.length} className="text-center py-4">
-            {isLoading ? <SpinnerLoader /> : "No Records Available"}
-          </td>
-        </tr>
-      )}
-    </tbody>
-  </table>
-</div>
+        </thead>

+        <tbody>
+          {data?.length > 0 ? (
+            data.map((row) => (
+              <tr key={row.id}>
+                {servceProjectColmen.map((col) => (
+                  <td key={col.key} className={col.align}>{col.getValue(row)}</td>
+                ))}
+              </tr>
+            ))
+          ) : (
+            <tr>
+              <td
+                colSpan={servceProjectColmen.length}
+                className="text-center py-4 border-0"
+              >
+                {isLoading ? (
+                  <SpinnerLoader />
+                ) : (
+                  <div className="py-8">No Records Available</div>
+                )}
+              </td>
+            </tr>
+          )}
+        </tbody>
+      </table>
+    </div>
  );
 };

--- a/src/components/common/Forms/InputFieldSuggesstion.jsx
+++ b/src/components/common/Forms/InputFieldSuggesstion.jsx
@ -0,0 +1,56 @@
+import React from 'react'
+
+const InputFieldSuggesstion = () => {
+  return (
+     <div className="position-relative">
+      <input
+        className="form-control form-control-sm"
+        value={value}
+        onChange={handleInputChange}
+        onBlur={() => setTimeout(() => setShowSuggestions(false), 150)}
+        onFocus={() => {
+          if (value) setShowSuggestions(true);
+        }}
+        disabled={disabled}
+      />
+      {showSuggestions && filteredList.length > 0 && (
+        <ul
+          className="list-group shadow-sm position-absolute w-100 bg-white border  zindex-tooltip"
+          style={{
+            maxHeight: "180px",
+            overflowY: "auto",
+            marginTop: "2px",
+            zIndex: 1000,
+            borderRadius:"0px"
+          }}
+        >
+          {filteredList.map((org) => (
+            <li
+              key={org}
+              className="list-group-item list-group-item-action border-none "
+              style={{
+                cursor: "pointer",
+                padding: "5px 12px",
+                fontSize: "14px",
+                transition: "background-color 0.2s",
+              }}
+              onMouseDown={() => handleSelectSuggestion(org)}
+              onMouseEnter={(e) =>
+                (e.currentTarget.style.backgroundColor = "#f8f9fa")
+              }
+              onMouseLeave={(e) =>
+                (e.currentTarget.style.backgroundColor = "transparent")
+              }
+            >
+              {org}
+            </li>
+          ))}
+        </ul>
+      )}
+
+      {error && <small className="danger-text">{error}</small>}
+    </div>
+  )
+}
+
+export default InputFieldSuggesstion
--- a/src/components/common/Forms/SelectFieldServerSide.jsx
+++ b/src/components/common/Forms/SelectFieldServerSide.jsx
@ -181,5 +181,173 @@ const SelectEmployeeServerSide = ({
    </div>
  );
 };
-
 export default SelectEmployeeServerSide;
+
+
+export const SelectProjectField = ()=>{
+   const [searchText, setSearchText] = useState("");
+  const debounce = useDebounce(searchText, 300);
+
+  const { data, isLoading } = useEmployeesName(
+    projectId,
+    debounce,
+    isAllEmployee
+  );
+
+  const options = data?.data ?? [];
+  const [open, setOpen] = useState(false);
+  const dropdownRef = useRef(null);
+
+  const getDisplayName = (emp) => {
+    if (!emp) return "";
+    return `${emp.firstName || ""} ${emp.lastName || ""}`.trim();
+  };
+
+  /** -----------------------------
+   * SELECTED OPTION (SINGLE)
+   * ----------------------------- */
+  let selectedSingle = null;
+
+  if (!isMultiple) {
+    if (isFullObject && value) selectedSingle = value;
+    else if (!isFullObject && value)
+      selectedSingle = options.find((o) => o[valueKey] === value);
+  }
+
+  /** -----------------------------
+   * SELECTED OPTION (MULTIPLE)
+   * ----------------------------- */
+  let selectedList = [];
+
+  if (isMultiple && Array.isArray(value)) {
+    if (isFullObject) selectedList = value;
+    else {
+      selectedList = options.filter((opt) => value.includes(opt[valueKey]));
+    }
+  }
+
+  /** Main button label */
+  const displayText = !isMultiple
+    ? getDisplayName(selectedSingle) || placeholder
+    : selectedList.length > 0
+    ? selectedList.map((e) => getDisplayName(e)).join(", ")
+    : placeholder;
+
+  /** -----------------------------
+   * HANDLE OUTSIDE CLICK
+   * ----------------------------- */
+  useEffect(() => {
+    const handleClickOutside = (e) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(e.target)) {
+        setOpen(false);
+      }
+    };
+
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+
+  /** -----------------------------
+   * HANDLE SELECT
+   * ----------------------------- */
+  const handleSelect = (option) => {
+    if (!isMultiple) {
+      // SINGLE SELECT
+      if (isFullObject) onChange(option);
+      else onChange(option[valueKey]);
+    } else {
+      // MULTIPLE SELECT
+      let updated = [];
+
+      const exists = selectedList.some((e) => e[valueKey] === option[valueKey]);
+
+      if (exists) {
+        // remove
+        updated = selectedList.filter((e) => e[valueKey] !== option[valueKey]);
+      } else {
+        // add
+        updated = [...selectedList, option];
+      }
+
+      if (isFullObject) onChange(updated);
+      else onChange(updated.map((x) => x[valueKey]));
+    }
+  };
+
+  return (
+    <div className="mb-3 position-relative" ref={dropdownRef}>
+      {label && (
+        <Label className="form-label" required={required}>
+          {label}
+        </Label>
+      )}
+
+      {/* MAIN BUTTON */}
+      <button
+        type="button"
+        className={`select2-icons form-select d-flex align-items-center justify-content-between ${
+          open ? "show" : ""
+        }`}
+        onClick={() => setOpen((prev) => !prev)}
+      >
+        <span className={`text-truncate ${!displayText ? "text-muted" : ""}`}>
+          {displayText}
+        </span>
+      </button>
+
+      {/* DROPDOWN */}
+      {open && (
+        <ul
+          className="dropdown-menu w-100 shadow-sm show animate__fadeIn h-64 overflow-auto rounded"
+          style={{
+            position: "absolute",
+            top: "100%",
+            left: 0,
+            zIndex: 1050,
+            marginTop: "4px",
+            borderRadius: "0.375rem",
+            overflow: "hidden",
+          }}
+        >
+          <div className="p-1">
+            <input
+              type="search"
+              value={searchText}
+              onChange={(e) => setSearchText(e.target.value)}
+              className="form-control form-control-sm"
+              placeholder="Search..."
+            />
+          </div>
+
+          {isLoading && (
+            <li className="dropdown-item text-muted text-center">Loading...</li>
+          )}
+
+          {!isLoading && options.length === 0 && (
+            <li className="dropdown-item text-muted text-center">No results found</li>
+          )}
+
+          {!isLoading &&
+            options.map((option) => {
+              const isActive = isMultiple
+                ? selectedList.some((x) => x[valueKey] === option[valueKey])
+                : selectedSingle &&
+                  selectedSingle[valueKey] === option[valueKey];
+
+              return (
+                <li key={option[valueKey]}>
+                  <button
+                    type="button"
+                    className={`dropdown-item ${isActive ? "active" : ""}`}
+                    onClick={() => handleSelect(option)}
+                  >
+                    {getDisplayName(option)}
+                  </button>
+                </li>
+              );
+            })}
+        </ul>
+      )}
+    </div>
+  );
+};