@eka-care/abdm-dashboard-stg 0.0.1

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

@@ -0,0 +1,24 @@
+import RequestCard from "./request-card";
+
+const RequestCards = () => {
+  return (
+    <div className="abhaDash-flex abhaDash-flex-wrap abhaDash-p-25 abahDash-w-full abhaDash-justify-between">
+      <RequestCard
+        bodyText="Request all patients without ABHA to create KYC ABHA"
+        btnText="Request Now"
+        bodyColor="abhaDash-bg-bg-primary-light"
+      />
+      <RequestCard
+        bodyText="Request patients to complete KYC if not done already"
+        btnText="Request Now"
+        bodyColor="abhaDash-bg-bg-green-light"
+      />
+      <RequestCard
+        bodyText="Auto-Raise consent for patients when they visit clinic"
+        btnText="Enable"
+        bodyColor="abhaDash-bg-bg-yellow-light"
+      />
+    </div>
+  );
+};
+export default RequestCards;

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

@@ -0,0 +1,55 @@
+import { faCircleArrowRight } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+const WorkFlowCard = ({
+  bodyColor,
+  bodyText,
+  icon,
+  iconBgGradColorFrom,
+  iconBgGradColorTo,
+  btnText,
+  cta,
+  disabled,
+  mobileStyling,
+}: {
+  bodyColor: string;
+  bodyText: string;
+  icon: any;
+  iconBgGradColorFrom: string;
+  iconBgGradColorTo: string;
+  btnText: string;
+  cta: (() => void) | string;
+  disabled: boolean;
+  mobileStyling?: string;
+}) => {
+  return (
+    <div className="abhaDash-flex abhaDash-flex-col abhaDash-h-full">
+      <div
+        className={`${bodyColor} ${mobileStyling} abhaDash-w-260 abhaDash-border-1 abhaDash-rounded-t-20 abhaDash-border-bg-neutral-100-bg-dark  abhaDash-p-20`}
+      >
+        <div
+          className={`${iconBgGradColorFrom} ${iconBgGradColorTo} abhaDash-bg-gradient-to-r   abhaDash-text-center  abhaDash-rounded-16 abhaDash-p-16 abhaDash-w-64 abhaDash-h-64`}
+        >
+          <FontAwesomeIcon
+            className="abhaDash-w-32 abhaDash-h-32 abhaDash-text-text-white"
+            icon={icon}
+          />
+        </div>
+        <div className="AbhaBody2Regular abhaDash-pt-10">{bodyText}</div>
+      </div>
+      <div
+        onClick={() => {
+          if (disabled) return;
+          if (typeof cta === "function") {
+            cta();
+          }
+        }}
+        className="max-md:AbhaTitle2Headline AbhaTitle4Headline abhaDash-cursor-pointer abhaDash-bg-bg-doc abhaDash-text-text-white abhaDash-px-20 abhaDash-py-10 abhaDash-rounded-b-20 abhaDash-flex abhaDash-justify-between abhaDash-items-center"
+      >
+        {btnText}
+        <FontAwesomeIcon icon={faCircleArrowRight} />
+      </div>
+    </div>
+  );
+};
+export default WorkFlowCard;

package/src/components/custom/calendar.tsx

@@ -0,0 +1,59 @@
+import DatePicker from "react-date-picker";
+import "react-date-picker/dist/DatePicker.css";
+import "react-calendar/dist/Calendar.css";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faCalendar } from "@fortawesome/free-regular-svg-icons";
+
+type ValuePiece = Date | null;
+type Value = ValuePiece | [ValuePiece, ValuePiece];
+
+type CustomCalendarProps = {
+  value: Value;
+  onChange: (value: Value) => void;
+  placeholder: string;
+  disabled: boolean;
+  minDate?: Date;
+  isOpen?: boolean;
+  onCalendarClose?: () => void;
+};
+
+const CustomCalendar = ({
+  value,
+  onChange,
+  placeholder,
+  disabled,
+  minDate,
+  isOpen,
+  onCalendarClose,
+}: CustomCalendarProps) => {
+  const isEmpty = value === null || Array.isArray(value);
+
+  return (
+    <div className={`custom-date-wrapper ${isEmpty ? "date-empty" : ""}`}>
+      {isEmpty && <div className="custom-date-placeholder">{placeholder}</div>}
+
+      <DatePicker
+        isOpen={isOpen}
+        disabled={disabled}
+        returnValue="start"
+        maxDate={new Date()}
+        minDate={minDate}
+        calendarIcon={
+          <FontAwesomeIcon
+            className={`${disabled ? "abhaDash-text-text-disabled" : "abhaDash-text-text-01"}`}
+            icon={faCalendar}
+          />
+        }
+        clearIcon={null}
+        onChange={onChange}
+        value={value}
+        dayPlaceholder=""
+        monthPlaceholder=""
+        yearPlaceholder=""
+        onCalendarClose={onCalendarClose}
+      />
+    </div>
+  );
+};
+
+export default CustomCalendar;

