all changes are committed

assets/css/list.page.css

   align-items: center;
   padding-left: 0px !important;
   padding-right: 0px !important;
-  z-index: 1000;
+  z-index: 1;
   margin-bottom: 0px;
+  position: fixed;
 }
 
 ul.tp-bar li {
 .btm-bar {
   top: var(--topNavHeight);
   left: 0;
-  height: calc(100vh - var(--topNavHeight));
   width: 100%;
-  height: 100%;
+  height: calc(100vh - var(--topNavHeight));
   display: flex;
   flex-direction: row;
+  position: fixed;
 }
 
 .lft-nav-bar {
+  z-index: 1;
   position: fixed;
   left: 0;
   width: var(--lftWidth);
-  height: inherit;
+  height: calc(100vh - var(--topNavHeight));
   display: flex;
   flex-direction: row;
 }
 }
 
 .rtr-nav-bar {
+  display: none !important;
   position: fixed;
   right: 0;
-  width: var(--rtrWidth);
-  height: inherit;
+  width: 0px;
+  height: calc(100vh - var(--topNavHeight));
   background-color: var(--prmBgColor);
   list-style: none;
   display: flex;
 
 .ctr-lst-pge {
   position: fixed;
-  z-index: -1;
+  overflow-y: hidden;
+  z-index: 0;
   left: var(--lftWidth);
-  right: var(--rtrWidth);
-  height: inherit;
+  right: 0px;
+  height: calc(100vh - var(--topNavHeight));
   margin: 0px 20px;
   background-color: var(--secdSubColor);
   border-top-left-radius: var(--lstPgArc);
   width: var(--frmIfrmeWidth);
   z-index: 1;
   background-color: #f3f3f3;
-  height: var(--frmIfrmeHeight);
   position: absolute;
   bottom: 0px;
-  right: calc(var(--rtrWidth) + 20px);
+  margin-right: 1px;
   border: 1px solid #dadada;
   border-radius: 3px;
 }
   margin: 0px 8px;
 }
 .ld-frm-src {
-  width: var(--frmIfrmeWidth);
+  width: -webkit-fill-available;
   height: calc(var(--frmIfrmeHeight) - 42px);
+  margin: 1px;
+}
+.wrap-iframe .ld-frm-src {
+  margin: 0px !important;
 }
 #crte-btn-lst {
   height: 400px;
   overflow-y: scroll;
 }
