@eka-care/abdm-dashboard-stg 0.0.1

package/src/home.tsx

@@ -0,0 +1,132 @@
+import { useEffect, useState } from "react";
+import AbhaMetric from "./components/abha-metric";
+import AbhaWorkFlows from "./components/abha-workflows";
+import AutomateStrip from "./components/automate-strip";
+import Modal from "./components/modal/modal";
+import NotificationHeader from "./components/notification-header";
+import { useLandingApiQuery } from "./features/landingApi/landingApi";
+import { useDispatch, useSelector } from "react-redux";
+import {
+  getShowAutomateStrip,
+  setClinicId,
+  setDashboardData,
+  setHfrId,
+  setQrUrl,
+  setShowAutomateStrip,
+} from "./features/slice/landingApiSlice";
+import Loader from "./components/loader/abdm-dash-loader";
+import { useTaskGetApiQuery } from "./features/tasksApis/taskGetApi";
+// import RequestCards from "./components/request-cards";
+
+const Home = ({
+  clinicId,
+  clientId,
+}: {
+  clinicId: string;
+  clientId: string;
+}) => {
+  console.log("recieved clinicId, clientId", clinicId, clientId);
+
+  const dispatch = useDispatch();
+  const showAutomateStrip = useSelector(getShowAutomateStrip);
+  const { data: taskApiData, isSuccess: taskApiSuccess } = useTaskGetApiQuery(
+    clinicId ?? ""
+  );
+  const [showModal, setShowModal] = useState<boolean>(false);
+  const [showAbhaSDK, setShowAbhaSDK] = useState<boolean>(false);
+  const [showAutomateModal, setShowAutomateModal] = useState<boolean>(false);
+  const [showWorkFlowIframe, setShowWorkflowIframe] = useState<boolean>(false);
+  const { data, isSuccess, isLoading, refetch } = useLandingApiQuery(clinicId, {
+    refetchOnMountOrArgChange: true,
+    refetchOnFocus: false,
+    refetchOnReconnect: false,
+  });
+
+  useEffect(() => {
+    dispatch(setClinicId(clinicId));
+  }, []);
+
+  useEffect(() => {
+    if (isSuccess && data) {
+      dispatch(setDashboardData(data.data));
+      dispatch(setQrUrl(data.data?.scan_url));
+      dispatch(setHfrId(data.data?.hip_id));
+    }
+  }, [isSuccess, data, dispatch]);
+
+  useEffect(() => {
+    if (taskApiSuccess && taskApiData?.messaging) {
+      if (
+        taskApiData.messaging.kyc &&
+        taskApiData.messaging.abha &&
+        taskApiData.messaging.consent
+      ) {
+        dispatch(setShowAutomateStrip(false));
+      }
+    }
+  }, [taskApiSuccess, taskApiData]);
+
+  useEffect(() => {
+    function handleMessage(event: MessageEvent) {
+      const msg = event.data;
+
+      if (!msg || typeof msg !== "object") return;
+
+      if (msg.type === "ON_HFR_CREATED_SUCCESSFULLY") {
+        console.log("Received ON_HFR_CREATED_SUCCESSFULLY → Refetching API...");
+        refetch();
+      }
+    }
+
+    window.addEventListener("message", handleMessage);
+
+    return () => {
+      window.removeEventListener("message", handleMessage);
+    };
+  }, [refetch]);
+
+
+  return (
+    <div className="abhaDash-w-full abhaDash-h-full abhaDash-relative abhaDash-overflow-auto">
+      {isLoading ? (
+        <Loader />
+      ) : isSuccess ? (
+        <>
+          <NotificationHeader />
+          <AbhaMetric />
+          {showAutomateStrip && (
+            <AutomateStrip setShowAutomateModal={setShowAutomateModal} />
+          )}
+          {/* <RequestCards/>  */}
+          <AbhaWorkFlows
+            setShowAbhaSDK={setShowAbhaSDK}
+            setShowWorkflowIframe={setShowWorkflowIframe}
+            // setShowModal={setShowModal}
+          />
+          {(showModal ||
+            showAutomateModal ||
+            showAbhaSDK ||
+            showWorkFlowIframe) && (
+            <Modal
+              showAbhaSDK={showAbhaSDK}
+              setShowAbhaSDK={setShowAbhaSDK}
+              showModal={showModal}
+              showAutomateModal={showAutomateModal}
+              setShowModal={setShowModal}
+              setShowAutomateModal={setShowAutomateModal}
+              setShowWorkflowIframe={setShowWorkflowIframe}
+              showWorkflowIframe={showWorkFlowIframe}
+            />
+          )}
+        </>
+      ) : (
+        <iframe
+          className="abhaDash-w-full abhaDash-h-full"
+          src="https://product.eka.care/dhis"
+        />
+      )}
+    </div>
+  );
+};
+
+export default Home;

