@eka-care/abdm-dashboard-stg 0.0.1

package/src/components/abha-metric.tsx

@@ -0,0 +1,322 @@
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { useGetCardMutation } from "../features/cardApis/cardApi";
+import {
+  faChartLine,
+  faCheck,
+  faClinicMedical,
+  faFileMedicalAlt,
+  faLink,
+} from "@fortawesome/free-solid-svg-icons";
+import MetricCard from "./cards/metric-card";
+import { useEffect, useState } from "react";
+import { formatDateToBackendISO, getYesterday } from "../utils/helpers";
+import { DATA_DATE_FILTERS } from "../utils/constants";
+import { getClinicId, getHfrId } from "../features/slice/landingApiSlice";
+import { useSelector } from "react-redux";
+import CustomCalendar from "./custom/calendar";
+
+type ValuePiece = Date | null;
+
+type Value = ValuePiece | [ValuePiece, ValuePiece];
+
+const AbhaMetric = () => {
+  const clinicId = useSelector(getClinicId);
+  const hfrId = useSelector(getHfrId);
+  const [isStartDateOpen, setIsStartDateOpen] = useState<boolean>(false);
+  const [isEndDateOpen, setIsEndDateOpen] = useState<boolean>(false);
+  const [getCard, { data, isSuccess }] = useGetCardMutation();
+  const [metricData, setMetricData] = useState<any[]>([
+    { title: "loader" },
+    { title: "loader" },
+    { title: "loader" },
+  ]);
+  const [date, setDate] = useState<{
+    from: Value;
+    to: Value;
+  }>({
+    from: null,
+    to: null,
+  });
+
+  const [selectedDataFilter, setSelectedDataFilter] =
+    useState<DATA_DATE_FILTERS>(DATA_DATE_FILTERS.YESTERDAY);
+
+  const [cardApiBody, setCardApiBody] = useState<{
+    from?: string;
+    to?: string;
+  }>({
+    from: getYesterday().start,
+    to: getYesterday().end,
+  });
+
+  const today = new Date();
+
+  useEffect(() => {
+    getCard({
+      clinicId: clinicId ?? "",
+      body: {
+        start_date: cardApiBody?.from,
+        end_date: cardApiBody?.to,
+      },
+    });
+  }, [cardApiBody]);
+
+  useEffect(() => {
+    if (isSuccess && data) {
+      setMetricData(data);
+    }
+  }, [isSuccess, data]);
+
+  const handleDateChange = (key: "from" | "to", value: Value) => {
+    if (Array.isArray(value)) {
+      console.warn("Range mode not supported here", value);
+      return;
+    }
+
+    setDate({
+      ...date,
+      [key]: value,
+    });
+
+    setCardApiBody((prev) => ({
+      ...prev,
+      [key]: value ? value.toISOString() : "",
+    }));
+  };
+
+  const handleDateFilterChange = (dateFilter: DATA_DATE_FILTERS): void => {
+    if (dateFilter === DATA_DATE_FILTERS.YESTERDAY) {
+      setCardApiBody({
+        from: getYesterday().start,
+        to: getYesterday().end,
+      });
+      setSelectedDataFilter(dateFilter);
+      return;
+    } else if (dateFilter === DATA_DATE_FILTERS.MONTHLY) {
+      const startOfMonth = new Date(today.getFullYear(), today.getMonth(), 1);
+
+      const endDate = today;
+
+      const from = formatDateToBackendISO(
+        startOfMonth.toISOString().split("T")[0]
+      );
+
+      const to = formatDateToBackendISO(endDate.toISOString().split("T")[0]);
+
+      setCardApiBody({ from, to });
+      setSelectedDataFilter(dateFilter);
+      return;
+    } else if (dateFilter === DATA_DATE_FILTERS.CUSTOM) {
+      setIsStartDateOpen(true);
+
+      if (Array.isArray(date?.from) || Array.isArray(date?.to)) {
+        console.warn("Range mode not supported here");
+        return;
+      }
+
+      setCardApiBody({
+        from: date?.from ? date?.from?.toISOString() : "",
+        to: date?.to ? date?.to?.toISOString() : "",
+      });
+      setSelectedDataFilter(dateFilter);
+    }
+  };
+
+  return (
+    <div className="abhaDash-bg-gradient-to-r abhaDash-from-[#DBE5FF] abhaDash-to-[#8EAEFF] abhaDash-p-25 ">
+      <div className="abhaDash-flex abhaDash-gap-20 max-md:abhaDash-justify-between">
+        <div className="AbhaTitlesSubheadline max-md:AbhaTitle2Subheadline">ABHA Metrics</div>
+        {hfrId && (
+          <div
+            className="AbhaBody2Regular 
+        abhaDash-gap-5 abhaDash-py-5 
+        abhaDash-w-fit abhaDash-px-20
+         abhaDash-flex abhaDash-justify-center 
+         abhaDash-items-center 
+          abhaDash-text-text-primary-dark
+           abhaDash-bg-bg-primary-container 
+           abhaDash-border
+           abhaDash-border-bg-white
+            abhaDash-rounded-20
+            
+            max-md:abhaDash-px-10"
+          >
+            <FontAwesomeIcon icon={faClinicMedical} />
+            HFR ID: {hfrId}
+          </div>
+        )}
+      </div>
+      <div className="AbhaBody2Regular abhaDash-text-text-neutral-800-dark abhaDash-py-10">
+        Data for today and this month (last synced 1 day ago)
+      </div>
+      <div className="abhaDash-flex abhaDash-flex-wrap abhaDash-gap-8 ">
+        <div
+          onClick={
+            isSuccess
+              ? () => handleDateFilterChange(DATA_DATE_FILTERS.YESTERDAY)
+              : undefined
+          }
+          className={`
+            ${isSuccess ? "abhaDash-cursor-pointer" : "abhaDash-cursor-not-allowed"}
+            ${
+              selectedDataFilter === DATA_DATE_FILTERS.YESTERDAY
+                ? "abhaDash-border-text-primary abhaDash-text-text-primary"
+                : "abhaDash-border-border-neutral-300-strokedark"
+            } abhaDash-flex abhaDash-items-center abhaDash-gap-5 abhaDash-py-10 abhaDash-px-12 abhaDash-bg-bg-white abhaDash-border-1 abhaDash-rounded-10`}
+        >
+          {selectedDataFilter === DATA_DATE_FILTERS.YESTERDAY && (
+            <FontAwesomeIcon icon={faCheck} />
+          )}
+          Yesterday
+        </div>
+        <div
+          onClick={
+            isSuccess
+              ? () => handleDateFilterChange(DATA_DATE_FILTERS.MONTHLY)
+              : undefined
+          }
+          className={`
+            ${isSuccess ? "abhaDash-cursor-pointer" : "abhaDash-cursor-not-allowed"}
+            ${
+              selectedDataFilter === DATA_DATE_FILTERS.MONTHLY
+                ? "abhaDash-border-text-primary abhaDash-text-text-primary"
+                : "abhaDash-border-border-neutral-300-strokedark"
+            }  abhaDash-flex abhaDash-items-center abhaDash-gap-5 abhaDash-py-10 abhaDash-px-12 abhaDash-bg-bg-white abhaDash-border-1 abhaDash-rounded-10`}
+        >
+          {selectedDataFilter === DATA_DATE_FILTERS.MONTHLY && (
+            <FontAwesomeIcon icon={faCheck} />
+          )}
+          Monthly
+        </div>
+        <div
+          className={`abhaDash-flex ${isSuccess ? "abhaDash-cursor-pointer" : "abhaDash-cursor-not-allowed"}`}
+        >
+          <div
+            onClick={
+              isSuccess
+                ? () => handleDateFilterChange(DATA_DATE_FILTERS.CUSTOM)
+                : undefined
+            }
+            className={`${
+              selectedDataFilter === DATA_DATE_FILTERS.CUSTOM
+                ? "abhaDash-border-text-primary abhaDash-text-text-primary"
+                : "abhaDash-border-border-neutral-300-strokedark"
+            } abhaDash-flex abhaDash-items-center abhaDash-gap-5 abhaDash-py-10 abhaDash-px-12 abhaDash-bg-bg-white abhaDash-border-y-1 abhaDash-border-l-1 abhaDash-rounded-l-10`}
+          >
+            {selectedDataFilter === DATA_DATE_FILTERS.CUSTOM && (
+              <FontAwesomeIcon icon={faCheck} />
+            )}
+            Custom
+          </div>
+
+          <div
+            className={`${
+              selectedDataFilter === DATA_DATE_FILTERS.CUSTOM
+                ? "abhaDash-border-text-primary"
+                : "abhaDash-border-border-neutral-300-strokedark abhaDash-text-border-neutral-300-strokedark abhaDash-cursor-not-allowed"
+            } abhaDash-flex abhaDash-items-center abhaDash-gap-5 abhaDash-py-10 abhaDash-px-12 abhaDash-bg-bg-white abhaDash-border-y-1 abhaDash-border-l-1 text-center`}
+          >
+            <CustomCalendar
+              value={date.from}
+              onChange={(val) => handleDateChange("from", val)}
+              placeholder="Start Date"
+              disabled={selectedDataFilter !== DATA_DATE_FILTERS.CUSTOM}
+              minDate={undefined}
+              isOpen={isStartDateOpen}
+              onCalendarClose={() => {
+                setIsEndDateOpen(true);
+              }}
+            />
+          </div>
+          <div
+            className={`${
+              selectedDataFilter === DATA_DATE_FILTERS.CUSTOM
+                ? "abhaDash-border-text-primary"
+                : "abhaDash-border-border-neutral-300-strokedark abhaDash-text-border-neutral-300-strokedark abhaDash-cursor-not-allowed"
+            } abhaDash-py-10 abhaDash-px-12 abhaDash-bg-bg-white abhaDash-border-y-1`}
+          >
+            -
+          </div>
+          <div
+            className={`${
+              selectedDataFilter === DATA_DATE_FILTERS.CUSTOM
+                ? "abhaDash-border-text-primary"
+                : "abhaDash-border-border-neutral-300-strokedark abhaDash-text-border-neutral-300-strokedark abhaDash-cursor-not-allowed"
+            } abhaDash-flex abhaDash-items-center abhaDash-gap-5 abhaDash-py-10 abhaDash-px-12 abhaDash-bg-bg-white abhaDash-border-y-1 abhaDash-border-r-1 abhaDash-rounded-r-10 text-center`}
+          >
+            <CustomCalendar
+              value={date.to}
+              onChange={(val) => handleDateChange("to", val)}
+              placeholder="End Date"
+              disabled={selectedDataFilter !== DATA_DATE_FILTERS.CUSTOM}
+              isOpen={isEndDateOpen}
+              minDate={
+                date.from instanceof Date
+                  ? new Date(
+                      date.from.getFullYear(),
+                      date.from.getMonth(),
+                      date.from.getDate() + 1
+                    )
+                  : undefined
+              }
+              onCalendarClose={() => {
+                setIsEndDateOpen(false);
+                setIsStartDateOpen(false);
+              }}
+            />
+          </div>
+        </div>
+      </div>
+      <div className="abhaDash-flex abhaDash-flex-wrap abhaDash-gap-20 abhaDash-h-full abhaDash-pt-20 ">
+        {metricData?.map((val, idx) => {
+          return (
+            <MetricCard
+              isDataLoaded={isSuccess}
+              key={val?.id ?? idx}
+              title={val?.title}
+              successText={
+                val?.title?.includes("Consent") ? "Successful" : "KYC Linked"
+              }
+              failedText={
+                val?.title?.includes("Consent") ? "Unsuccessful" : "Non KYC"
+              }
+              success={
+                val?.id?.includes("consent")
+                  ? val?.data?.success
+                  : val?.data?.kyc
+              }
+              failed={
+                val?.id?.includes("consent")
+                  ? val?.data?.failed
+                  : val?.data?.non_kyc
+              }
+              total={val?.data?.total}
+              cardIcon={
+                val?.id?.includes("abha")
+                  ? faChartLine
+                  : val?.id?.includes("records")
+                    ? faLink
+                    : faFileMedicalAlt
+              }
+            />
+          );
+        })}
+        {/* <div className="abhaDash-w-260 abhaDash-h-[55%] abhaDash-border-1 abhaDash-rounded-20 abhaDash-border-bg-primary-light abhaDash-bg-gradient-to-r abhaDash-from-[#95E9C1] abhaDash-to-[#D8FF71] abhaDash-p-20">
+          <div className="AbhaTitleHeadline abhaDash-text-text-primary-dark">
+            ₹400
+          </div>
+          <div className="AbhaTitle2Headline">DHIS Earnings</div>
+          <div className="abhaDash-border abhaDash-border-border-green-light abhaDash-my-10"></div>
+          <div className="AbhaTitle2Headline abhaDash-text-text-primary abhaDash-py-6">
+            See Calculation
+          </div>
+          <div className="AbhaBody3Regular abhaDash-text-text-neutral-800-dark">
+            Last synced 1 day ago*
+          </div>
+        </div> */}
+      </div>
+    </div>
+  );
+};
+
+export default AbhaMetric;