+.wrap-iframe {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  position: absolute;
+  top: 0px;
+  z-index: 1;
+  width: 100%;
+  height: 100%;
+}
+[data-ispop_up="false"] .app-title-ifrm {
+  width: 150px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.frm-ifre .frm-bdy {
+  line-height: 0 !important;
+  display: flex;
+  flex-direction: row;
+}
+.ctrl-vrtl {
+  display: flex;
+  flex-direction: column;
+  margin-left: -30px;
+  z-index: 1;
+  background-color: var(--prmBgColor);
+  height: 100%;
+}
+.ctrl-vrtl a {
+  margin: 5px;
+}
+.ChtAppIfrme {
+  margin-left: var(--rtrWidth);
+  height: calc(100vh - var(--topNavHeight));
+  overflow: hidden;
+}
+.bdy-ul .accordion-button::after {
+  margin-bottom: -8px;
+}
+.wrap-iframe + div .frm-ifre {
+  z-index: 0 !important;
+}
+.t-sec-min {
+  font-size: 14px;
+  width: 10%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  text-align: right;
+}
+.w-mes {
+  width: 90%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.apps-list {
+  width: 360px;
+  max-height: 450px;
+  overflow-y: scroll;
+  overflow-x: hidden;
+  flex-wrap: wrap;
+}
+.appsBind {
+  display: flex;
+  flex-direction: column;
+  margin: 8px !important;
+  width: 70px;
+}
+.appsBind .appTitle {
+  font-size: 14px;
+  text-align: center;
+}

assets/js/base.js

-import {decrypt} from "./cookiehelper.js";
+import {decrypt, isAuthenticated} from "./cookiehelper.js";
 import {_serverUrl} from "./setting.js";
-
 let serverUrl = _serverUrl();
-let baseUserInfo = decrypt(document.cookie.split("=")[1]);
-let baseSessionId = baseUserInfo.sessionId;
-
+let baseSessionId, baseUserInfo;
+if (isAuthenticated()) {
+  baseUserInfo = decrypt(document.cookie.split("=")[1]);
+  baseSessionId = baseUserInfo.sessionId;
+} else {
+  window.location = "../login";
+}
 export function getData(url) {
   var datastr = null;
   var method = "GET";

assets/js/cookiehelper.js

 const cryptoProvider = window["CryptoJS"];
 const cryptoAlgorithm = window["CryptoJS"].AES;
 const _secretKey = "unibase";
-
 export function encrypt(content) {
   return cryptoAlgorithm.encrypt(content, _secretKey).toString();
 }

assets/js/home.js

-import {getCookie} from "./cookiehelper.js";
+import {getCookie, isAuthenticated} from "./cookiehelper.js";
 import {initListIndex} from "./list.index.js";
-
-initListIndex();
+if (isAuthenticated()) {
+  initListIndex();
+} else {
+  window.location = "../login";
+}

assets/js/list.index.js

 /*Data  loading  start here*/
-import {getCookie} from "./cookiehelper.js";
-
+import {getCookie, isAuthenticated} from "./cookiehelper.js";
 import {getData, getDataObj} from "./base.js";
 import {_serverUrl} from "./setting.js";
+export var connection;
 
 function createLoad(data) {
   let html = "";
                     <div class="frm-ifre frm-ifre-${number}" id="frm-ifre-${number}" style="right:${width}px">
                       <div>
                         <ul class="m-0 p-0">
-                          <li class="frm-hdr">
+                          <li class="frm-hdr d-none">
                             <div class="app-title-ifrm">${appName}</div>
                             <div class="ctrl">
                               <a href="javascript:;" class="minimize" data-unid="${number}" data-ispopup="true"><span><i class="la la-minus"></i></span></a>
                             </div>
                           </li>
                           <li class="frm-bdy">
+                            <div class="ctrl-vrtl">
+                              <a href="javascript:;" class="minimize" data-unid="${number}" data-ispopup="true"><span><i class="la la-minus"></i></span></a>
+                              <a href="javascript:;" class="maximum" data-unid="${number}"><span><i class="la la-expand"></i></span></a>
+                              <a href="javascript:;" class="compress d-none" data-unid="${number}"><span><i class="las la-compress"></i></span></a>
+                              <a href="javascript:;" class="close" data-unid="${number}"><span><i class="la la-times"></i></span></a>
+                            </div>
                             <iframe class="ld-frm-src" data-ispopup="false" src="${serverUrl}#/${unibaseId}/${tenantId}/${userId}/${installedAppId}/${formId}/${pk_id}/${appConfigurationId}/loadform"></iframe>
                           </li>
                           <li class="frm-ftr"></li>
                     </div>
                   </div>`;
     }
-    $("#list-page").append(fomrhtml);
+    $("#list-page").parent("body").append(fomrhtml);
     window.window.postMessage("ld-frm-ifrme", "*");
     hdrCrtnClckEvnt(number);
   });
     let isPopUpState = $(this).attr("data-ispopup");
     let height = $(`.frm-ifre-${id}`).find(".frm-hdr").height();
     $(".list-page").css({filter: "unset", opacity: 1});
+    $(`.frm-ifre-${id} .frm-hdr`).toggleClass("d-none");
     $(`.frm-ifre-${id} .frm-bdy`).toggleClass("d-none");
     if (isPopUpState == "true") {
       // popup large
       $(this).attr("data-ispopup", "false");
       $(`.frm-ifre-${id} .maximum`).addClass("d-none");
+      $(`.frm-ifre-${id} .minimize`).attr("data-ispopup", "false");
       $(`.frm-ifre-${id}`).parent().removeClass("wrap-iframe");
       $(`.frm-ifre-${id}`).attr("data-ispop_up", "false");
       $(`.frm-ifre-${id}`).css({
       // popup small
       $(this).attr("data-ispopup", "true");
       $(`.frm-ifre-${id} .maximum`).removeClass("d-none");
+      $(`.frm-ifre-${id} .minimize`).attr("data-ispopup", "true");
       $(`.frm-ifre-${id}`).attr("data-ispop_up", "true");
       $(`.frm-ifre-${id}`).css({
         width: "",
   });
 }
 function loadData() {
+  $(".bdy-ul").empty();
+  $('[class="refrsh"]')
+    .unbind()
+    .on("click", function () {
+      loadData();
+    });
+  $('[data-clck="ri-grid-fill"]').on("click", function () {
+    $(".apps-list").toggleClass("d-flex");
+  });
+  getData("apis/v4/unibase/platform/apps/myapps").then(function (response) {
+    let result = JSON.parse(response.result);
+    let html = "";
+    for (var i = 0; i < result.length; i++) {
+      html += `<li class="appsBind" data-myappid="${result[i].MyAppId}"><img src="../imgs/${result[i].ImageUrl}" ><span class="appTitle">${result[i].AppTitle}</span></li>`;
+    }
+    $("#apps-list").html(html);
+    $("li.appsBind").on("click", function () {
+      $(".apps-list").removeClass("d-flex");
+    });
+  });
   getData(
     "apis/v4/unibase/reminders/platform/getunreadreminders/ReminderType/6/PageSize/20"
   ).then(function (result) {
                             <div class="accordion-header" id="accHeader-${response[i].ReminderId}">
                                 <div class="notifiListItms accordion-button collapsed" data-bs-toggle="collapse"  data-bs-target="#collapse-${response[i].ReminderId}" aria-expanded="false" aria-controls="collapseOne">
                                     <div class="row m-0 w-100 p-0 ">
-                                        <div class="col-1 ">
-                                            <input class="form-check-input mx-1" type="checkbox" value="" id="flexCheckDefault">
-                                        </div>
-                                        <div class="col-4 text-truncate">
-                                            <span class="mx-1">${response[i].Subject}</span>
-                                        </div>
-                                        <div class="col-5 text-truncate">
-                                            <span class="mx-1">${response[i].Message}</span>
+                                        <div class="col-3 px-0  d-flex flex-row text-truncate">
+                                            <input class="form-check-input mr-2" type="checkbox" value="" id="flexCheckDefault">
+                                            <div class="mx-3 w-75 text-truncate">
+                                              <span class="mx-1">${response[i].Subject}</span>
+                                            </div>
                                         </div>
-                                        <div class="col-2 text-truncate">
-                                            <span class="mx-1">22 minutes ago</span>
+                                        <div class="col-9 text-truncate d-flex justify-content-between">
+                                            <span class="mx-1 w-mes">${response[i].Message}</span>
+                                            <span class="mx-1 t-sec-min">22 mins</span>
                                         </div>
                                     </div>    
                                 </div>
       }
       bdyUI += "</div>";
       $(".bdy-ul").append(bdyUI);
-
+      $('.sub-nav-item[data-buttonType="inbox"] .length').remove();
+      $('.sub-nav-item[data-buttonType="inbox"]').append(
+        `<span class="length badge rounded-pill bg-light text-dark ml-auto">${
+          $(".item-li").length
+        }</span>`
+      );
       $(".notifiListItms").on("click", function () {
         let _this = $(this).parents(".item-li");
         let obj = {
                                 <div class="accordion-header" id="accHeader-${response[i].ReminderId}">
                                     <div class="tskListItms accordion-button collapsed" data-bs-toggle="collapse"  data-bs-target="#collapse-${response[i].ReminderId}" aria-expanded="false" aria-controls="collapseOne">
                                         <div class="row m-0 w-100 p-0 ">
-                                            <div class="col-1 ">
-                                                <input class="form-check-input mx-1" type="checkbox" value="" id="flexCheckDefault">
-                                            </div>
-                                            <div class="col-4 text-truncate">
-                                                <span class="mx-1">${response[i].Subject}</span>
-                                            </div>
-                                            <div class="col-5 text-truncate">
-                                                <span class="mx-1">${response[i].Message}</span>
+                                            <div class="col-3 px-0  d-flex flex-row text-truncate">
+                                                <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
+                                                <div class="mx-3 w-75 text-truncat">
+                                                  <span class="mx-1">${response[i].Subject}</span>
+                                                </div>
                                             </div>
-                                            <div class="col-2 text-truncate">
-                                                <span class="mx-1">2 seconds</span>
+                                            <div class="col-9 text-truncate d-flex justify-content-between">
+                                                <span class="mx-1 w-mes">${response[i].Message}</span>
+                                                <span class="mx-1 t-sec-min">22 mins</span>
                                             </div>
                                         </div>    
                                     </div>
       await createLoad(appName);
     });
   });
+
+  getData("apis/v4/unibase/reminders/platform/getunreadreminderscount").then(
+    function (response) {
+      let result = JSON.parse(response.result);
+      let count = Number(result.NotificationCount) + Number(result.TasksCount);
+      $('[data-buttontype="inbox"] .length').text(count);
+      $('[data-notification="count"]').text(count);
+      if (count > 40) {
+        $('[data-paggtn="true"]').text(`1-40 of ${count}`);
+      } else {
+        $(".li-pgn").empty();
+      }
+    }
+  );
 }
 function iFrmeWdth() {
   let width = 0,
-    erwdth = 20;
+    erwdth = 32;
   $(".frm-ifre").each(function (i, e) {
     if ($(this).length == 0) {
       erwdth = 0;
 }
 function resetwidth() {
   let width = 0,
-    erwdth = 20;
+    erwdth = 32;
   $(".frm-ifre").each(function (i, e) {
     if (i == 0) {
       $(this).css("right", width + "px");
     const cookie = getCookie("_idty");
     if (cookie) {
       const {unibaseId, tenantId, userId} = JSON.parse(cookie);
-      debugger;
       $("#detailIframe").html(
         `<iframe width="100%" style="min-height:calc(100vh - ${$(
           ".tp-bar"
     }
   });
 }
