@fortawesome/free-solid-svg-icons#faTrashAlt JavaScript Examples

ArtCourseDetail = ({ className }) => {
  const currikiUtility = classNames("curriki-utility-artcourse", className);
  return (
    <div className={currikiUtility}>
      <div className="artcourse-img">
        <img src={ArtCourseImage} alt="ArtCourseImage" />
      </div>
      <div className="artcourse-detail">
        <HeadingThree text="Description" color="#084892" />
        <HeadingText
          text="Ed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur."
          color="#515151"
          className="artcourse-description"
        />
        <div className="artcourse-links-icons">
          <div className="link-icons">
            <a href="#" className="artcourse_link">
              <FontAwesomeIcon
                icon={faExternalLinkAlt}
                className="artcourse-icon"
              />
              Share project
            </a>
            <a href="#" className="artcourse_link">
              <FontAwesomeIcon icon={faEye} className="artcourse-icon" />
              Preview
            </a>
            <a href="#" className="artcourse_link">
              <FontAwesomeIcon icon={faTrashAlt} className="artcourse-icon" />
              Delete
            </a>
          </div>
        </div>
      </div>
    </div>
  );
}

function ManagerEditorItem({ entity, onDelete }) {
    return (
        <div className="managersEditors__item">
            <Row justify="between">
                <Col xs="content">
                    <Link
                        className="primaryLink"
                        to={`/users/${entity.username}`}
                    >
                        {entity.username}
                    </Link>
                </Col>
                {onDelete && (
                    <Col
                        xs="content"
                        className="managersEditors__delete"
                        onClick={onDelete}
                    >
                        <FontAwesomeIcon icon={faTrashAlt} />
                    </Col>
                )}
            </Row>
        </div>
    );
}

DeleteButton = ({ onDelete, deleting }) => (
  <button
    className="flat"
    type="button"
    title="Delete document"
    onClick={onDelete}
    disabled={deleting}
  >
    <FontAwesomeIcon icon={faTrashAlt} color="inherit" title="Delete" />
    &nbsp;&nbsp;Delete
  </button>
)

function ParticipationChartLegends({
    series,
    hiddenSeries,
    onShow,
    onHide,
    onRemove,
}) {
    return (
        <div className="participation__chartLegends">
            {series.map((serie) => {
                const isHidden = hiddenSeries.includes(serie.name);

                return (
                    <div
                        key={serie.name}
                        className="participation__chartLegendWrapper"
                    >
                        <div
                            className={`participation__chartLegend ${
                                isHidden
                                    ? 'participation__chartLegend--hidden'
                                    : ''
                            }`}
                            onClick={() =>
                                isHidden
                                    ? onShow(serie.name)
                                    : onHide(serie.name)
                            }
                        >
                            <div
                                className="participation__chartLegendColor"
                                style={{ backgroundColor: serie.color }}
                            />

                            {serie.name}
                            {serie.tournament && ` (${serie.tournament})`}
                        </div>

                        {serie.deletable && onRemove && (
                            <FontAwesomeIcon
                                icon={faTrashAlt}
                                className="participation__chartLegendDelete"
                                onClick={() => onRemove(serie.name)}
                            />
                        )}
                    </div>
                );
            })}
        </div>
    );
}

