<div class="menu" data-identifyelement="217">
<div data-test-id="rule-item-actions" id="ember375" class="app-dropdown-group ember-basic-dropdown ember-view" data-identifyelement="218"><div aria-owns="ember-basic-dropdown-content-ember375" tabindex="0" data-ebd-id="ember375-trigger" role="button" id="ember376" class="ember-basic-dropdown-trigger ember-basic-dropdown-trigger--in-place ember-view" data-identifyelement="219">          <svg xmlns="http://www.w3.org/2000/svg" width="60" height="60" viewBox="0 0 60 60" class="app-icon dropdown-toggle" data-identifyElement="220"><path fill-rule="evenodd" d="M30 20.5c-2.761 0-5-2.127-5-4.75S27.239 11 30 11s5 2.127 5 4.75-2.239 4.75-5 4.75zm0 14.25c-2.761 0-5-2.127-5-4.75s2.239-4.75 5-4.75 5 2.127 5 4.75-2.239 4.75-5 4.75zM30 49c-2.761 0-5-2.127-5-4.75s2.239-4.75 5-4.75 5 2.127 5 4.75S32.761 49 30 49z" data-identifyElement="221"></path></svg>
</div>  <div id="ember-basic-dropdown-content-ember375" class="ember-basic-dropdown-content-placeholder" style="display: none;"></div>

</div>    </div>


add this to my existing react code 

import React from "react";
import { FwToggle } from "@freshworks/crayons/react";

const calculateLastModified = (updated_at) => {
  const updatedDate = new Date(updated_at);
  const currentDate = new Date();

  const diffInMilliseconds = currentDate - updatedDate;
  const seconds = Math.floor(diffInMilliseconds / 1000);
  const minutes = Math.floor(seconds / 60);
  const hours = Math.floor(minutes / 60);
  const days = Math.floor(hours / 24);
  const months = Math.floor(days / 30); 
  const years = Math.floor(days / 365); 

  if (years > 0) {
    return years === 1 ? "a year ago" : `${years} years ago`;
  } else if (months > 0) {
    return months === 1 ? "a month ago" : `${months} months ago`;
  } else if (days > 0) {
    return `${days} day${days > 1 ? "s" : ""} ago`;
  } else if (hours > 0) {
    return `${hours} hour${hours > 1 ? "s" : ""} ago`;
  } else if (minutes > 0) {
    return `${minutes} minute${minutes > 1 ? "s" : ""} ago`;
  } else {
    return "Just now";
  }
};

const AutomationCard = ({ rule = {}, index, isFirstInGroup = false }) => {
  const {
    name = "Default Rule Name",
    description = "Default Rule Description",
    updated_at = "N/A",
    last_updated_by = "Unknown",
    affected_tickets_count = "--",
    active = false,
    position = position
  } = rule;

  return (
    <div
      className="fw-card-1 fw-flex fw-flex-column"
      style={{
        overflow: "hidden",
        border: "0.5px solid #ddd",
        backgroundColor: isFirstInGroup ? "#43e955" : "#ff4d00",
      }}
    >
      <section
        className="fw-flex-grow fw-px-16 fw-flex fw-flex-row"
        style={{ justifyContent: "space-between", alignItems: "center" }}
      >
       <div style={{ paddingLeft: "16px" }}> 
       <h5 className="fw-type-h2 fw-mt-0 fw-mb-8">
          {position}. {name}
       </h5>
       <p className="fw-type-xs fw-mt-0 fw-mb-20">{description}</p>
       </div>

        <div style={{ padding: "8px 16px" }}>
          <FwToggle size="medium" checked={active} />
        </div>
      </section>

      <section
        className="fw-type-xs fw-flex fw-flex-row fw-items-center options"
        style={{ width: "100%", background: "#f5f5f5", padding: "10px 16px", borderRadius: "5px" }}
      >
        <div
          style={{
            display: "flex",
            alignItems: "center",
            justifyContent: "space-evenly",
            width: "100%",
            fontSize: "14px",
            color: "#666",
            textAlign: "center",
          }}
        >
          <span>Last Modified: <strong>{calculateLastModified(updated_at)}</strong></span>
          <span>|</span>
          <span>By: {last_updated_by}</span>
          <span>|</span>
          <span>Impacted tickets (Last 7 days): {affected_tickets_count}</span>
        </div>
      </section>
    </div>
  );
};

export default AutomationCard;

Note : Without Removing anything from my code