package/src/index.css

@@ -0,0 +1,297 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+#root {
+  height: 100vh;
+  width: 100vw;
+}
+#abdm-root {
+  height: 100vh;
+  width: 100vw;
+}
+
+body {
+  @apply abhaDash-font-lato;
+}
+
+@layer base {
+  .AbhaTitleHeadline {
+    @apply abhaDash-font-700 abhaDash-text-34 abhaDash-leading-44;
+  }
+  .AbhaTitle2Headline {
+    @apply abhaDash-font-700 abhaDash-text-14 abhaDash-leading-20;
+  }
+
+  .AbhaTitle4Headline {
+    @apply abhaDash-font-700 abhaDash-text-16 abhaDash-leading-20;
+  }
+
+  .AbhaTitle3Headline {
+    @apply abhaDash-font-700 abhaDash-text-13 abhaDash-leading-16;
+  }
+
+  .AbhaTitlesSubheadline {
+    @apply abhaDash-font-700 abhaDash-text-24 abhaDash-leading-32;
+  }
+  .AbhaTitle2Subheadline {
+    @apply abhaDash-font-700 abhaDash-text-20 abhaDash-leading-32;
+  }
+  .AbhaBodyBody {
+    @apply abhaDash-font-400 abhaDash-text-16 abhaDash-leading-22;
+  }
+  .AbhaDisplayRegular {
+    @apply abhaDash-font-400 abhaDash-text-34 abhaDash-leading-44;
+  }
+  .AbhaDisplayMedium {
+    @apply abhaDash-font-500 abhaDash-text-32 abhaDash-leading-40;
+  }
+  .AbhaDisplaySemibold {
+    @apply abhaDash-font-600 abhaDash-text-32 abhaDash-leading-40;
+  }
+  .AbhaHeading2Medium {
+    @apply abhaDash-font-500 abhaDash-text-24 abhaDash-leading-32;
+  }
+  .AbhaHeading2Semibold {
+    @apply abhaDash-font-600 abhaDash-text-24 abhaDash-leading-32;
+  }
+  .AbhaHeading3Semibold {
+    @apply abhaDash-font-600 abhaDash-text-20 abhaDash-leading-28;
+  }
+  .AbhaHeading4Semibold {
+    @apply abhaDash-font-600 abhaDash-text-18 abhaDash-leading-24;
+  }
+
+  .AbhaBody1Semibold {
+    @apply abhaDash-font-600 abhaDash-text-16 abhaDash-leading-24;
+  }
+  .AbhaBody2Semibold {
+    @apply abhaDash-font-600 abhaDash-text-14 abhaDash-leading-20;
+  }
+
+  .AbhaBody1Regular {
+    @apply abhaDash-font-400 abhaDash-text-16 abhaDash-leading-24;
+  }
+  .AbhaBody2Regular {
+    @apply abhaDash-font-400 abhaDash-text-14 abhaDash-leading-20;
+  }
+  .AbhaBody2Medium {
+    @apply abhaDash-font-500 abhaDash-text-14 abhaDash-leading-20;
+  }
+  .AbhaBody3Regular {
+    @apply abhaDash-font-400 abhaDash-text-12 abhaDash-leading-16;
+  }
+
+  .AbhaBody4Regular {
+    @apply abhaDash-font-400 abhaDash-text-10 abhaDash-leading-16;
+  }
+
+  .AbhaBody4Medium {
+    @apply abhaDash-font-500 abhaDash-text-10 abhaDash-leading-16;
+  }
+
+  .AbhaBody3Medium {
+    @apply abhaDash-font-500 abhaDash-text-12 abhaDash-leading-16;
+  }
+
+  .AbhaBody3Semibold {
+    @apply abhaDash-font-600 abhaDash-text-12 abhaDash-leading-16;
+  }
+
+  .AbhaBody3CapsRegular {
+    @apply abhaDash-font-400 abhaDash-text-12 abhaDash-leading-16 abhaDash-uppercase abhaDash-tracking-[0.Abha96px];
+  }
+  .AbhaBody3CapsSemibold {
+    @apply abhaDash-font-600 abhaDash-text-12 abhaDash-leading-16 abhaDash-uppercase abhaDash-tracking-[0.Abha96px];
+  }
+
+  .AbhaBodyFootnote {
+    @apply abhaDash-font-400 abhaDash-text-13 abhaDash-leading-18;
+  }
+
+  .AbhaBodyInputLabel {
+    @apply abhaDash-font-400 abhaDash-text-12 abhaDash-leading-12;
+  }
+  .AbhaLabel1Semibold {
+    @apply abhaDash-font-600 abhaDash-text-10 abhaDash-leading-14;
+  }
+  .AbhaLabel2Medium {
+    @apply abhaDash-font-500 abhaDash-text-10 abhaDash-leading-12;
+  }
+  .AbhaLabel2Regular {
+    @apply abhaDash-font-400 abhaDash-text-10 abhaDash-leading-12;
+  }
+  .AbhaSubheadlineRegular {
+    @apply abhaDash-font-400 abhaDash-text-14 abhaDash-leading-20;
+  }
+}
+
+/* loader styling */
+.abhaDash_loading svg polyline {
+  fill: none;
+  stroke-width: 3;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+.abhaDash_loading svg polyline#back {
+  fill: none;
+  stroke: #62c359;
+}
+
+.abhaDash_loading svg polyline#front {
+  fill: none;
+  stroke: #018d41;
+  stroke-dasharray: 48, 144;
+  stroke-dashoffset: 192;
+  animation: dash_682 1.4s linear infinite;
+}
+
+@keyframes dash_682 {
+  72.5% {
+    opacity: 0;
+  }
+
+  to {
+    stroke-dashoffset: 0;
+  }
+}
+.react-date-picker__wrapper {
+  border: none !important;
+}
+.react-calendar {
+  width: 290px !important;
+  border-radius: 16px;
+  overflow: auto;
+  border: 0px !important;
+  padding: 0px 5px 5px 5px;
+  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
+  @apply abhaDash-font-500;
+}
+.react-calendar__tile {
+  /* padding: 12px !important ; */
+  border-radius: 24px;
+}
+.react-calendar > button:hover {
+  background: #000 !important;
+}
+.react-calendar__tile:disabled {
+  background-color: transparent !important;
+}
+.react-calendar__tile--now {
+  background: transparent !important;
+}
+.react-calendar__tile--now:hover {
+  background: #e6e6e6 !important;
+}
+.react-calendar__tile--now > abbr {
+  border-bottom: 1px solid #000 !important;
+}
+.react-calendar__tile--active {
+  background-color: #62c359 !important;
+}
+.react-calendar__tile--active > abbr {
+  border-color: white !important;
+}
+.react-calendar__month-view__days__day--weekend:disabled {
+  color: #cdcdcd !important;
+}
+abbr:where([title]) {
+  text-decoration: none !important;
+}
+.react-calendar__tile--hasActive {
+  background-color: #62c359 !important;
+  color: white !important;
+  border-color: white !important;
+}
+.react-calendar__tile--hasActive > abbr {
+  border-bottom: 1px solid white !important;
+}
+.react-date-picker__inputGroup__input:invalid {
+  background-color: transparent !important;
+}
+.react-date-picker--disabled {
+  background-color: transparent !important;
+}
+.custom-date-wrapper {
+  position: relative;
+}
+
+.custom-date-placeholder {
+  position: absolute;
+  top: 50%;
+  left: 14px;
+  transform: translateY(-50%);
+  color: #9ca3af;
+  pointer-events: none;
+  z-index: 10;
+  font-size: 14px;
+}
+
+/* Hide input group (numbers) when value is null */
+.date-empty .react-date-picker__inputGroup {
+  opacity: 0;
+}
+
+/* Hide day/month/year fields */
+.date-empty .react-date-picker__inputGroup__input {
+  opacity: 0;
+}
+
+/* Hide / dividers */
+.date-empty .react-date-picker__inputGroup__divider {
+  opacity: 0;
+}
+.react-date-picker__button {
+  padding-right: 0px !important;
+  padding-left: 0px !important;
+}
+.react-date-picker__inputGroup {
+  padding-right: 0px !important;
+  padding-left: 0px !important;
+}
+.react-calendar__navigation {
+  width: 100%;
+  margin-bottom: 5px !important;
+  padding: 0px 10px;
+  /* height: 0 !important;
+  padding: 20px 0px; */
+}
+.react-calendar__navigation > button:disabled {
+  visibility: hidden !important;
+}
+.react-calendar__navigation > button:active {
+  background-color: transparent !important;
+}
+.react-calendar__navigation__label__labelText:hover {
+  background-color: #e6e6e6 !important;
+  padding: 5px 10px;
+  border-radius: 24px;
+}
+.react-calendar__navigation__label:enabled:hover {
+  background-color: transparent !important;
+}
+.react-calendar__navigation__label:enabled:focus {
+  background-color: transparent !important;
+}
+.react-calendar__navigation button {
+  min-width: 30px !important;
+}
+.react-calendar__navigation__arrow:enabled:hover {
+  border-radius: 50% !important;
+  height: 30px !important;
+  padding: 5px !important;
+  background-color: #e6e6e6 !important;
+  margin-top: 8px !important;
+}
+.react-calendar__navigation__arrow:enabled:focus {
+  border-radius: 50% !important;
+  height: 30px !important;
+  padding: 5px !important;
+  background-color: #e6e6e6 !important;
+  margin-top: 8px !important;
+}
+
+.react-calendar__year-view .react-calendar__tile, .react-calendar__decade-view .react-calendar__tile, .react-calendar__century-view .react-calendar__tile{
+  padding: 9px !important;
+}