render() {
        return (
            <>
            <tr className="active">
                <th className={this.props.comp === 'Archive' ? "strikeThrough" : (!this.state.checkBoxChecked ? "" : "strikeThrough")} scope="row">
                <div>
                <Form className="mb-3">
                    <Form.Group controlId="formBasicCheckbox">
                        <Form.Check
                            disabled={this.state.checkBoxDisabled}
                            type="checkbox"
                            checked={this.state.checkBoxChecked}
                            onChange={this.handleCheckBox}
                        />
                    </Form.Group>
                </Form>
                </div>
                </th>
                {
                    this.props.comp !== 'Archive' ? 
                    <td>
                        <FontAwesomeIcon icon={faEdit} onClick={() => this.toggleEditTask()}></FontAwesomeIcon>
                        <EditTask 
                            show={this.state.showEdit}
                            onHide={this.toggleEditTask}
                            isDark={this.props.isDark}
                            authToken={this.props.authToken}
                            editTask={this.state.editItem}
                            updateData={this.updateData}/>
                    </td> :
                    null
                }
                <td 
                    className={this.props.comp === 'Archive' ? 
                    "strikeThrough" : 
                    !this.state.checkBoxChecked ? 
                    "" : 
                    "strikeThrough"} >
                    <div>{this.props.desc}</div>    
                </td>
                <td 
                    className={this.props.comp === 'Archive' ? 
                    "strikeThrough" : 
                    !this.state.checkBoxChecked ? 
                    "" : 
                    "strikeThrough"}>
                    <div>{this.prettyStatus()}</div>    
                </td>
                <td 
                    className={this.props.comp === 'Archive' ? 
                    "strikeThrough" : 
                    !this.state.checkBoxChecked ? 
                    "" : 
                    "strikeThrough"}>
                    <div>{this.props.label}</div>    
                </td>
                <td 
                    className={this.props.comp === 'Archive' ? 
                    "strikeThrough" : 
                    !this.state.checkBoxChecked ? 
                    "" : 
                    "strikeThrough"}>
                    <div>{this.props.date}</div>    
                </td>
                <td 
                    className={this.props.comp === 'Archive' ? 
                    "strikeThrough" : 
                    !this.state.checkBoxChecked ? 
                    "" : 
                    "strikeThrough"}>
                    <div>{this.props.time}</div>    
                </td>
                <td>
                    <FontAwesomeIcon icon={faTrashAlt} onClick={() => this.removeItem()}></FontAwesomeIcon>
                </td>
            </tr>
            </>
        )
    }

SigPad = ({ sigPadRef, setChanged }) => {
  const [hasContent, setHasContent] = useState(false);
  const [penColor] = useState('#000028');

  const sigPadClear = () => {
    sigPadRef.current.clear();
    setChanged(false);
    setHasContent(false);
  };

  const onEnd = () => {
    setChanged(true);
    setHasContent(true);
  };

  // React.useEffect(() => {
  //   if (sig) {
  //     // sigPadRef.current.fromDataURL(body);
  //     window.sigPadRef = sigPadRef.current;
  //   }
  // }, [sig]);

  return (
    <div className="sig-draw-pad">
      <div className="sig-canvas">
        <SignatureCanvas
          penColor={penColor}
          canvasProps={{ width: 600, height: 200 }}
          ref={sigPadRef}
          onEnd={onEnd}
        />
        {hasContent && (
          <button type="button" className="clear flat" onClick={sigPadClear}>
            <FontAwesomeIcon icon={faTrashAlt} color={penColor} />
          </button>
        )}
      </div>
      <p className="small">Draw Signature</p>
    </div>
  );
}

constructor() {
    this.icon = faTrashAlt;
  }

export default function () {
  library.add(faGithub, faWindows, faLinux, faTwitter, faReddit, faTelegram, faCheckCircle, faMicrochip, faTrashAlt,
    faPaperPlane, faSpinner, faFlask, faInfoCircle, faPen, faTools, faCheck, faPlus, faCog, faExclamationTriangle,
    faQuestionCircle, faSyncAlt, faInfinity, faDownload, faCopy, faPlug, faTimesCircle);
}