+export function signaRInit() {
+  var huburl = _serverUrl() + "notificationhub";
+  connection = new window["signalR"].HubConnectionBuilder()
+    .withUrl(huburl)
+    .build();
+  register();
+}
+export async function register() {
+  connection.on("sendnotification", (obj) => {
+    $(".ctr-lst-pge .bdy-ul").empty();
+    loadData();
+  });
+  const cookie = getCookie("_idty");
+  const {unibaseId, tenantId, userId, sessionId, name} = JSON.parse(cookie);
+  let packet = {
+    UserId: Number(userId),
+    UserName: name,
+    UnibaseId: unibaseId,
+    TenantId: Number(tenantId),
+    SessionId: sessionId,
+  };
+  try {
+    const stringConnection = await connection.start();
+    await connection.invoke("Connect", packet);
+  } catch (error) {
+    console.log(error);
+  }
+}
+
+export function resetClckEvnt() {
+  $(".ChtAppIfrme").remove();
+  $(".lft-nav-bar .lft-nav-bar-2").removeClass("d-none");
+  $(".ctr-lst-pge, .rtr-nav-bar").removeClass("d-none");
+  $(".lft-nav-bar").css("width", "");
+}
 
 export function initListIndex() {
   let _userInfo = atob(document.cookie.split("=")[1]);
   let userInfo = " JSON.parse(_userInfo).result";
   let sessionId = "userInfo.sessionId";
-
+  signaRInit();
   let usrinfoHTML = `<li><a class="dropdown-item" href="javascript:void(0);">${userInfo.name}</a></li>
 <li><a class="dropdown-item" href="javascript:void(0);">Cloud Settings</a></li>
 <li><a class="dropdown-item" href="javascript:void(0);">Help</a></li>
-                    <li><a class="dropdown-item" href="javascript:void(0);">Logoff</a></li>`;
+                    <li><a class="dropdown-item" href="javascript:void(0);" data-btn="logoff">Logoff</a></li>`;
   $(".icn-circle").text(userInfo?.name?.charAt(0)?.toUpperCase());
   $(".uindtls").html(usrinfoHTML);
-
+  $('[data-btn="logoff"]').on("click", function () {
+    document.cookie = "_idty=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
+    window.location = "../login";
+  });
   // List Page loading
 
   /*Data  loading  start here*/
+  $(".nav-lft-item").on("click", function () {
+    $(".nav-lft-item").removeClass("active");
+    $(this).addClass("active");
+    if ($(this).attr("data-application") != "Chat Application") {
+      resetClckEvnt();
+    }
+  });
+  $(".nav-lft-item[data-application='Chat Application']").on(
+    "click",
+    function () {
+      const serverUrl = _serverUrl();
+      const cookie = getCookie("_idty");
+      const {unibaseId, tenantId, userId} = JSON.parse(cookie);
+      $(".lft-nav-bar .lft-nav-bar-2").addClass("d-none");
+      $(".ctr-lst-pge, .rtr-nav-bar").addClass("d-none");
+      $(".lft-nav-bar").css("width", "var(--rtrWidth)");
+      $(".btm-bar .ChtAppIfrme").remove();
+      $(".btm-bar").append(`<div class="ChtAppIfrme w-100">
+                  <iframe class="" style="height:100%; width:100%" data-ispopup="false" src="${serverUrl}#/${unibaseId}/${tenantId}/${userId}/loadChat"></iframe>
+                </div>`);
+    }
+  );
   $(".mnNvIcn").click(function () {
     $(".lft-nav-bar").toggleClass("lft-nav-bar-Wrap");
     $(".ctr-lst-pge").toggleClass("lft-nav-bar-Wrap");
       $(".sub-nav-item").not(".more.active").removeClass("active");
       $(this).addClass("active");
     });
-  loadData();
+
+  try {
+    loadData();
+  } catch (error) {
+    console.log("LoadData Method is not loading, and getting error");
+  }
 }

assets/js/setting.js

   // sachin 2.0 commitw
   // sudheer 1.0 new branch
   // merge request another time
-  return "http://localhost:3088/";
+  //return "http://localhost:3088/";
   //return "http://localhost:3086/";
-  //return "https://c01.bizgaze.app/";
-  //return "http://192.168.88.99:4001/";
+  return "https://c02.bizgaze.app/";
+  //return "https://dev.bizgaze.app/";
 }

authentication/index.html

     <script src="../assets/js/jquery/jquery-3.6.1.min.js" defer></script>
     <script src="../assets/js/bootstrap/bootstrap.bundle.min.js" defer></script>
     <script src="../assets/js/cryptojs/cryptojs.js" defer></script>
+    <script src="../assets/js/signalr/signalr.js" defer></script>
     <script type="module" src="../assets/js/home.js" defer></script>
     <!-- <script src="../assets/js/cookiehelper.js"></script> -->
     <!-- <script src="../assets/js/base.js" defer></script> -->
                     <span><i class="ri-settings-5-line"></i></span>
                 </a>
             </li>
+            <li>
+                <a href="javascript:void(0);" class="" data-bs-toggle="dropdown" aria-expanded="false"
+                    data-clck="ri-grid-fill">
+                    <i class="ri-grid-fill"></i>
+                </a>
+                <ul class="dropdown-menu apps-list" id="apps-list">
+
+                </ul>
+            </li>
             <li>
                 <a href="javascript:void(0);" class="rounded-circle icn-circle" data-bs-toggle="dropdown"
                     aria-expanded="false">
             <div class="lft-nav-bar">
                 <ul class="lft-nav-bar-1">
                     <li>
-                        <a href="javascript:;" class="nav-lft-item active">
+                        <a href="javascript:;" class="nav-lft-item active" data-application="Mail Application">
                             <span><i class="ri-mail-line"></i></span>
                             <span>Mail</span>
                         </a>
                     </li>
                     <li>
-                        <a href="javascript:;" class="nav-lft-item">
+                        <a href="javascript:;" class="nav-lft-item" data-application="Chat Application">
                             <span><i class="ri-chat-4-line"></i></span>
                             <span>Chat</span>
 
                         </a>
                     </li>
                     <li>
-                        <a href="javascript:;" class="nav-lft-item">
+                        <a href="javascript:;" class="nav-lft-item" data-application="Drive Application">
                             <span><i class="ri-drive-line"></i></span>
                             <span>Drive</span>
 
                         </a>
                     </li>
                     <li>
-                        <a href="javascript:;" class="nav-lft-item">
+                        <a href="javascript:;" class="nav-lft-item" data-application="Meetings Application">
                             <span><i class="ri-video-chat-line"></i></span>
                             <span>Meet</span>
 
                         </div>
                     </li>
                     <li>
-                        <a href="javascript:;" class="sub-nav-item active">
+                        <a href="javascript:;" class="sub-nav-item active" data-buttonType="inbox">
                             <span><i class="ri-inbox-fill"></i></span>
                             <span>Inbox</span>
                         </a>
                     </li>
                     <li class="li-pgn">
                         <div class="pggtn">
-                            <span>1-50</span>
+                            <span data-paggtn="true">1-50</span>
                             <span class="mx-1">of</span>
-                            <span>384</span>
+                            <span data-notification="count">384</span>
                         </div>
                         <div class="pggtn">
                             <a href="javascript:;" class="lss-than nt-actve"><i class="la la-angle-left"></i></a>
         </div>
     </section>
 </body>
+
 <script>
     window.addEventListener('message',function(e) {
+        if(e.data=="closeForm") {
+            $('.frm-bdy [class="close"]')[0].click()
+        }
         $('#detailIframe').empty();
         $('.bdy-ul').removeClass('d-none');
-        //do stuff
     });
 </script>
 

login/index.html

                 <div class="form-body password-form-box">
                     <div class="form-input-wrap">
                         <div class="form-group">
-                            <input type="password" id="password" class="password-input" value="UABvAHcAbgBlAHIAcwBAADEAMgAzAA==!~`^e_n_c-^`~!">
+                            <input type="password" id="password" class="password-input"
+                                value="UABvAHcAbgBlAHIAcwBAADEAMgAzAA==!~`^e_n_c-^`~!">
                             <label class="form-control-placeholder" id="passwordLabel" for="password">Enter Your
                                 Password</label>
                         </div>
                         <div class="err-msg" id="passwordErrMsg"></div>
                         <div class="form-link show-password-link flex-between-center">
-                            <div class="flex-between-center"><input type="checkbox" id="showPassword" class="password-checkbox">
-                                <label for="showPassword">Show password</label></div>
+                            <div class="flex-between-center"><input type="checkbox" id="showPassword"
+                                    class="password-checkbox">
+                                <label for="showPassword">Show password</label>
+                            </div>
                             <label><a href="../forgotpassword">Forgot password?</a></label>
                         </div>
                     </div>