package/src/main.tsx

@@ -0,0 +1,107 @@
+import { createRoot, type Root } from "react-dom/client";
+import "./index.css";
+import AbdmDashboard from "./abdm-dashboard.tsx";
+
+declare global {
+  interface Window {
+    Bridge: new () => any;   
+    initAbhaApp?: (params: {
+      clientId: string;
+      containerId: string;
+      method: string;
+      data?: Record<string, any>;
+      onSuccess: (params: any) => void;
+      onError: (params: any) => void;
+      onAbhaClose: () => void;
+    }) => void;
+  }
+}
+
+// Stores mounted roots
+const roots: Map<string, Root> = new Map();
+
+interface MountOptions {
+  clinicId?: string;
+  clientId?: string;
+}
+
+interface MountResult {
+  id: string;
+  unmount: () => boolean;
+}
+
+function ensureContainer(id: string): HTMLElement {
+  let el = document.getElementById(id);
+  if (!el) {
+    el = document.createElement("div");
+    el.id = id;
+    document.body.appendChild(el);
+  }
+  return el;
+}
+
+export function mountABDMDashboard(
+  elementId = "abdm-dashboard-root",
+  options: MountOptions = {}
+): MountResult {
+  const id = elementId;
+  const {
+    clinicId = "default-clinic",
+    clientId = "default-client",
+  } = options;
+
+  const container = ensureContainer(id);
+
+  if (roots.has(id)) {
+    return {
+      id,
+      unmount: () => unmountABDMDashboard(id),
+    };
+  }
+
+  const root = createRoot(container);
+  roots.set(id, root);
+
+  root.render(<AbdmDashboard clinicId={clinicId} clientId={clientId} />);
+
+  return {
+    id,
+    unmount: () => unmountABDMDashboard(id),
+  };
+}
+
+export function unmountABDMDashboard(
+  elementId = "abdm-dashboard-root"
+): boolean {
+  const id = elementId;
+  const root = roots.get(id);
+
+  if (!root) return false;
+
+  try {
+    root.unmount();
+    roots.delete(id);
+    return true;
+  } catch (e) {
+    console.error("abdmDashboard: unmount failed", e);
+    return false;
+  }
+}
+
+
+export const __attachToWindow = (() => {
+  try {
+    const w = window as any;
+    w.abdmDashboardMount = mountABDMDashboard;
+    w.abdmDashboardUnmount = unmountABDMDashboard;
+  } catch (e) {
+    console.error(e);
+  }
+})();
+
+export default function abdmDashboard(
+  name: string,
+  options?: MountOptions
+): MountResult {
+  return mountABDMDashboard(name, options);
+}