export default function RemoteCard(props) {
  const {
    remoteName,
    remoteUrl,
    setFieldMissing,
    setInvalidUrl,
    setAddRemoteStatus,
    setDeleteFailed,
    setReloadView,
    repoId,
    setStatusCheck,
    setRemoteOperation,
  } = props;

  const remoteFormUrl = useRef();

  const [remoteUrlState, setRemoteUrlState] = useState(remoteUrl);
  const [editRemote, setEditRemote] = useState(false);
  const [deleteRemote, setDeleteRemote] = useState(false);

  var globalUrl = remoteUrl;

  const changeState = (remoteName, url) => {
    axios({
      url: globalAPIEndpoint,
      method: "POST",
      data: {
        query: `
            mutation {
              editRemote(repoId: "${repoId}", remoteName: "${remoteName}", remoteUrl: "${url}"){
                status
              }
            }
        `,
      },
    })
      .then((res) => {
        const { status } = res.data.data.editRemote;
        setStatusCheck(false);
        setRemoteOperation(" ");

        if (status === "REMOTE_EDIT_SUCCESS") {
          setReloadView(true);
        } else {
          setAddRemoteStatus(true);
        }
      })
      .catch(() => {
        setStatusCheck(true);
        setRemoteOperation("edit");
      });

    setRemoteUrlState(url);
    setEditRemote(false);
    setFieldMissing(false);
    setInvalidUrl(false);
    setAddRemoteStatus(false);
  };
  const getRemoteLogo = (gitRemoteHost) => {
    let remoteLogo = "";
    if (gitRemoteHost.match(/github/i)) {
      remoteLogo = (
        <FontAwesomeIcon
          icon={faGithub}
          className="w-2/12 mr-2 text-xl text-pink-500 xl:text-3xl lg:text-3xl md:text-2xl"
        ></FontAwesomeIcon>
      );
    } else if (gitRemoteHost.match(/gitlab/i)) {
      remoteLogo = (
        <FontAwesomeIcon
          icon={faGitlab}
          className="w-2/12 mr-2 text-xl text-pink-500 xl:text-3xl lg:text-3xl md:text-2xl"
        ></FontAwesomeIcon>
      );
    } else if (gitRemoteHost.match(/bitbucket/i)) {
      remoteLogo = (
        <FontAwesomeIcon
          icon={faBitbucket}
          className="w-2/12 mr-2 text-xl text-pink-500 xl:text-3xl lg:text-3xl md:text-2xl"
        ></FontAwesomeIcon>
      );
    } else if (gitRemoteHost.match(/codecommit/i)) {
      remoteLogo = (
        <FontAwesomeIcon
          icon={faAws}
          className="w-2/12 mr-2 text-xl text-pink-500 xl:text-3xl lg:text-3xl md:text-2xl"
        ></FontAwesomeIcon>
      );
    } else {
      remoteLogo = (
        <FontAwesomeIcon
          icon={faGitSquare}
          className="w-2/12 mr-2 text-xl text-pink-500 xl:text-3xl lg:text-3xl md:text-2xl"
        ></FontAwesomeIcon>
      );
    }

    return remoteLogo;
  };

  const remoteUrlHandler = (gitRemoteData) => {
    let remoteData = "";
    if (gitRemoteData) {
      if (gitRemoteData.match(/(^https)/gi)) {
        remoteData = (
          <a
            href={gitRemoteData}
            className="text-blue-400 hover:text-blue-500"
            target="_blank"
            rel="noopener noreferrer"
          >
            {gitRemoteData}
          </a>
        );
      } else {
        remoteData = <>{gitRemoteData}</>;
      }
    } else {
      remoteData = " ";
    }
    return remoteData;
  };

  return (
    <div className="w-full">
      {editRemote ? (
        <div className="flex items-center w-full py-6 mx-auto my-1 align-middle rounded-md shadow bg-gray-50">
          <div className="flex items-center justify-center w-1/5 mx-auto text-base text-gray-700 text-sans xl:text-lg lg:text-lg md:text-base">
            {getRemoteLogo(remoteUrlState)}
            <div className="w-1/2">{remoteName}</div>
          </div>
          <div className="flex items-center justify-center w-1/2 mx-auto text-base text-center text-gray-700 text-sans xl:text-lg lg:text-lg md:text-base">
            <input
              type="text"
              autoComplete="off"
              className={`rounded shadow-md w-full py-2 border-2 text-center xl:text-lg lg:text-lg md:text-base text-base items-center text-gray-800 bg-white`}
              style={{ borderColor: "rgb(113 166 196 / 33%)" }}
              placeholder={remoteUrlState}
              value={remoteUrlState}
              ref={remoteFormUrl}
              onChange={(event) => {
                setRemoteUrlState(event.target.value);
                setAddRemoteStatus(false);
                setFieldMissing(false);
                setInvalidUrl(false);
              }}
            ></input>
          </div>
          <div
            className="flex items-center text-center"
            style={{ width: "22%" }}
          >
            <div
              className="items-center w-5/12 p-1 py-2 mx-auto text-base font-semibold bg-blue-500 rounded cursor-pointer xl:text-lg lg:text-lg md:text-base hover:bg-blue-700"
              onClick={() => {
                let url = !remoteFormUrl.current.value
                  ? remoteUrlState.trim()
                  : remoteFormUrl.current.value.trim();
                if (url.match(/(\s)/g) || url.length === 0) {
                  setInvalidUrl(true);
                } else {
                  changeState(remoteName.trim(), url);
                }
              }}
            >
              <FontAwesomeIcon
                icon={faSave}
                className="text-white"
              ></FontAwesomeIcon>
            </div>
            <div
              className="items-center w-5/12 p-1 py-2 mx-auto text-base font-semibold bg-gray-500 rounded cursor-pointer xl:text-lg lg:text-lg md:text-base hover:bg-gray-700"
              onClick={() => {
                setRemoteUrlState(globalUrl);
                setEditRemote(false);
                setAddRemoteStatus(false);
                setFieldMissing(false);
                setInvalidUrl(false);
              }}
            >
              <FontAwesomeIcon
                icon={faTimes}
                className="text-white"
              ></FontAwesomeIcon>
            </div>
          </div>
        </div>
      ) : (
        <>
          {deleteRemote ? (
            " "
          ) : (
            <div className="flex items-center w-full py-6 mx-auto my-1 align-middle rounded-md shadow bg-gray-50">
              <div className="flex items-center justify-center w-1/4 mx-auto text-base text-gray-700 text-sans xl:text-lg lg:text-lg md:text-base">
                {getRemoteLogo(remoteUrlState)}
                <div className="w-1/2">{remoteName}</div>
              </div>
              <div className="flex items-center justify-center w-7/12 mx-auto text-base text-center text-gray-700 text-sans xl:text-lg lg:text-lg md:text-base">
                {remoteUrlHandler(remoteUrlState)}
              </div>

              <div
                className="flex items-center text-center"
                style={{ width: "22%" }}
              >
                <div
                  className="items-center w-5/12 p-1 py-2 mx-auto text-base font-semibold bg-blue-500 rounded cursor-pointer xl:text-lg lg:text-lg md:text-base hover:bg-blue-700"
                  onClick={() => {
                    setEditRemote(true);
                    setAddRemoteStatus(false);
                    setFieldMissing(false);
                    setInvalidUrl(false);
                  }}
                >
                  <FontAwesomeIcon
                    icon={faPencilAlt}
                    className="text-white"
                  ></FontAwesomeIcon>
                </div>
                <div
                  className="items-center w-5/12 p-1 py-2 mx-auto text-base font-semibold bg-red-500 rounded cursor-pointer xl:text-lg lg:text-lg md:text-base hover:bg-red-600"
                  onClick={() => {
                    axios({
                      url: globalAPIEndpoint,
                      method: "POST",
                      data: {
                        query: `
                                mutation {
                                  deleteRemote(repoId: "${repoId}", remoteName: "${remoteName}"){
                                    status
                                  }
                                }
                            `,
                      },
                    })
                      .then((res) => {
                        const { status } = res.data.data.deleteRemote;

                        setStatusCheck(false);
                        setRemoteOperation(" ");

                        if (status === "REMOTE_DELETE_SUCCESS") {
                          setReloadView(true);
                          setDeleteFailed(false);
                          setDeleteRemote(true);
                        } else {
                          setDeleteFailed(true);
                        }
                      })
                      .catch(() => {
                        setStatusCheck(true);
                        setRemoteOperation("delete");
                      });
                  }}
                >
                  <FontAwesomeIcon
                    icon={faTrashAlt}
                    className="text-white"
                  ></FontAwesomeIcon>
                </div>
              </div>
            </div>
          )}
        </>
      )}
    </div>
  );
}