package/src/components/custom/switch.tsx

@@ -0,0 +1,32 @@
+import { useState } from "react";
+
+const SwitchBtn = () => {
+  const [isChecked, setIsChecked] = useState(false);
+
+  return (
+    <label className="abhaDash-inline-flex abhaDash-cursor-pointer abhaDash-items-center">
+      <div className="abhaDash-relative">
+        <input
+          type="checkbox"
+          checked={isChecked}
+          onChange={() => setIsChecked(!isChecked)}
+          className="abhaDash-sr-only"
+        />
+
+        <div
+          className={`abhaDash-h-8 abhaDash-w-14 abhaDash-rounded-full abhaDash-transition-colors ${
+            isChecked ? "abhaDash-bg-bg-doc" : "abhaDash-bg-bg-invert"
+          }`}
+        />
+
+        <div
+          className={`abhaDash-absolute abhaDash-left-1 abhaDash-top-1 abhaDash-h-6 abhaDash-w-6 abhaDash-rounded-full abhaDash-bg-white abhaDash-transition-transform ${
+            isChecked ? "abhaDash-translate-x-6" : ""
+          }`}
+        />
+      </div>
+    </label>
+  );
+};
+
+export default SwitchBtn;

package/src/components/loader/abdm-dash-loader.tsx

@@ -0,0 +1,21 @@
+const Loader = ({ bgColor }: { bgColor?: string }) => {
+  return (
+    <div
+      className={`abhaDash-w-full abhaDash-h-full abhaDash-flex abhaDash-items-center abhaDash-justify-center ${bgColor ? bgColor : "abhaDash-bg-bg-01"}`}
+    >
+      <div className="abhaDash_loading">
+        <svg width="64px" height="48px">
+          <polyline
+            points="0.157 23.954, 14 23.954, 21.843 48, 43 0, 50 24, 64 24"
+            id="back"
+          ></polyline>
+          <polyline
+            points="0.157 23.954, 14 23.954, 21.843 48, 43 0, 50 24, 64 24"
+            id="front"
+          ></polyline>
+        </svg>
+      </div>
+    </div>
+  );
+};
+export default Loader;

package/src/components/loader/card-loader.tsx

@@ -0,0 +1,20 @@
+interface CardLoaderProps {
+  value: number;
+  total: number;
+}
+
+const CardLoader = ({ value, total }: CardLoaderProps) => {
+  const percent =
+    total > 0 && value >= 0 ? Math.min((value / total) * 100, 100) : 100;
+
+  return (
+    <div className="abhaDash-w-full abhaDash-h-12 abhaDash-bg-[#DBE5FF] abhaDash-rounded-full abhaDash-mt-10">
+      <div
+        className="abhaDash-h-full abhaDash-rounded-full abhaDash-bg-[#4D7CFE] transition-all duration-500"
+        style={{ width: `${percent}%` }}
+      ></div>
+    </div>
+  );
+};
+
+export default CardLoader;

package/src/components/modal/automateTaks-modal.tsx

