Added Dummy Loader and Module Card enhance

micro-ui/web/micro-ui-internals/packages/css/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@egovernments/digit-ui-css",
-  "version": "1.8.2-beta.38",
+  "version": "1.8.2-beta.39",
   "license": "MIT",
   "main": "dist/index.css",
   "author": "Jagankumar <jagan.kumar@egov.org.in>",

micro-ui/web/micro-ui-internals/packages/css/src/pages/employee/sandbox.scss

@@ -654,3 +654,91 @@ digit-card-text.center {
     align-items: baseline !important;
   }
 }
+
+.sandbox-loader {
+  width: 50px;
+  aspect-ratio: 1;
+  display: grid;
+  border-radius: 50%;
+  background: linear-gradient(0deg, rgba(0, 0, 0, 0.5) 30%, transparent 0 70%, rgba(0, 0, 0, 1) 0) 50% / 8% 100%,
+    linear-gradient(90deg, rgba(0, 0, 0, 0.25) 30%, transparent 0 70%, rgba(0, 0, 0, 0.75) 0) 50% / 100% 8%;
+  background-repeat: no-repeat;
+  animation: l23 1s infinite steps(12);
+}
+.sandbox-loader::before,
+.sandbox-loader::after {
+  content: "";
+  grid-area: 1/1;
+  border-radius: 50%;
+  background: inherit;
+  opacity: 0.915;
+  transform: rotate(30deg);
+}
+.sandbox-loader::after {
+  opacity: 0.83;
+  transform: rotate(60deg);
+}
+@keyframes l23 {
+  100% {
+    transform: rotate(1turn);
+  }
+}
+
+.sandbox-loader-screen {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100vh;
+  background-color: #f5f5f5;
+  font-family: Arial, sans-serif;
+}
+
+.sandbox-installation-steps {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  margin-top: 5rem;
+}
+
+.sandbox-installation-steps li {
+  font-size: 18px;
+  margin: 10px 0;
+  color: #888;
+}
+
+.sandbox-installation-steps .sandbox-completed {
+  color: #2ecc71;
+}
+
+.sandbox-checkmark {
+  color: #2ecc71;
+  margin-right: 8px;
+}
+.sandbox-step {
+  display: flex;
+  align-items: center;
+  opacity: 0;
+  transform: translateX(-100px); /* Slide in from left */
+  transition: opacity 0.5s ease, transform 0.5s ease;
+  margin-bottom: 10px;
+}
+
+.sandbox-step.sandbox-visible {
+  opacity: 1;
+  transform: translateX(0); /* Slide to normal position */
+}
+
+.sandbox-step .sandbox-step-text {
+  margin-right: 10px; /* Space between text and tick */
+  width: 25rem;
+}
+
+.sandbox-step svg {
+  opacity: 0;
+  transition: opacity 0.3s ease 0.3s; /* Fade in tick mark after a short delay */
+}
+
+.sandbox-step.sandbox-visible svg {
+  opacity: 1;
+}

micro-ui/web/micro-ui-internals/packages/modules/core/src/App.js

@@ -6,6 +6,7 @@ import SignUp from "./pages/employee/SignUp";
 import Otp from "./pages/employee/Otp";
 import ViewUrl from "./pages/employee/ViewUrl";
 import CustomErrorComponent from "./components/CustomErrorComponent";