SettingsPanel = () => {
  const { actions, selected, query } = useEditor((state, query) => {
    const currentNodeId = state.events.selected;
    let selected;

    if (currentNodeId) {
      selected = {
        id: currentNodeId,
        name: state.nodes[currentNodeId].data.name,
        parent: state.nodes[currentNodeId].data.parent,
        displayName:
          state.nodes[currentNodeId].data &&
          state.nodes[currentNodeId].data.displayName,
        settings:
          state.nodes[currentNodeId].related &&
          state.nodes[currentNodeId].related.settings,
        isDeletable: query.node(currentNodeId).isDeletable(),
        children:
          state.nodes[currentNodeId].data &&
          state.nodes[currentNodeId].data.nodes,
      };
    }

    return {
      selected,
    };
  });

  /** */
  const deleteThis = () => {
    actions.delete(selected.id);
  };

  /**
   * @param {number} offset
   * @returns {NodeId}
   */
  const otherSibling = (offset) => {
    const siblings = query.node(selected.parent).childNodes();
    const sibIx = siblings.findIndex((sib) => sib === selected.id);
    return siblings[sibIx + offset];
  };

  /**
   * @param {object} event
   */
  const handleUserKeyPress = (event) => {
    const { keyCode, target } = event;
    if (target.tagName.toLowerCase() === "body" && selected) {
      //8 backsp, 46 del
      if ((keyCode === 8 || keyCode === 46) && selected.id === "ROOT") {
        deleteChildren();
      }
      if (keyCode === 8) {
        //backspace
        const prevSib = otherSibling(-1);
        const parent = selected.parent;
        deleteThis();
        if (prevSib) actions.selectNode(prevSib);
        else actions.selectNode(parent);
      }
      if (keyCode === 46) {
        //del
        const nextSib = otherSibling(1);
        deleteThis();
        if (nextSib) actions.selectNode(nextSib);
      }
      if (keyCode === 37 && selected.parent)
        //left
        actions.selectNode(selected.parent);

      if (keyCode === 39) {
        //right
        if (selected.children && selected.children.length > 0) {
          actions.selectNode(selected.children[0]);
        } else if (selected.displayName === "Columns") {
          const node = query.node(selected.id).get();
          const child = node?.data?.linkedNodes?.Col0;
          if (child) actions.selectNode(child);
        }
      }
      if (keyCode === 38 && selected.parent) {
        //up
        const prevSib = otherSibling(-1);
        if (prevSib) actions.selectNode(prevSib);
        event.preventDefault();
      }
      if (keyCode === 40 && selected.parent) {
        //down
        const nextSib = otherSibling(1);
        if (nextSib) actions.selectNode(nextSib);
        event.preventDefault();
      }
    }
  };
  useEffect(() => {
    window.addEventListener("keydown", handleUserKeyPress);
    return () => {
      window.removeEventListener("keydown", handleUserKeyPress);
    };
  }, [handleUserKeyPress]);
  const hasChildren =
    selected && selected.children && selected.children.length > 0;

  /**
   * @returns {void}
   */
  const deleteChildren = () => {
    selected.children.forEach((child) => {
      actions.delete(child);
    });
  };

  /**
   * @returns {void}
   */
  const duplicate = () => {
    const {
      data: { parent },
    } = query.node(selected.id).get();
    const siblings = query.node(selected.parent).childNodes();
    const sibIx = siblings.findIndex((sib) => sib === selected.id);
    const elem = recursivelyCloneToElems(query)(selected.id);
    //console.log(elem);
    actions.addNodeTree(
      query.parseReactElement(elem).toNodeTree(),
      parent || "ROOT",
      sibIx + 1
    );
  };
  return (
    <div className="settings-panel card mt-1">
      <div className="card-header px-2 py-1">
        {selected && selected.displayName ? (
          <Fragment>
            <b>{selected.displayName}</b> settings
          </Fragment>
        ) : (
          "Settings"
        )}
      </div>
      <div className="card-body p-2">
        {selected ? (
          <Fragment>
            {selected.isDeletable && (
              <button className="btn btn-sm btn-danger" onClick={deleteThis}>
                <FontAwesomeIcon icon={faTrashAlt} className="me-1" />
                Delete
              </button>
            )}
            {hasChildren && !selected.isDeletable ? (
              <button
                className="btn btn-sm btn-danger"
                onClick={deleteChildren}
              >
                <FontAwesomeIcon icon={faTrashAlt} className="me-1" />
                Delete contents
              </button>
            ) : (
              <button
                title="Duplicate element with its children"
                className="btn btn-sm btn-secondary ms-2"
                onClick={duplicate}
              >
                <FontAwesomeIcon icon={faCopy} className="me-1" />
                Clone
              </button>
            )}
            <hr className="my-2" />
            {selected.settings && React.createElement(selected.settings)}
          </Fragment>
        ) : (
          "No element selected"
        )}
      </div>
    </div>
  );
}

