marco.pms.web/src/components/Directory/CardViewDirectory.jsx

import React from "react";
import Avatar from "../common/Avatar";
import { getBucketNameById } from "./DirectoryUtils";
import { useBuckets } from "../../hooks/useDirectory";
import { getPhoneIcon } from "./DirectoryUtils";
import { useDir } from "../../Context/DireContext";
const CardViewDirectory = ({
  IsActive,
  contact,
  setSelectedContact,
  setIsOpenModal,
  setOpen_contact,
  setIsOpenModalNote,
  IsDeleted,
  restore,
}) => {
  const { buckets } = useBuckets();
  const { dirActions, setDirActions } = useDir();
  return (
    <div
      className="card text-start border-1"
      style={{ background: `${!IsActive ? "#f8f6f6" : ""}` }}
    >
      <div className="card-body  px-1 py-2 pb-0">
        <div className="d-flex justify-content-between">
          <div className={`d-flex align-items-center ${IsActive && "cursor-pointer"}`}  onClick={() => {
          if (IsActive) {
            setIsOpenModalNote(true);
            setOpen_contact(contact);
          }
        }}>
            <Avatar
              size="xs"
              firstName={
                (contact?.name || "").trim().split(" ")[0]?.charAt(0) || ""
              }
              lastName={
                (contact?.name || "").trim().split(" ")[1]?.charAt(0) || ""
              }
            />{" "}
            <span className="text-heading fs-6"> {contact?.name}</span>
          </div>
          <div>
            {IsActive && (
              <div className="dropdown z-2">
                <button
                  type="button"
                  className="btn btn-xs btn-icon btn-text-secondary rounded-pill dropdown-toggle hide-arrow p-0 m-0"
                  data-bs-toggle="dropdown"
                  aria-expanded="false"
                >
                  <i
                    className="bx bx-dots-vertical-rounded bx-sm text-muted p-0"
                    data-bs-toggle="tooltip"
                    data-bs-offset="0,8"
                    data-bs-placement="top"
                    data-bs-custom-class="tooltip-dark"
                    title="More Action"
                  ></i>
                </button>
                <ul className="dropdown-menu dropdown-menu-end w-auto">
                  <li
                    onClick={() => {
                      setSelectedContact(contact);
                      setIsOpenModal(true);
                    }}
                  >
                    <a className="dropdown-item px-2 cursor-pointer py-1">
                      <i className="bx bx-edit bx-xs text-primary  me-2"></i>
                      <span className="align-left ">Modify</span>
                    </a>
                  </li>
                  <li>
                    <a
                      className="dropdown-item  px-2 cursor-pointer py-1"
                      onClick={() => IsDeleted(contact?.id)}
                    >
                      <i className="bx bx-trash text-danger  bx-xs me-2"></i>
                      <span className="align-left">Delete</span>
                    </a>
                  </li>
                </ul>
              </div>
            )}
            {!IsActive && (
              <i
                className={`bx  ${
                  dirActions.action && dirActions.id === contact.id
                    ? "bx-loader-alt bx-spin"
                    : "bx-recycle"
                } me-1 text-primary cursor-pointer`}
                title="Restore"
                onClick={() => {
                  setDirActions({ action: false, id: contact.id });
                  restore(contact.id);
                }}
              ></i>
            )}
          </div>
        </div>

        <ul className="list-inline m-0 ps-4 d-flex align-items-start">
          <li className="list-inline-item me-1 small">
            <i className="fa-solid fa-briefcase me-2"></i>
          </li>
          <li className="list-inline-item text-break small">
            {contact.organization}
          </li>
        </ul>
      </div>
      <div
        className={`card-footer text-start px-1 py-1 ${IsActive && "cursor-pointer"}`}
        onClick={() => {
          if (IsActive) {
            setIsOpenModalNote(true);
            setOpen_contact(contact);
          }
        }}
      >
        <hr className="my-0" />
        {contact.contactEmails[0] && (
          <ul className="list-unstyled my-1 d-flex align-items-start">
            <li className="me-2">
              <i className="bx bx-envelope bx-xs mt-1"></i>
            </li>
            <li className="flex-grow-1 text-break small">
              {contact.contactEmails[0].emailAddress}
            </li>
          </ul>
        )}

        {contact.contactPhones[0] && (
          <ul className="list-inline m-0 ">
            <li className="list-inline-item me-1">
              <i
                className={` ${getPhoneIcon(
                  contact.contactPhones[0].label
                )} bx-xs`}
              ></i>
            </li>
            <li className="list-inline-item text-small">
              {contact.contactPhones[0]?.phoneNumber}
            </li>
          </ul>
        )}

        {contact?.contactCategory?.name ? (
          <ul className="list-inline m-0">
            <li className="list-inline-item me-2 my-1">
              <i className="fa-solid fa-tag fs-6"></i>
            </li>
            <li className="list-inline-item text-small active">
              {contact?.contactCategory?.name}
            </li>
          </ul>
        ) : (
          <ul className="list-inline m-0">
            <li className="list-inline-item me-2 my-1">
              <i className="fa-solid fa-tag fs-6"></i>
            </li>
            <li className="list-inline-item text-small active">Other</li>
          </ul>
        )}

        <ul className="list-inline m-0">
          {contact?.bucketIds?.map((bucketId) => (
            <li key={bucketId} className="list-inline-item me-1">
              <span
                className="badge bg-label-primary rounded-pill d-flex align-items-center gap-1"
                style={{ padding: "0.1rem 0.3rem" }}
              >
                <i className="bx bx-pin bx-xs"></i>
                <span className="small-text">
                  {getBucketNameById(buckets, bucketId)}
                </span>
              </span>
            </li>
          ))}
        </ul>
      </div>
    </div>
  );
};

export default CardViewDirectory;