+import DummyLoaderScreen from "./components/DummyLoader";
 
 export const DigitApp = ({ stateCode, modules, appTenants, logoUrl, initData, defaultLanding = "citizen" }) => {
   const history = useHistory();
@@ -112,6 +113,9 @@ export const DigitAppWrapper = ({ stateCode, modules, appTenants, logoUrl, initD
         <Route exact path={`/${window?.globalPath}/user/otp`}>
           <Otp />
         </Route>
+        <Route exact path={`/${window?.globalPath}/user/setup`}>
+          <DummyLoaderScreen />
+        </Route>
         <Route exact path={`/${window?.globalPath}/user/url`}>
           <ViewUrl />
         </Route>

micro-ui/web/micro-ui-internals/packages/modules/core/src/components/DummyLoader.js

@@ -0,0 +1,60 @@
+import React, { useEffect, useState } from "react";
+import { CheckCircle } from "@egovernments/digit-ui-svg-components";
+import { useHistory, useLocation } from "react-router-dom";
+
+const DummyLoaderScreen = () => {
+  const [currentStep, setCurrentStep] = useState(0);
+  const history = useHistory();
+  const location = useLocation();
+  const { tenant } = location.state || {};
+  const steps = [
+    "SANDBOX_GUIDE_SETUP_ACCOUNT",
+    "SANDBOX_GUIDE_DEFAULT_MASTER_DATA",
+    "SANDBOX_GUIDE_CONFIGURING_COMPLAINTS",
+    "SANDBOX_GUIDE_CONFIGURING_EMPLOYEE_MANAGEMENT",
+    "SANDBOX_GUIDE_SETTING_UP_CITIZEN_PORTAL",
+    "SANDBOX_GUIDE_SETTING_UP_EMPLOYEE_PORTAL",
+    "SANDBOX_GUIDE_LOADING_CONFIGURATION_INTERFACE",
+    "SANDBOX_GUIDE_CREATING_DASHBOARD",
+    "SANDBOX_GUIDE_ALL_SETUP_DONE",
+  ];
+  useEffect(() => {
+    const stepInterval = setInterval(() => {
+      if (currentStep < steps.length) {
+        setCurrentStep((prev) => prev + 1);
+      }
+    }, 1000); // 1 second delay for each step
+
+    if (currentStep === steps.length) {
+      clearInterval(stepInterval); // Clear the interval to stop further updates
+      const navigateTimeout = setTimeout(() => {
+        history.push({
+          pathname: `/${window?.globalPath}/user/url`,
+          state: { tenant: tenant },
+        });
+      }, 1000);
+
+      return () => clearTimeout(navigateTimeout); // Cleanup timeout
+    }
+
+    return () => {
+      clearInterval(stepInterval);
+    };
+  }, [currentStep]);
+
+  return (
+    <div className="sandbox-loader-screen">
+      <div className="sandbox-loader"></div>
+      <ul className="sandbox-installation-steps">
+        {steps.map((step, index) => (
+          <li key={index} className={`sandbox-step ${index < currentStep ? "sandbox-visible" : ""}`}>
+            <span className="sandbox-step-text">{step}</span>
+            {index < currentStep && <CheckCircle fill="#00703C" />}
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+};
+
+export default DummyLoaderScreen;

micro-ui/web/micro-ui-internals/packages/modules/core/src/components/RoleBasedEmployeeHome.js

@@ -1,4 +1,4 @@
-import React, { Fragment, useState , useEffect} from "react";
+import React, { Fragment, useState, useEffect } from "react";
 import { LandingPageCard, Loader } from "@egovernments/digit-ui-components";
 import { useTranslation } from "react-i18next";
 import { useHistory } from "react-router-dom";
@@ -12,9 +12,8 @@ export const RoleBasedEmployeeHome = ({ modules, additionalComponent }) => {
   const { t } = useTranslation();
   const history = useHistory();
   const tenantId = Digit.ULBService.getStateId();
-  let sortedConfigEmployeesSidebar= null;
-  const [mdmsOrderData, setMdmsOrderData]= useState([{}]);
-
+  let sortedConfigEmployeesSidebar = null;
+  const [mdmsOrderData, setMdmsOrderData] = useState([{}]);
 
   const { data: MdmsRes } = Digit.Hooks.useCustomMDMS(
     tenantId,
@@ -31,9 +30,8 @@ export const RoleBasedEmployeeHome = ({ modules, additionalComponent }) => {
     }
   );
 
-
   useEffect(() => {
-      setMdmsOrderData(MdmsRes);
+    setMdmsOrderData(MdmsRes);
   }, [MdmsRes]);
 
   const transformURL = (url = "") => {
@@ -84,7 +82,7 @@ export const RoleBasedEmployeeHome = ({ modules, additionalComponent }) => {
         // link: queryParamIndex === -1 ? linkUrl : linkUrl.substring(0, queryParamIndex),
         queryParams: queryParamIndex === -1 ? null : linkUrl.substring(queryParamIndex),
         label: t(Digit.Utils.locale.getTransformedLocale(`${module}_LINK_${item.displayName}`)),
-        displayName: item.displayName
+        displayName: item.displayName,
       });
       return acc;
     }, {});
@@ -102,74 +100,70 @@ export const RoleBasedEmployeeHome = ({ modules, additionalComponent }) => {
     const sortedModules = Object.keys(configEmployeeSideBar)
       .sort((a, b) => {
         // Find the card order in mdmsOrderData based on module names (HRMS, PGR, etc.)
-        const cardOrderA = mdmsOrderData?.find(item => item.moduleType === "card" && item.name === a)?.order || null;
-        const cardOrderB = mdmsOrderData?.find(item => item.moduleType === "card" && item.name === b)?.order || null;
+        const cardOrderA = mdmsOrderData?.find((item) => item.moduleType === "card" && item.name === a)?.order || null;
+        const cardOrderB = mdmsOrderData?.find((item) => item.moduleType === "card" && item.name === b)?.order || null;
         return cardOrderA - cardOrderB;
       })
       .reduce((acc, module) => {
         // Sort links based on the order in MdmsRes
         const sortedLinks = configEmployeeSideBar?.[module]?.links?.sort((linkA, linkB) => {
           const labelA = linkA?.displayName;
           const labelB = linkB?.displayName;
-  
+
           // Find the order for links inside the module
-          const orderA = mdmsOrderData?.find(item => item.moduleType === "link" && item.name === `${module}.${labelA.replace(/\s+/g, '_')}`)?.order || null;
-          const orderB = mdmsOrderData?.find(item => item.moduleType === "link" && item.name === `${module}.${labelB.replace(/\s+/g, '_')}`)?.order || null;
-
+          const orderA =
+            mdmsOrderData?.find((item) => item.moduleType === "link" && item.name === `${module}.${labelA.replace(/\s+/g, "_")}`)?.order || null;
+          const orderB =
+            mdmsOrderData?.find((item) => item.moduleType === "link" && item.name === `${module}.${labelB.replace(/\s+/g, "_")}`)?.order || null;
+
           return orderA - orderB;
         });
-  
+
         acc[module] = {
           ...configEmployeeSideBar[module],
           links: sortedLinks,
         };
-  
+
         return acc;
       }, {});
-  
+
     return sortedModules;
   };
 
-  if(isMultiRootTenant){
-    sortedConfigEmployeesSidebar= sortCardAndLink(configEmployeeSideBar);
-  }
-  else{
+  if (isMultiRootTenant) {
+    sortedConfigEmployeesSidebar = sortCardAndLink(configEmployeeSideBar);
+  } else {
     sortedConfigEmployeesSidebar = configEmployeeSideBar;
   }
 
   const children = Object.keys(sortedConfigEmployeesSidebar)?.map((current, index) => {
     const moduleData = sortedConfigEmployeesSidebar?.[current];
+    const configureData = moduleData?.links?.find((item) => item?.label === "Configure");
     const propsForModuleCard = {
-      // Icon: moduleData?.icon,
       icon: "SupervisorAccount",
       moduleName: t(moduleData?.label),
       metrics: [],
-      links: moduleData.links,
-      centreChildren:[
-        <div>{t(Digit.Utils.locale.getTransformedLocale(`MODULE_CARD_DESC_${current}`))}</div>
-      ]    
+      links: Digit.Utils.getMultiRootTenant() ? moduleData.links?.filter((item) => item.label !== "Configure") : moduleData.links,
+      centreChildren: [<div>{t(Digit.Utils.locale.getTransformedLocale(`MODULE_CARD_DESC_${current}`))}</div>],
+      endChildren: Digit.Utils.getMultiRootTenant()
+        ? [
+            <Button
+              variation="teritiary"
+              label={configureData?.label}
+              icon={configureData?.icon}
+              type="button"
+              size={"medium"}
+              onClick={() => history?.push(configureData?.link)}
+              style={{ padding: "0px" }}
+            />,
+          ]
+        : null,
     };
     return <LandingPageCard buttonSize={"medium"} {...propsForModuleCard} />;
   });
   return (
     <>
-      <div className="employee-app-container digit-home-employee-app">
-        <div className="ground-container moduleCardWrapper gridModuleWrapper digit-home-moduleCardWrapper">
-          {/* {Object.keys(configEmployeeSideBar)?.map((current, index) => {
-            const moduleData = configEmployeeSideBar?.[current];
-            const propsForModuleCard = {
-              // Icon: moduleData?.icon,
-              icon: "SupervisorAccount",
-              moduleName: t(moduleData?.label),
-              metrics: [],
-              links: moduleData.links,
-            };
-            return <LandingPageCard buttonSize={"medium"} {...propsForModuleCard} />;
-            // return <EmployeeModuleCard {...propsForModuleCard} />;
-          })} */}
-          {React.Children.map(children, (child) => React.cloneElement(child))}
-        </div>
-      </div>
+      <LandingPageWrapper>{React.Children.map(children, (child) => React.cloneElement(child))}</LandingPageWrapper>
     </>
   );
 };

micro-ui/web/micro-ui-internals/packages/modules/core/src/pages/employee/Otp/index.js

@@ -76,7 +76,7 @@ const Otp = ({ isLogin = false }) => {
     if (user?.info?.roles?.length > 0) user.info.roles = filteredRoles;
     Digit.UserService.setUser(user);
     setEmployeeDetail(user?.info, user?.access_token);
-    let redirectPath = `/${window?.globalPath}/user/url`;
+    let redirectPath = `/${window?.globalPath}/user/setup`;
     let redirectPathOtpLogin = `/${window?.contextPath}/employee/user/landing`;
 
     if (isLogin) {

micro-ui/web/public/index.html

@@ -7,7 +7,7 @@
   <link
     href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@400;500;700&family=Roboto:wght@400;500;700&display=swap"
     rel="stylesheet" type="text/css" />
-  <link rel="stylesheet" href="https://unpkg.com/@egovernments/digit-ui-css@1.8.2-beta.38/dist/index.css" />
+  <link rel="stylesheet" href="https://unpkg.com/@egovernments/digit-ui-css@1.8.2-beta.39/dist/index.css" />
   <link rel="stylesheet" href="https://unpkg.com/@egovernments/digit-ui-components-css@0.0.2-beta.37/dist/index.css"/>
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <meta name="theme-color" content="#00bcd1" />