RenderNode = ({ render }) => {
  const { id } = useNode();
  const { actions, query, isActive } = useEditor((state) => ({
    isActive: state.nodes[id].events.selected,
  }));

  const {
    isHover,
    dom,
    name,
    moveable,
    deletable,
    connectors: { drag },
    parent,
  } = useNode((node) => ({
    isHover: node.events.hovered,
    dom: node.dom,
    name: node.data.custom.displayName || node.data.displayName,
    moveable: query.node(node.id).isDraggable(),
    deletable: query.node(node.id).isDeletable(),
    parent: node.data.parent,
    props: node.data.props,
  }));

  const currentRef = useRef();

  const getPos = useCallback((dom) => {
    const { top, left, bottom, height, width, right } = dom
      ? dom.getBoundingClientRect()
      : { top: 0, left: 0, bottom: 0, right: 0, height: 0, width: 0 };
    return {
      top: `${top > 0 ? top : bottom}px`,
      left: `${left}px`,
      topn: top,
      leftn: left,
      height,
      width,
      right,
      bottom,
    };
  }, []);

  const scroll = useCallback(() => {
    const { current: currentDOM } = currentRef;
    if (!currentDOM) return;
    const { top, left } = getPos(dom);
    currentDOM.style.top = top;
    currentDOM.style.left = left;
  }, [dom, getPos]);

  useEffect(() => {
    document
      .getElementById("builder-main-canvas")
      .addEventListener("scroll", scroll);
    document.addEventListener("scroll", scroll);

    return () => {
      document
        .getElementById("builder-main-canvas")
        .removeEventListener("scroll", scroll);
      document.removeEventListener("scroll", scroll);
    };
  }, [scroll]);

  /**
   * @returns {void}
   */
  const duplicate = () => {
    const {
      data: { parent },
    } = query.node(id).get();
    const siblings = query.node(parent).childNodes();
    const sibIx = siblings.findIndex((sib) => sib === id);
    const elem = recursivelyCloneToElems(query)(id);
    actions.addNodeTree(
      query.parseReactElement(elem).toNodeTree(),
      parent || "ROOT",
      sibIx + 1
    );
  };
  return (
    <>
      {(isActive || isHover) &&
      id !== "ROOT" &&
      !(name === "Column" && !isActive)
        ? ReactDOM.createPortal(
            <div
              ref={currentRef}
              className={`selected-indicator ${
                isActive ? "activeind" : "hoverind"
              } px-1 text-white`}
              style={{
                left: getPos(dom).left,
                top: getPos(dom).top,
                zIndex: 9999,
              }}
            >
              <div className="dispname me-3">{name}</div>{" "}
              {moveable && isActive && (
                <button
                  className="btn btn-link btn-builder-move p-0"
                  ref={drag}
                >
                  <FontAwesomeIcon icon={faArrowsAlt} className="me-2" />
                </button>
              )}
              {isActive && parent && parent !== "ROOT" ? (
                <FontAwesomeIcon
                  icon={faArrowUp}
                  className="me-2"
                  onClick={() => {
                    actions.selectNode(parent);
                  }}
                />
              ) : null}
              {deletable && isActive
                ? [
                    <FontAwesomeIcon
                      key={1}
                      icon={faCopy}
                      onClick={duplicate}
                      className="me-2"
                    />,
                    <FontAwesomeIcon
                      key={2}
                      icon={faTrashAlt}
                      className="me-2"
                      onMouseDown={(e) => {
                        e.stopPropagation();
                        actions.delete(id);
                        setTimeout(() => actions.selectNode(parent), 0);
                      }}
                    />,
                  ]
                : null}
            </div>,
            document.querySelector("#builder-main-canvas")
          )
        : null}
      {render}
    </>
  );
}