package/src/tailwind-theme-config/pds2/border.ts

@@ -0,0 +1,69 @@
+const borders = {
+  none: "0px",
+  DEFAULT: "0.0625rem",
+  0.5: "0.03125rem",
+  1: "0.0625rem",
+  2: "0.125rem",
+  3: "0.1875rem",
+  4: "0.25rem",
+  5: "0.3125rem",
+  6: "0.375rem",
+  7: "0.4375rem",
+  8: "0.5rem",
+  9: "0.5625rem",
+  10: "0.625rem",
+  11: "0.6875rem",
+  12: "0.75rem",
+  13: "0.8125rem",
+  14: "0.875rem",
+  15: "0.9375rem",
+  16: "1.0rem",
+  17: "1.0625rem",
+  18: "1.125rem",
+  19: "1.1875rem",
+  20: "1.25rem",
+  21: "1.3125rem",
+  22: "1.375rem",
+  23: "1.4375rem",
+  24: "1.5rem",
+  25: "1.5625rem",
+  26: "1.625rem",
+  27: "1.6875rem",
+  28: "1.75rem",
+  29: "1.8125rem",
+  30: "1.875rem",
+  31: "1.9375rem",
+  32: "2.0rem",
+  33: "2.0625rem",
+  34: "2.125rem",
+  35: "2.1875rem",
+  36: "2.25rem",
+  37: "2.3125rem",
+  38: "2.375rem",
+  39: "2.4375rem",
+  40: "2.5rem",
+  41: "2.5625rem",
+  42: "2.625rem",
+  43: "2.6875rem",
+  44: "2.75rem",
+  45: "2.8125rem",
+  46: "2.875rem",
+  47: "2.9375rem",
+  48: "3.0rem",
+  49: "3.0625rem",
+  50: "3.125rem",
+  51: "3.1875rem",
+  52: "3.25rem",
+  53: "3.3125rem",
+  54: "3.375rem",
+  55: "3.4375rem",
+  56: "3.5rem",
+  57: "3.5625rem",
+  58: "3.625rem",
+  59: "3.6875rem",
+  60: "3.75rem",
+  circle: "50%",
+  full: "9999px",
+};
+
+export default borders;