package/src/components/abha-workflows.tsx

@@ -0,0 +1,225 @@
+import {
+  faDownload,
+  faLink,
+  faUserPlus,
+} from "@fortawesome/free-solid-svg-icons";
+import WorkFlowCard from "./cards/workflow-card";
+import pagify from "@eka-care/pagify-sdk";
+import { PdfPage1 } from "../appointment-token-pdf/pdf-page1";
+import { renderToStaticMarkup } from "react-dom/server";
+import { PdfPage2 } from "../appointment-token-pdf/pdf-page2";
+import { useSelector } from "react-redux";
+import { getQrURl, getClinicName } from "../features/slice/landingApiSlice";
+import QRCode from "react-qr-code";
+
+const AbhaWorkFlows = ({
+  setShowAbhaSDK,
+  setShowWorkflowIframe,
+}: {
+  setShowAbhaSDK: (show: boolean) => void;
+  setShowWorkflowIframe: (show: boolean) => void;
+}) => {
+  const qrUrl = useSelector(getQrURl);
+  const clinicName = useSelector(getClinicName);
+
+  const handlePdfGenerate = async () => {
+    const innerHtml = renderToStaticMarkup(
+      <PdfPage1
+        qrUrl={qrUrl ?? "test"}
+        clinicName={clinicName ?? "Test Clinic"}
+      />
+    );
+    const innerHtml1 = renderToStaticMarkup(<PdfPage2 />);
+
+    const bodyHtml =
+      "<!doctype html>" +
+      `<div id="pagify-root" class="page-break" style="transform:rotate(90deg);">` +
+      innerHtml +
+      `</div>` +
+      `<div class="page-break-avoid" style="transform:rotate(90deg);">` +
+      innerHtml1 +
+      `</div>`;
+
+    await pagify.render({
+      head_html: `
+        <style>
+          .page-break-avoid { page-break-inside: avoid; }
+            .page-break {
+                page-break-after: always;
+            }
+        </style>
+    `,
+      body_html: bodyHtml,
+      page_size: "A4",
+      onPdfReady: (blobUrl: string) => {
+        const a = document.createElement("a");
+        a.href = blobUrl;
+        a.target = "_blank";
+        document.body.appendChild(a);
+        a.click();
+        a.remove();
+      },
+      onPdfError: (error: any) => {
+        console.error("PDF generation failed:", error);
+      },
+    } as any);
+  };
+
+  function waitForElement(
+    id: string,
+    callback: (element: HTMLElement) => void
+  ): void {
+    const interval = setInterval(() => {
+      const el = document.getElementById(id);
+      if (el) {
+        clearInterval(interval);
+        callback(el);
+      }
+    }, 50);
+  }
+
+  const handleAbhaSDKMount = () => {
+    setShowAbhaSDK(true);
+
+    if (typeof window === "undefined") return;
+
+    waitForElement("abha-container", () => {
+      console.log("🎉 abha-container found!");
+
+      if (typeof window.initAbhaApp !== "function") {
+        console.error("❌ initAbhaApp is not available on window.");
+        return;
+      }
+
+      window.initAbhaApp({
+        clientId: "doc-web",
+        containerId: "abha-container",
+        method: "create_abha_with_mobile",
+        data: {},
+
+        onSuccess: ({ response }) => {
+          console.log("✅ ABHA Success:", response);
+          const t = new window.Bridge();
+          t.refreshPatientDirectory();
+          setShowAbhaSDK(false);
+        },
+
+        onError: ({ error, response }) => {
+          console.error("❌ ABHA Error:", error || response);
+          setShowAbhaSDK(false);
+        },
+
+        onAbhaClose: () => {
+          console.log("❌ ABHA Close");
+          const t = new window.Bridge();
+          t.refreshPatientDirectory();
+          setShowAbhaSDK(false);
+        },
+      });
+    });
+  };
+
+  const handleIframeMount = (type: string) => {
+    setShowWorkflowIframe(true);
+    const iframeUrl =
+      type === "upload"
+        ? "https://demo.arcade.software/R8kEyxUclnWTItas93qN?embed&embed_mobile=tab&embed_desktop=inline&show_copy_link=true"
+        : "https://demo.arcade.software/Bx1vEspdLmt5omIcks6H?embed&embed_mobile=tab&embed_desktop=inline&show_copy_link=true";
+    waitForElement("iframe-container", () => {
+      const container = document.getElementById("iframe-container");
+      if (!container) return;
+
+      container.innerHTML = "";
+      const iframe = document.createElement("iframe");
+      iframe.src = iframeUrl;
+      iframe.title = "Upload and Organize Patient Lab Reports";
+      iframe.frameBorder = "0";
+      iframe.loading = "lazy";
+      iframe.allowFullscreen = true;
+      iframe.allow = "clipboard-write";
+      iframe.className = "abhaDash-h-full abhaDash-w-full";
+      iframe.style.colorScheme = "light";
+
+      container.appendChild(iframe);
+    });
+  };
+
+  return (
+    <div className="abhaDash-p-25 abhaDash-h-[25%] ">
+      <div className="AbhaTitlesSubheadline">ABHA Workflows</div>
+
+      <div className="AbhaBody2Regular abhaDash-text-text-neutral-800-dark abhaDash-py-10">
+        Direct access to ABDM functions
+      </div>
+
+      <div className="abhaDash-flex abhaDash-flex-wrap abhaDash-gap-20 abhaDash-pt-20 abhaDash-pb-70 abhaDash-gap-y-20">
+        <WorkFlowCard
+          bodyColor="abhaDash-bg-bg-primary-light"
+          bodyText="Generate ABHA for new patients"
+          icon={faUserPlus}
+          iconBgGradColorFrom="abhaDash-from-[#2B7FFF]"
+          iconBgGradColorTo="abhaDash-to-[#155DFC]"
+          btnText="Create ABHA"
+          disabled={false}
+          cta={handleAbhaSDKMount}
+          mobileStyling={"max-md:abhaDash-w-169"}
+        />
+        
+        <WorkFlowCard
+          bodyColor="abhaDash-bg-bg-yellow-light"
+          bodyText="Retrieve patient data from ABDM"
+          icon={faDownload}
+          iconBgGradColorFrom="abhaDash-from-[#FE9A00]"
+          iconBgGradColorTo="abhaDash-to-[#FF6900]"
+          btnText="Fetch Records"
+          disabled={false}
+          cta={() => handleIframeMount("fetch")}
+          mobileStyling={"max-md:abhaDash-w-169"}
+        />
+        <WorkFlowCard
+          bodyColor="abhaDash-bg-bg-green-light"
+          bodyText="Connect patient records to ABHA"
+          icon={faLink}
+          iconBgGradColorFrom="abhaDash-from-[#00BC7D]"
+          iconBgGradColorTo="abhaDash-to-[#009966]"
+          btnText="Upload & Link Records"
+          disabled={false}
+          cta={() => handleIframeMount("upload")}
+          mobileStyling={"max-md:abhaDash-w-360 max-md:abhaDash-flex max-md:abhaDash-gap-10 max-md:abhaDash-items-center"}
+        />
+
+        <div className="abhaDash-h-full abhaDash-w-380 abhaDash-pb-20">
+          <div className="abhaDash-w-full abhaDash-from-[#205CFF] abhaDash-to-[#AE71D2] abhaDash-bg-gradient-to-r  abhaDash-border-1 abhaDash-rounded-20 abhaDash-border-bg-neutral-100-bg-dark  abhaDash-p-20 ">
+            <div className="abhaDash-flex abhaDash-h-135 abhaDash-gap-20 abhaDash-text-text-white ">
+              <div className="abhaDash-h-full">
+                <QRCode
+                  className="abhaDash-h-full abhaDash-w-full abhaDash-border abhaDash-border-bg-04 abhaDash-p-10 abhaDash-rounded-10"
+                  value={qrUrl ?? ""}
+                />
+              </div>
+
+              <div className="abhaDash-flex-col abhaDash-flex abhaDash-justify-center">
+                <div className="AbhaTitle2Headline abhaDash-mb-10">
+                  Instant Appointment for Patients
+                </div>
+                <div className="AbhaBody3Regular abhaDash-mb-10">
+                  Patients can generate ABHA and book appointments using this QR
+                  Code.
+                </div>
+                <div
+                  className="AbhaTitle3Headline abhaDash-py-5 abhaDash-w-fit abhaDash-px-20 abhaDash-flex abhaDash-justify-center  abhaDash-text-text-primary abhaDash-bg-bg-white  abhaDash-rounded-20 abhaDash-cursor-pointer"
+                  onClick={handlePdfGenerate}
+                >
+                  {/* Download in your Language adding soon */}
+                  Download and Share
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default AbhaWorkFlows;

package/src/components/automate-strip.tsx

@@ -0,0 +1,29 @@
+const AutomateStrip = ({
+  setShowAutomateModal,
+}: {
+  setShowAutomateModal: (show: boolean) => void;
+}) => {
+  return (
+    <div className="abhaDash-px-25">
+      <div className="max-md:abhaDash-flex-col max-md:abhaDash-py-14 max-md:abhaDash-items-start abhaDash-bg-bg-green-light abhaDash-mx-auto abhaDash-flex abhaDash-px-20 abhaDash-py-8 abhaDash-rounded-10 abhaDash-justify-between abhaDash-items-center abhaDash-mt-20">
+        <div className="AbhaBody2Regular max-md:abhaDash-hidden">
+          Maximise your earnings by sending patients KYC requests, ABHA creation
+          and consent for accessing medical history
+        </div>
+
+        <div className="AbhaBody2Regular md:abhaDash-hidden">
+          Maximise your earnings by sending patients <br />
+          - KYC requests, <br />
+          - ABHA creation, and <br />- Consent for accessing medical history
+        </div>
+        <div
+          onClick={() => setShowAutomateModal(true)}
+          className="max-md:abhaDash-w-full max-md:abhaDash-text-center max-md:abhaDash-mt-14 AbhaTitle3Headline abhaDash-px-12 abhaDash-py-10 abhaDash-rounded-8 abhaDash-bg-bg-doc abhaDash-text-text-white abhaDash-cursor-pointer"
+        >
+          Automate tasks
+        </div>
+      </div>
+    </div>
+  );
+};
+export default AutomateStrip;

package/src/components/cards/metric-card.tsx

@@ -0,0 +1,75 @@
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import CardLoader from "../loader/card-loader";
+import { faCircleInfo } from "@fortawesome/free-solid-svg-icons";
+import Loader from "../loader/abdm-dash-loader";
+
+const MetricCard = ({
+  isDataLoaded,
+  total,
+  success,
+  failed,
+  successText,
+  failedText,
+  title,
+  cardIcon,
+}: {
+  isDataLoaded?: boolean;
+  total?: number;
+  success?: number;
+  failed?: number;
+  successText?: string;
+  failedText?: string;
+  title?: string;
+  cardIcon?: any;
+}) => {
+  return isDataLoaded ? (
+    <>
+      <div className="abhaDash-w-260 max-md:abhaDash-w-[47%] abhaDash-border-1 abhaDash-rounded-20 abhaDash-border-bg-green-dark abhaDash-bg-bg-white abhaDash-p-20">
+        <div className="abhaDash-flex abhaDash-justify-between">
+          <div className="AbhaTitleHeadline abhaDash-text-text-primary-dark">
+            {total ?? 0}
+          </div>
+          <FontAwesomeIcon
+            className="abhaDash-text-text-primary abhaDash-w-28 abhaDash-h-28"
+            icon={cardIcon}
+          />
+        </div>
+        <div className="AbhaTitle2Headline">{title}</div>
+
+        <CardLoader value={success ?? 0} total={total ?? 0} />
+
+        <div className="abhaDash-flex abhaDash-justify-between abhaDash-pt-5">
+          <div className="AbhaBody2Regular abhaDash-text-text-neutral-800-dark abhaDash-flex">
+            {successText}
+            <div
+              title={
+                title?.includes("Consent")
+                  ? "No. Of consent requests granted with atleast 1 medical record(s) successfully retrieved"
+                  : title?.includes("Records")
+                    ? "No. Of records linked to KYC verified ABHA"
+                    : "No. Of patients with KYC verified ABHA"
+              }
+            >
+              <FontAwesomeIcon
+                className="abhaDash-pl-5 abhaDash-w-14 abhaDash-h-14 abhaDash-cursor-pointer"
+                icon={faCircleInfo}
+              />
+            </div>
+          </div>
+          <div className="abhaDash-text-text-primary-dark">{success}</div>
+        </div>
+        <div className="abhaDash-flex abhaDash-justify-between">
+          <div className="AbhaBody2Regular abhaDash-text-text-neutral-800-dark">
+            {failedText}
+          </div>
+          <div className="abhaDash-text-text-red-primary">{failed}</div>
+        </div>
+      </div>
+    </>
+  ) : (
+    <div className="abhaDash-w-260 max-md:abhaDash-w-[47%] abhaDash-h-1/2 abhaDash-border-1 abhaDash-rounded-20 abhaDash-border-bg-green-dark abhaDash-bg-bg-white abhaDash-p-65">
+      <Loader bgColor="abhaDash-bg-bg-white" />
+    </div>
+  );
+};
+export default MetricCard;

package/src/components/cards/request-card.tsx

@@ -0,0 +1,23 @@
+const RequestCard = ({
+  bodyText,
+  btnText,
+  bodyColor,
+}: {
+  bodyText: string;
+  btnText: string;
+  bodyColor: string;
+}) => {
+  return (
+    <div
+      className={`${bodyColor} abhaDash-gap-10 abhaDash-text-neutral-1000-black abhaDash-flex abhaDash-items-center abhaDash-p-20 abhaDash-m-5 abhaDash-rounded-20  abhaDash-w-450`}
+    >
+      <div>
+        {bodyText}
+      </div>
+      <div className="AbhaTitle3Headline abhaDash-flex abhaDash-justify-center abhaDash-w-130 abhaDash-text-text-white abhaDash-bg-bg-doc abhaDash-py-12 abhaDash-px-10 abhaDash-rounded-8">
+        {btnText}
+      </div>
+    </div>
+  );
+};
+export default RequestCard;