TransactionsTable = () => {
  const totalTransactions = transactions.length;

  const TableRow = (props) => {
    const { invoiceNumber, subscription, price, issueDate, dueDate, status } = props;
    const statusVariant = status === "Paid" ? "success"
      : status === "Due" ? "warning"
        : status === "Canceled" ? "danger" : "primary";

    return (
      <tr>
        <td>
          <Card.Link as={Link} to={Routes.Invoice.path} className="fw-normal">
            {invoiceNumber}
          </Card.Link>
        </td>
        <td>
          <span className="fw-normal">
            {subscription}
          </span>
        </td>
        <td>
          <span className="fw-normal">
            {issueDate}
          </span>
        </td>
        <td>
          <span className="fw-normal">
            {dueDate}
          </span>
        </td>
        <td>
          <span className="fw-normal">
            ${parseFloat(price).toFixed(2)}
          </span>
        </td>
        <td>
          <span className={`fw-normal text-${statusVariant}`}>
            {status}
          </span>
        </td>
        <td>
          <Dropdown as={ButtonGroup}>
            <Dropdown.Toggle as={Button} split variant="link" className="text-dark m-0 p-0">
              <span className="icon icon-sm">
                <FontAwesomeIcon icon={faEllipsisH} className="icon-dark" />
              </span>
            </Dropdown.Toggle>
            <Dropdown.Menu>
              <Dropdown.Item>
                <FontAwesomeIcon icon={faEye} className="me-2" /> View Details
              </Dropdown.Item>
              <Dropdown.Item>
                <FontAwesomeIcon icon={faEdit} className="me-2" /> Edit
              </Dropdown.Item>
              <Dropdown.Item className="text-danger">
                <FontAwesomeIcon icon={faTrashAlt} className="me-2" /> Remove
              </Dropdown.Item>
            </Dropdown.Menu>
          </Dropdown>
        </td>
      </tr>
    );
  };

  return (
    <Card border="light" className="table-wrapper table-responsive shadow-sm">
      <Card.Body className="pt-0">
        <Table hover className="user-table align-items-center">
          <thead>
            <tr>
              <th className="border-bottom">#</th>
              <th className="border-bottom">Bill For</th>
              <th className="border-bottom">Issue Date</th>
              <th className="border-bottom">Due Date</th>
              <th className="border-bottom">Total</th>
              <th className="border-bottom">Status</th>
              <th className="border-bottom">Action</th>
            </tr>
          </thead>
          <tbody>
            {transactions.map(t => <TableRow key={`transaction-${t.invoiceNumber}`} {...t} />)}
          </tbody>
        </Table>
        <Card.Footer className="px-3 border-0 d-lg-flex align-items-center justify-content-between">
          <Nav>
            <Pagination className="mb-2 mb-lg-0">
              <Pagination.Prev>
                Previous
              </Pagination.Prev>
              <Pagination.Item active>1</Pagination.Item>
              <Pagination.Item>2</Pagination.Item>
              <Pagination.Item>3</Pagination.Item>
              <Pagination.Item>4</Pagination.Item>
              <Pagination.Item>5</Pagination.Item>
              <Pagination.Next>
                Next
              </Pagination.Next>
            </Pagination>
          </Nav>
          <small className="fw-bold">
            Showing <b>{totalTransactions}</b> out of <b>25</b> entries
          </small>
        </Card.Footer>
      </Card.Body>
    </Card>
  );
}