package/src/tailwind-theme-config/pds2/colors.ts

@@ -0,0 +1,88 @@
+const pdsColors = {
+  text: {
+    'disabled':"#9ca3af",
+    "01": "#111B31",
+    "02": "#39465B",
+    "03": "#4B596D",
+    "04": "#9EA8B8",
+    brand: "#6B5CE0",
+    black: "#000000",
+    doc: "#215FFF",
+    invert: "#FFFFFF",
+    primary: "#215FFF",
+    "red-primary": "#D74B41",
+    "primary-dark": "#143999",
+    secondary: "#4C5980",
+    success: "#1B7E43",
+    white: "#FFFFFF",
+    info: "#3B5BFA",
+    error: "#BD0F0F",
+    "black-20": "#00000033",
+    "neutral-600-medium": "#767676",
+    "neutral-800-dark": "#484848",
+    "neutral-1000-black": "#1A1A1A",
+    "primary-500": "#215FFF",
+    "color-foreground-on-primary": "#FFFFFF",
+  },
+  border: {
+    "green-light": "#75CAA6",
+    neutral: "#0000000D",
+    "brand-01": "#6B5CE0",
+    "brand-02": "#E4E1FA",
+    "03": "#D9DDE3",
+    error: "#BD0F0F",
+    doc: "#215FFF",
+    "blue-100": "#CDD5FE",
+    info: "#3B5BFA",
+    "neutral-300-strokedark": "#BABABA",
+    "neutral-200-strokelight": "#D1D1D1",
+  },
+  bg: {
+    "primary-container":"#EADDFF",
+    "modal-black":"#000000d1",
+    "primary-light": "#E9EFFF",
+    "green-light": "#E8F6F0",
+    "yellow-light": "#FDF7E7",
+    "green-dark": "#D1EDE1",
+    secondary: "#ABB7C2",
+    "02": "#E4E7EC",
+    "04": "#BEC5D0",
+    white: "#FFFFFF",
+    'doc': "#215FFF",
+    "brand-01": "#6B5CE0",
+    "brand-02": "#E4E1FA",
+    "brand-03": "#F4F2FF",
+    "01": "#F2F4F7",
+    "green-100": "#D5F6E2",
+    invert: "#111B31",
+    "seperator-dark": "#D6D9E0",
+    "fab-bg-brand-04": "#B3ABED",
+    "warning-03": "#FFFBE5",
+    "purple-800": "#1A1254",
+    "error-01": "#F15353",
+    "yellow-50": "#FDF7E7",
+    "primary-bg-light": "#E9EFFF",
+    "neutral-100-bg-dark": "#E8E8E8",
+    "button-danger-background-color": "#D92D20",
+    "color-foreground-heading": "#1A1A1A",
+    "color-foreground-warning": "#F79009",
+    "color-foreground-success": "#039855",
+    "success-02": "#27B961",
+    "success-03": "#EAFBF1",
+    red: "#DD3F3F",
+    "error-03": "#FDE7E7",
+  },
+  icon: {
+    "success-02": "#27B961",
+    "03": "#4B596D",
+    invert: "#FFFFFF",
+    "orange-600": "#B73B15",
+    "orange-500": "#E9673F",
+    "orange-400": "#FB9637",
+    "orange-300": "#FCB069",
+    brand: "#6B5CE0",
+    "01": "#F2F4F7",
+  },
+};
+
+export default pdsColors;