@@ -0,0 +1,110 @@
+import ReactSwitch from "react-switch";
+import { useTaskGetApiQuery } from "../../features/tasksApis/taskGetApi";
+import { useEffect, useState } from "react";
+import { useTaskUpdateApiMutation } from "../../features/tasksApis/taskUpdateApi";
+import { useDispatch, useSelector } from "react-redux";
+import {
+  getClinicId,
+  setShowAutomateStrip,
+} from "../../features/slice/landingApiSlice";
+import { switchList } from "../../utils/constants";
+
+const AutomateTasksModal = ({
+  setShowAutomateModal,
+}: {
+  setShowAutomateModal: (show: boolean) => void;
+}) => {
+  const dispatch = useDispatch();
+  const clinicId = useSelector(getClinicId);
+  const { data, isSuccess } = useTaskGetApiQuery(clinicId ?? "");
+  const [updateTasksApi] = useTaskUpdateApiMutation();
+
+  const [taskState, setTaskState] = useState({
+    kyc: false,
+    abha: false,
+    consent: false,
+  });
+
+  useEffect(() => {
+    if (isSuccess && data?.messaging) {
+      setTaskState({
+        kyc: data.messaging.kyc,
+        abha: data.messaging.abha,
+        consent: data.messaging.consent,
+      });
+    }
+  }, [isSuccess, data]);
+
+  const toggleSwitch = (key: "kyc" | "abha" | "consent") => {
+    setTaskState((prev) => ({
+      ...prev,
+      [key]: !prev[key],
+    }));
+  };
+
+  const handleProceed = () => {
+    updateTasksApi({
+      clinicId: clinicId ?? "",
+      body: {
+        messaging: {
+          kyc: taskState.kyc,
+          abha: taskState.abha,
+          consent: taskState.consent,
+        },
+      },
+    });
+    if (taskState.kyc && taskState.abha && taskState.consent) {
+      dispatch(setShowAutomateStrip(false));
+    }
+    setShowAutomateModal(false);
+  };
+
+  return (
+    <div
+      className="abhaDash-bg-bg-white abhaDash-rounded-20 abhaDash-border-bg-neutral-100-bg-dark max-md:abhaDash-w-10/12"
+      onClick={(e) => e.stopPropagation()}
+    >
+      <div className="AbhaTitle4Headline abhaDash-text-center abhaDash-w-full abhaDash-px-50 abhaDash-py-15 abhaDash-bg-text-primary-dark abhaDash-text-text-white abhaDash-rounded-t-20">
+        Automate tasks & maximise your earnings.
+      </div>
+
+      <div className="abhaDash-p-20">
+        {switchList.map(({ label, key }) => (
+          <div
+            key={key}
+            className="abhaDash-flex abhaDash-justify-between abhaDash-gap-10 abhaDash-p-10"
+          >
+            <label>{label}</label>
+            <ReactSwitch
+              checked={taskState[key]}
+              onChange={() => toggleSwitch(key)}
+              onColor="#215fff"
+              offColor="#bababa"
+              onHandleColor="#FFFFFF"
+              offHandleColor="#FFFFFF"
+              handleDiameter={18}
+              height={22}
+              width={42}
+              borderRadius={9999}
+              activeBoxShadow="0 0 0 0"
+              uncheckedIcon={false}
+              checkedIcon={false}
+            />
+          </div>
+        ))}
+
+        {/* Proceed Button */}
+        <div className="md:abhaDash-flex md:abhaDash-justify-end max-md:abhaDash-w-full">
+          <div
+            className="AbhaTitle3Headline max-md:abhaDash-w-full abhaDash-w-1/4 abhaDash-mt-4 abhaDash-py-10 abhaDash-text-center abhaDash-rounded-8 abhaDash-bg-bg-doc abhaDash-text-text-white abhaDash-cursor-pointer"
+            onClick={handleProceed}
+          >
+            Proceed
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default AutomateTasksModal;

package/src/components/modal/modal.tsx

@@ -0,0 +1,67 @@
+import Loader from "../loader/abdm-dash-loader";
+import AutomateTasksModal from "./automateTaks-modal";
+import SelectLangModal from "./select-lang-modal";
+
+const Modal = ({
+  showAbhaSDK,
+  setShowAbhaSDK,
+  setShowModal,
+  setShowAutomateModal,
+  showAutomateModal,
+  showModal,
+  setShowWorkflowIframe,
+  showWorkflowIframe,
+}: {
+  showAutomateModal: boolean;
+  showModal: boolean;
+  setShowModal: (show: boolean) => void;
+  showAbhaSDK: boolean;
+  setShowWorkflowIframe: (show: boolean) => void;
+  showWorkflowIframe: boolean;
+  setShowAbhaSDK: (show: boolean) => void;
+  setShowAutomateModal: (show: boolean) => void;
+}) => {
+  return (
+    <div
+      className="abhaDash-w-full abhaDash-h-full abhaDash-fixed abhaDash-inset-0 abhaDash-bg-bg-modal-black abhaDash-flex abhaDash-justify-center abhaDash-items-center abhaDash-z-20"
+      onClick={() => {
+        setShowModal(false);
+        setShowAutomateModal(false);
+        setShowAbhaSDK(false);
+        setShowWorkflowIframe(false);
+      }}
+    >
+      {showAbhaSDK && (
+        <div
+          className="abhaDash-w-1/3 abhaDash-h-5/6 abhaDash-bg-bg-01 abhaDash-overflow-hidden abhaDash-rounded-8"
+          onClick={(e) => e.stopPropagation()}
+        >
+          <div
+            id="abha-container"
+            className="abhaDash-h-full abhaDash-overflow-auto"
+          ></div>
+        </div>
+      )}
+      {showModal && <SelectLangModal />}
+      {showAutomateModal && (
+        <AutomateTasksModal setShowAutomateModal={setShowAutomateModal} />
+      )}
+      {showWorkflowIframe && (
+        <div
+          className="abhaDash-w-4/5 abhaDash-h-4/5 abhaDash-bg-bg-01 abhaDash-overflow-hidden abhaDash-rounded-8"
+          onClick={(e) => e.stopPropagation()}
+        >
+          <div
+            id="iframe-container"
+            className="abhaDash-h-full abhaDash-w-full abhaDash-overflow-auto "
+          >
+            <div className="abhaDash-w-full abhaDash-h-full">
+              <Loader />
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+export default Modal;

package/src/components/modal/select-lang-modal.tsx

@@ -0,0 +1,38 @@
+const SelectLangModal = () => {
+  const list = [
+    "English",
+    "bengali",
+    "hindi",
+    "gujarati",
+    "marathi",
+    "kannada",
+    "telugu",
+    "punjabi",
+    "tamil",
+  ];
+
+  return (
+    <div
+      className="abhaDash-w-1/5 abhaDash-bg-bg-white abhaDash-rounded-20 abhaDash-border-bg-neutral-100-bg-dark"
+      onClick={(e) => e.stopPropagation()} // DO NOT REMOVE
+    >
+      <div className="AbhaTitle4Headline abhaDash-bg-text-primary-dark abhaDash-text-text-white abhaDash-px-20 abhaDash-py-10 abhaDash-rounded-t-20">
+        Select language and download
+      </div>
+
+      <div className="abhaDash-p-20">
+        {list.map((val) => (
+          <div key={val} className="abhaDash-flex abhaDash-gap-5 abhaDash-p-10">
+            <input type="radio" name="language" id={val} />
+            <label htmlFor={val}>{val}</label>
+          </div>
+        ))}
+
+        <div className="AbhaTitle3Headline abhaDash-mt-4 abhaDash-py-10 abhaDash-text-center abhaDash-rounded-8 abhaDash-bg-bg-doc abhaDash-text-text-white abhaDash-cursor-pointer">
+          Download
+        </div>
+      </div>
+    </div>
+  );
+};
+export default SelectLangModal;

package/src/components/notification-header.tsx

@@ -0,0 +1,11 @@
+const NotificationHeader = () => {
+  return (
+    <div className="Body2Regular abhaDash-bg-[#95EAC1] abhaDash-py-6">
+      <div className="abhaDash-mx-auto abhaDash-text-center">
+        Earn incentives by creating records for patients registered on ABHA
+      </div>
+    </div>
+  );
+};
+
+export default NotificationHeader;

package/src/features/api/baseApi.ts

@@ -0,0 +1,23 @@
+// src/features/api/baseApi.ts
+import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react";
+
+export const baseApi = createApi({
+  reducerPath: "baseApi",
+
+  baseQuery: fetchBaseQuery({
+    baseUrl:
+      import.meta.env.VITE_APP_ENV === "PROD"
+        ? "https://ndhm.eka.care"
+        : "https://ndhm.dev.eka.care",
+
+    credentials: "include",
+
+    prepareHeaders: (headers) => {
+      headers.set("client-id", "doc-web");
+
+      return headers;
+    },
+  }),
+
+  endpoints: () => ({}),
+});

package/src/features/cardApis/cardApi.ts

@@ -0,0 +1,15 @@
+import { baseApi } from "../api/baseApi";
+
+export const cardApi = baseApi.injectEndpoints({
+  endpoints: (builder) => ({
+    getCard: builder.mutation<any, { clinicId: string; body: any }>({
+      query: ({ clinicId, body }) => ({
+        url: `/v2/hmis/metrics/cards/${clinicId}`,
+        method: "POST",   
+        body,             
+      }),
+    }),
+  }),
+});
+
+export const { useGetCardMutation } = cardApi;

package/src/features/landingApi/landingApi.ts

@@ -0,0 +1,20 @@
+import { baseApi } from "../api/baseApi";
+
+export const landingApi = baseApi.injectEndpoints({
+  endpoints: (builder) => ({
+    landingApi: builder.query<any, string>({
+      query: (clinicId) => `/v2/hmis/${clinicId}/details`,
+
+      transformResponse: (response, meta) => {
+        return {
+          data: response,                     
+          httpStatus: meta?.response?.status, 
+        };
+      },
+
+      keepUnusedDataFor: 60,
+    }),
+  }),
+});
+
+export const { useLandingApiQuery } = landingApi;

package/src/features/slice/landingApiSlice.ts

@@ -0,0 +1,49 @@
+import { createSlice } from "@reduxjs/toolkit";
+import type { RootState } from "../../app/store";
+
+const landingSlice = createSlice({
+  name: "landing",
+  initialState: {
+    clinicName: null,
+    hfrId: null,
+    clinicId: null,
+    dashboardData: {},
+    qrURL: null,
+    showAutomateStrip: true,
+  },
+  reducers: {
+    setDashboardData(state, action) {
+      state.dashboardData = action.payload;
+      state.clinicName = action.payload?.name;
+    },
+    setQrUrl(state, action) {
+      state.qrURL = action.payload;
+    },
+    setHfrId(state, action) {
+      state.hfrId = action.payload;
+    },
+    setClinicId(state, action) {
+      state.clinicId = action.payload;
+    },
+    setShowAutomateStrip(state, action) {
+      state.showAutomateStrip = action.payload;
+    },
+  },
+});
+
+export const {
+  setDashboardData,
+  setQrUrl,
+  setClinicId,
+  setShowAutomateStrip,
+  setHfrId,
+} = landingSlice.actions;
+export const getDashboardData = (state: RootState) =>
+  state.landing.dashboardData;
+export const getQrURl = (state: RootState) => state.landing.qrURL;
+export const getClinicName = (state: RootState) => state.landing.clinicName;
+export const getHfrId = (state: RootState) => state.landing.hfrId;
+export const getClinicId = (state: RootState) => state.landing.clinicId;
+export const getShowAutomateStrip = (state: RootState) =>
+  state.landing.showAutomateStrip;
+export default landingSlice.reducer;

package/src/features/tasksApis/taskGetApi.ts

@@ -0,0 +1,12 @@
+import { baseApi } from "../api/baseApi";
+
+export const taskGetApi = baseApi.injectEndpoints({
+  endpoints: (builder) => ({
+    taskGetApi: builder.query<any, string>({
+      query: (clinicId) => `/v1/hmis/${clinicId}/custom-config`,
+      keepUnusedDataFor: 0,
+    }),
+  }),
+});
+
+export const { useTaskGetApiQuery } = taskGetApi;

package/src/features/tasksApis/taskUpdateApi.ts

@@ -0,0 +1,15 @@
+import { baseApi } from "../api/baseApi";
+
+export const taskUpdateApi = baseApi.injectEndpoints({
+  endpoints: (builder) => ({
+    taskUpdateApi: builder.mutation<any, { clinicId: string; body: any }>({
+      query: ({ clinicId, body }) => ({
+        url: `/v1/hmis/${clinicId}/custom-config`,
+        method: "PATCH",
+        body,
+      }),
+    }),
+  }),
+});
+
+export const { useTaskUpdateApiMutation } = taskUpdateApi;