@openmrs/esm-active-visits-app 3.1.1-pre.97 → 4.0.1-pre.340

package/dist/openmrs-esm-active-visits-app.old

@@ -1,2 +1 @@
-System.register("@openmrs/esm-active-visits-app",[],(function(e,r){return{execute:function(){e((()=>{var e,t,n,o,a,i,s,u,l,f,p,d,c,h,m={3959:(e,r,t)=>{(0,t(6907).s)(1)},6907:(e,r,t)=>{const n=t(3541).R;r.s=function(e){if(e||(e=1),!t.y.meta||!t.y.meta.url)throw console.error("__system_context__",t.y),Error("systemjs-webpack-interop was provided an unknown SystemJS context. Expected context.meta.url, but none was provided");t.p=n(t.y.meta.url,e)}},5384:(e,r,t)=>{t(3959)},3541:(e,r,t)=>{r.R=function(e,r){var t=document.createElement("a");t.href=e;for(var n="/"===t.pathname[0]?t.pathname:"/"+t.pathname,o=0,a=n.length;o!==r&&a>=0;)"/"===n[--a]&&o++;if(o!==r)throw Error("systemjs-webpack-interop: rootDirectoryLevel ("+r+") is greater than the number of directories ("+o+") in the URL path "+e);var i=n.slice(0,a+1);return t.protocol+"//"+t.host+i};Number.isInteger},6853:(e,r,t)=>{"use strict";var n={app:()=>t.e(150).then((()=>()=>t(150)))},o=(e,r)=>(t.R=r,r=t.o(n,e)?n[e]():Promise.resolve().then((()=>{throw new Error('Module "'+e+'" does not exist in container.')})),t.R=void 0,r),a=(e,r)=>{if(t.S){var n="default",o=t.S[n];if(o&&o!==e)throw new Error("Container initialization failed as it has already been initialized with a different share scope");return t.S[n]=e,t.I(n,r)}};t.d(r,{get:()=>o,init:()=>a})}},v={};function y(e){var r=v[e];if(void 0!==r)return r.exports;var t=v[e]={id:e,loaded:!1,exports:{}};return m[e].call(t.exports,t,t.exports,y),t.loaded=!0,t.exports}return y.m=m,y.c=v,y.y=r,y.n=e=>{var r=e&&e.__esModule?()=>e.default:()=>e;return y.d(r,{a:r}),r},y.d=(e,r)=>{for(var t in r)y.o(r,t)&&!y.o(e,t)&&Object.defineProperty(e,t,{enumerable:!0,get:r[t]})},y.f={},y.e=e=>Promise.all(Object.keys(y.f).reduce(((r,t)=>(y.f[t](e,r),r)),[])),y.u=e=>e+".js",y.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),y.o=(e,r)=>Object.prototype.hasOwnProperty.call(e,r),e={},t="@openmrs/esm-active-visits-app:",y.l=(r,n,o,a)=>{if(e[r])e[r].push(n);else{var i,s;if(void 0!==o)for(var u=document.getElementsByTagName("script"),l=0;l<u.length;l++){var f=u[l];if(f.getAttribute("src")==r||f.getAttribute("data-webpack")==t+o){i=f;break}}i||(s=!0,(i=document.createElement("script")).charset="utf-8",i.timeout=120,y.nc&&i.setAttribute("nonce",y.nc),i.setAttribute("data-webpack",t+o),i.src=r),e[r]=[n];var p=(t,n)=>{i.onerror=i.onload=null,clearTimeout(d);var o=e[r];if(delete e[r],i.parentNode&&i.parentNode.removeChild(i),o&&o.forEach((e=>e(n))),t)return t(n)},d=setTimeout(p.bind(null,void 0,{type:"timeout",target:i}),12e4);i.onerror=p.bind(null,i.onerror),i.onload=p.bind(null,i.onload),s&&document.head.appendChild(i)}},y.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},y.nmd=e=>(e.paths=[],e.children||(e.children=[]),e),(()=>{y.S={};var e={},r={};y.I=(t,n)=>{n||(n=[]);var o=r[t];if(o||(o=r[t]={}),!(n.indexOf(o)>=0)){if(n.push(o),e[t])return e[t];y.o(y.S,t)||(y.S[t]={});var a=y.S[t],i="@openmrs/esm-active-visits-app",s=(e,r,t,n)=>{var o=a[e]=a[e]||{},s=o[r];(!s||!s.loaded&&(!n!=!s.eager?n:i>s.from))&&(o[r]={get:t,from:i,eager:!!n})},u=[];return"default"===t&&(s("@openmrs/esm-framework","3.3.2-pre.13",(()=>Promise.all([y.e(858),y.e(902)]).then((()=>()=>y(6858))))),s("carbon-components","10.31.0",(()=>y.e(635).then((()=>()=>y(9635))))),s("carbon-icons","7.0.7",(()=>y.e(402).then((()=>()=>y(5402))))),s("dayjs","1.11.0",(()=>y.e(879).then((()=>()=>y(8879))))),s("react-dom","16.14.0",(()=>Promise.all([y.e(316),y.e(902)]).then((()=>()=>y(8316))))),s("react-i18next","11.16.6",(()=>Promise.all([y.e(248),y.e(902)]).then((()=>()=>y(3248))))),s("react","16.14.0",(()=>y.e(784).then((()=>()=>y(2784)))))),e[t]=u.length?Promise.all(u).then((()=>e[t]=1)):1}}})(),y.p="",n=e=>{var r=e=>e.split(".").map((e=>+e==e?+e:e)),t=/^([^-+]+)?(?:-([^+]+))?(?:\+(.+))?$/.exec(e),n=t[1]?r(t[1]):[];return t[2]&&(n.length++,n.push.apply(n,r(t[2]))),t[3]&&(n.push([]),n.push.apply(n,r(t[3]))),n},o=(e,r)=>{e=n(e),r=n(r);for(var t=0;;){if(t>=e.length)return t<r.length&&"u"!=(typeof r[t])[0];var o=e[t],a=(typeof o)[0];if(t>=r.length)return"u"==a;var i=r[t],s=(typeof i)[0];if(a!=s)return"o"==a&&"n"==s||"s"==s||"u"==a;if("o"!=a&&"u"!=a&&o!=i)return o<i;t++}},a=e=>{var r=e[0],t="";if(1===e.length)return"*";if(r+.5){t+=0==r?">=":-1==r?"<":1==r?"^":2==r?"~":r>0?"=":"!=";for(var n=1,o=1;o<e.length;o++)n--,t+="u"==(typeof(s=e[o]))[0]?"-":(n>0?".":"")+(n=2,s);return t}var i=[];for(o=1;o<e.length;o++){var s=e[o];i.push(0===s?"not("+u()+")":1===s?"("+u()+" || "+u()+")":2===s?i.pop()+" "+i.pop():a(s))}return u();function u(){return i.pop().replace(/^\((.+)\)$/,"$1")}},i=(e,r)=>{if(0 in e){r=n(r);var t=e[0],o=t<0;o&&(t=-t-1);for(var a=0,s=1,u=!0;;s++,a++){var l,f,p=s<e.length?(typeof e[s])[0]:"";if(a>=r.length||"o"==(f=(typeof(l=r[a]))[0]))return!u||("u"==p?s>t&&!o:""==p!=o);if("u"==f){if(!u||"u"!=p)return!1}else if(u)if(p==f)if(s<=t){if(l!=e[s])return!1}else{if(o?l>e[s]:l<e[s])return!1;l!=e[s]&&(u=!1)}else if("s"!=p&&"n"!=p){if(o||s<=t)return!1;u=!1,s--}else{if(s<=t||f<p!=o)return!1;u=!1}else"s"!=p&&"n"!=p&&(u=!1,s--)}}var d=[],c=d.pop.bind(d);for(a=1;a<e.length;a++){var h=e[a];d.push(1==h?c()|c():2==h?c()&c():h?i(h,r):!c())}return!!c()},s=(e,r)=>{var t=e[r];return Object.keys(t).reduce(((e,r)=>!e||!t[e].loaded&&o(e,r)?r:e),0)},u=(e,r,t,n)=>"Unsatisfied version "+t+" from "+(t&&e[r][t].from)+" of shared singleton module "+r+" (required "+a(n)+")",l=(e,r,t,n)=>{var o=s(e,t);return i(n,o)||"undefined"!=typeof console&&console.warn&&console.warn(u(e,t,o,n)),f(e[t][o])},f=e=>(e.loaded=1,e.get()),p=(e=>function(r,t,n,o){var a=y.I(r);return a&&a.then?a.then(e.bind(e,r,y.S[r],t,n,o)):e(0,y.S[r],t,n,o)})(((e,r,t,n,o)=>r&&y.o(r,t)?l(r,0,t,n):o())),d={},c={3066:()=>p("default","@openmrs/esm-framework",[1,3],(()=>Promise.all([y.e(858),y.e(902)]).then((()=>()=>y(6858))))),9902:()=>p("default","react",[1,16],(()=>y.e(784).then((()=>()=>y(2784))))),4589:()=>p("default","react-dom",[1,16],(()=>y.e(316).then((()=>()=>y(8316))))),4924:()=>p("default","react-i18next",[1,11],(()=>y.e(248).then((()=>()=>y(3248))))),8479:()=>p("default","carbon-components",[1,10],(()=>y.e(635).then((()=>()=>y(9635))))),3565:()=>p("default","dayjs",[1,1],(()=>y.e(879).then((()=>()=>y(8879)))))},h={56:[4589,4924,8479],150:[3066],221:[3565],902:[9902]},y.f.consumes=(e,r)=>{y.o(h,e)&&h[e].forEach((e=>{if(y.o(d,e))return r.push(d[e]);var t=r=>{d[e]=0,y.m[e]=t=>{delete y.c[e],t.exports=r()}},n=r=>{delete d[e],y.m[e]=t=>{throw delete y.c[e],r}};try{var o=c[e]();o.then?r.push(d[e]=o.then(t).catch(n)):t(o)}catch(e){n(e)}}))},(()=>{var e={661:0};y.f.j=(r,t)=>{var n=y.o(e,r)?e[r]:void 0;if(0!==n)if(n)t.push(n[2]);else if(/^(56|902)$/.test(r))e[r]=0;else{var o=new Promise(((t,o)=>n=e[r]=[t,o]));t.push(n[2]=o);var a=y.p+y.u(r),i=new Error;y.l(a,(t=>{if(y.o(e,r)&&(0!==(n=e[r])&&(e[r]=void 0),n)){var o=t&&("load"===t.type?"missing":t.type),a=t&&t.target&&t.target.src;i.message="Loading chunk "+r+" failed.\n("+o+": "+a+")",i.name="ChunkLoadError",i.type=o,i.request=a,n[1](i)}}),"chunk-"+r,r)}};var r=(r,t)=>{var n,o,[a,i,s]=t,u=0;if(a.some((r=>0!==e[r]))){for(n in i)y.o(i,n)&&(y.m[n]=i[n]);s&&s(y)}for(r&&r(t);u<a.length;u++)o=a[u],y.o(e,o)&&e[o]&&e[o][0](),e[o]=0},t=self.webpackChunk_openmrs_esm_active_visits_app=self.webpackChunk_openmrs_esm_active_visits_app||[];t.forEach(r.bind(null,0)),t.push=r.bind(null,t.push.bind(t))})(),y.nc=void 0,y(5384),y(6853)})())}}}));
-//# sourceMappingURL=openmrs-esm-active-visits-app.js.map
+var _openmrs_esm_active_visits_app;(()=>{"use strict";var e,r,t,n,o,a,i,s,l,u,p,f,d,c,h={9429:(e,r,t)=>{var n={"./start":()=>t.e(150).then((()=>()=>t(150)))},o=(e,r)=>(t.R=r,r=t.o(n,e)?n[e]():Promise.resolve().then((()=>{throw new Error('Module "'+e+'" does not exist in container.')})),t.R=void 0,r),a=(e,r)=>{if(t.S){var n="default",o=t.S[n];if(o&&o!==e)throw new Error("Container initialization failed as it has already been initialized with a different share scope");return t.S[n]=e,t.I(n,r)}};t.d(r,{get:()=>o,init:()=>a})}},v={};function m(e){var r=v[e];if(void 0!==r)return r.exports;var t=v[e]={id:e,loaded:!1,exports:{}};return h[e].call(t.exports,t,t.exports,m),t.loaded=!0,t.exports}m.m=h,m.c=v,m.n=e=>{var r=e&&e.__esModule?()=>e.default:()=>e;return m.d(r,{a:r}),r},m.d=(e,r)=>{for(var t in r)m.o(r,t)&&!m.o(e,t)&&Object.defineProperty(e,t,{enumerable:!0,get:r[t]})},m.f={},m.e=e=>Promise.all(Object.keys(m.f).reduce(((r,t)=>(m.f[t](e,r),r)),[])),m.u=e=>e+".js",m.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),m.o=(e,r)=>Object.prototype.hasOwnProperty.call(e,r),e={},r="@openmrs/esm-active-visits-app:",m.l=(t,n,o,a)=>{if(e[t])e[t].push(n);else{var i,s;if(void 0!==o)for(var l=document.getElementsByTagName("script"),u=0;u<l.length;u++){var p=l[u];if(p.getAttribute("src")==t||p.getAttribute("data-webpack")==r+o){i=p;break}}i||(s=!0,(i=document.createElement("script")).charset="utf-8",i.timeout=120,m.nc&&i.setAttribute("nonce",m.nc),i.setAttribute("data-webpack",r+o),i.src=t),e[t]=[n];var f=(r,n)=>{i.onerror=i.onload=null,clearTimeout(d);var o=e[t];if(delete e[t],i.parentNode&&i.parentNode.removeChild(i),o&&o.forEach((e=>e(n))),r)return r(n)},d=setTimeout(f.bind(null,void 0,{type:"timeout",target:i}),12e4);i.onerror=f.bind(null,i.onerror),i.onload=f.bind(null,i.onload),s&&document.head.appendChild(i)}},m.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},m.nmd=e=>(e.paths=[],e.children||(e.children=[]),e),(()=>{m.S={};var e={},r={};m.I=(t,n)=>{n||(n=[]);var o=r[t];if(o||(o=r[t]={}),!(n.indexOf(o)>=0)){if(n.push(o),e[t])return e[t];m.o(m.S,t)||(m.S[t]={});var a=m.S[t],i="@openmrs/esm-active-visits-app",s=(e,r,t,n)=>{var o=a[e]=a[e]||{},s=o[r];(!s||!s.loaded&&(!n!=!s.eager?n:i>s.from))&&(o[r]={get:t,from:i,eager:!!n})},l=[];return"default"===t&&(s("@openmrs/esm-framework","4.0.0-pre.1",(()=>Promise.all([m.e(858),m.e(206)]).then((()=>()=>m(6858))))),s("dayjs","1.11.5",(()=>m.e(879).then((()=>()=>m(8879))))),s("react-dom","18.2.0",(()=>Promise.all([m.e(316),m.e(206)]).then((()=>()=>m(8316))))),s("react-i18next","11.18.4",(()=>Promise.all([m.e(709),m.e(206)]).then((()=>()=>m(709))))),s("react","18.2.0",(()=>m.e(784).then((()=>()=>m(2784)))))),e[t]=l.length?Promise.all(l).then((()=>e[t]=1)):1}}})(),(()=>{var e;m.g.importScripts&&(e=m.g.location+"");var r=m.g.document;if(!e&&r&&(r.currentScript&&(e=r.currentScript.src),!e)){var t=r.getElementsByTagName("script");t.length&&(e=t[t.length-1].src)}if(!e)throw new Error("Automatic publicPath is not supported in this browser");e=e.replace(/#.*$/,"").replace(/\?.*$/,"").replace(/\/[^\/]+$/,"/"),m.p=e})(),t=e=>{var r=e=>e.split(".").map((e=>+e==e?+e:e)),t=/^([^-+]+)?(?:-([^+]+))?(?:\+(.+))?$/.exec(e),n=t[1]?r(t[1]):[];return t[2]&&(n.length++,n.push.apply(n,r(t[2]))),t[3]&&(n.push([]),n.push.apply(n,r(t[3]))),n},n=(e,r)=>{e=t(e),r=t(r);for(var n=0;;){if(n>=e.length)return n<r.length&&"u"!=(typeof r[n])[0];var o=e[n],a=(typeof o)[0];if(n>=r.length)return"u"==a;var i=r[n],s=(typeof i)[0];if(a!=s)return"o"==a&&"n"==s||"s"==s||"u"==a;if("o"!=a&&"u"!=a&&o!=i)return o<i;n++}},o=e=>{var r=e[0],t="";if(1===e.length)return"*";if(r+.5){t+=0==r?">=":-1==r?"<":1==r?"^":2==r?"~":r>0?"=":"!=";for(var n=1,a=1;a<e.length;a++)n--,t+="u"==(typeof(s=e[a]))[0]?"-":(n>0?".":"")+(n=2,s);return t}var i=[];for(a=1;a<e.length;a++){var s=e[a];i.push(0===s?"not("+l()+")":1===s?"("+l()+" || "+l()+")":2===s?i.pop()+" "+i.pop():o(s))}return l();function l(){return i.pop().replace(/^\((.+)\)$/,"$1")}},a=(e,r)=>{if(0 in e){r=t(r);var n=e[0],o=n<0;o&&(n=-n-1);for(var i=0,s=1,l=!0;;s++,i++){var u,p,f=s<e.length?(typeof e[s])[0]:"";if(i>=r.length||"o"==(p=(typeof(u=r[i]))[0]))return!l||("u"==f?s>n&&!o:""==f!=o);if("u"==p){if(!l||"u"!=f)return!1}else if(l)if(f==p)if(s<=n){if(u!=e[s])return!1}else{if(o?u>e[s]:u<e[s])return!1;u!=e[s]&&(l=!1)}else if("s"!=f&&"n"!=f){if(o||s<=n)return!1;l=!1,s--}else{if(s<=n||p<f!=o)return!1;l=!1}else"s"!=f&&"n"!=f&&(l=!1,s--)}}var d=[],c=d.pop.bind(d);for(i=1;i<e.length;i++){var h=e[i];d.push(1==h?c()|c():2==h?c()&c():h?a(h,r):!c())}return!!c()},i=(e,r)=>{var t=e[r];return Object.keys(t).reduce(((e,r)=>!e||!t[e].loaded&&n(e,r)?r:e),0)},s=(e,r,t,n)=>"Unsatisfied version "+t+" from "+(t&&e[r][t].from)+" of shared singleton module "+r+" (required "+o(n)+")",l=(e,r,t,n)=>{var o=i(e,t);return a(n,o)||"undefined"!=typeof console&&console.warn&&console.warn(s(e,t,o,n)),u(e[t][o])},u=e=>(e.loaded=1,e.get()),p=(e=>function(r,t,n,o){var a=m.I(r);return a&&a.then?a.then(e.bind(e,r,m.S[r],t,n,o)):e(0,m.S[r],t,n,o)})(((e,r,t,n,o)=>r&&m.o(r,t)?l(r,0,t,n):o())),f={},d={5206:()=>p("default","react",[1,18,1,0],(()=>m.e(784).then((()=>()=>m(2784))))),906:()=>p("default","@openmrs/esm-framework",[1,4],(()=>Promise.all([m.e(858),m.e(206)]).then((()=>()=>m(6858))))),2432:()=>p("default","react-dom",[1,18,1,0],(()=>m.e(316).then((()=>()=>m(8316))))),4924:()=>p("default","react-i18next",[1,11],(()=>m.e(709).then((()=>()=>m(709))))),3565:()=>p("default","dayjs",[1,1],(()=>m.e(879).then((()=>()=>m(8879)))))},c={150:[906],206:[5206],272:[2432,4924],399:[3565]},m.f.consumes=(e,r)=>{m.o(c,e)&&c[e].forEach((e=>{if(m.o(f,e))return r.push(f[e]);var t=r=>{f[e]=0,m.m[e]=t=>{delete m.c[e],t.exports=r()}},n=r=>{delete f[e],m.m[e]=t=>{throw delete m.c[e],r}};try{var o=d[e]();o.then?r.push(f[e]=o.then(t).catch(n)):t(o)}catch(e){n(e)}}))},(()=>{var e={661:0};m.f.j=(r,t)=>{var n=m.o(e,r)?e[r]:void 0;if(0!==n)if(n)t.push(n[2]);else if(/^2(06|72)$/.test(r))e[r]=0;else{var o=new Promise(((t,o)=>n=e[r]=[t,o]));t.push(n[2]=o);var a=m.p+m.u(r),i=new Error;m.l(a,(t=>{if(m.o(e,r)&&(0!==(n=e[r])&&(e[r]=void 0),n)){var o=t&&("load"===t.type?"missing":t.type),a=t&&t.target&&t.target.src;i.message="Loading chunk "+r+" failed.\n("+o+": "+a+")",i.name="ChunkLoadError",i.type=o,i.request=a,n[1](i)}}),"chunk-"+r,r)}};var r=(r,t)=>{var n,o,[a,i,s]=t,l=0;if(a.some((r=>0!==e[r]))){for(n in i)m.o(i,n)&&(m.m[n]=i[n]);s&&s(m)}for(r&&r(t);l<a.length;l++)o=a[l],m.o(e,o)&&e[o]&&e[o][0](),e[o]=0},t=self.webpackChunk_openmrs_esm_active_visits_app=self.webpackChunk_openmrs_esm_active_visits_app||[];t.forEach(r.bind(null,0)),t.push=r.bind(null,t.push.bind(t))})(),m.nc=void 0;var g=m(9429);_openmrs_esm_active_visits_app=g})();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openmrs/esm-active-visits-app",
-  "version": "3.1.1-pre.97",
+  "version": "4.0.1-pre.340",
   "description": "Active visits widget microfrontend for the OpenMRS SPA",
   "browser": "dist/openmrs-esm-active-visits-app.js",
   "main": "src/index.ts",
@@ -34,22 +34,15 @@
     "url": "https://github.com/openmrs/openmrs-esm-patient-management/issues"
   },
   "dependencies": {
-    "@carbon/charts-react": "^0.41.14",
-    "@carbon/icons-react": "^10.18.0",
-    "carbon-components-react": "^7.25.0",
-    "d3": "^5.16.0",
+    "@carbon/react": "^1.8.0",
     "lodash-es": "^4.17.15"
   },
   "peerDependencies": {
-    "@openmrs/esm-framework": "3.x",
-    "carbon-components": "10.x",
-    "carbon-icons": "7.x",
+    "@openmrs/esm-framework": "4.x",
     "dayjs": "1.x",
-    "react": "16.x",
-    "react-dom": "16.x",
-    "react-i18next": "11.x",
-    "react-router-dom": "5.x",
-    "rxjs": "6.x"
+    "react": "^18.1.0",
+    "react-dom": "^18.1.0",
+    "react-i18next": "11.x"
   },
-  "gitHead": "b36aa6d54a5ddd637fff4557e8ed448a33e0a5ae"
+  "gitHead": "f5106f136e894179dbe370620e1613ba2e9776ad"
 }

package/src/active-visits-widget/active-visits.component.tsx

@@ -3,6 +3,7 @@ import {
   DataTable,
   DataTableSkeleton,
   InlineLoading,
+  Layer,
   Pagination,
   Search,
   Table,
@@ -16,10 +17,12 @@ import {
   TableToolbarContent,
   TableExpandRow,
   TableExpandHeader,
+  TableExpandedRow,
   Tile,
-} from 'carbon-components-react';
+} from '@carbon/react';
 import {
   useLayoutType,
+  isDesktop,
   useConfig,
   usePagination,
   ExtensionSlot,
@@ -61,13 +64,12 @@ const ActiveVisitsTable = () => {
   const config = useConfig();
   const layout = useLayoutType();
   const { activeVisits, isError, isLoading, isValidating } = useActiveVisits();
-  const desktopView = layout === 'desktop';
   const pageSizes = config?.activeVisits?.pageSizes ?? [10, 20, 30, 40, 50];
   const [currentPageSize, setPageSize] = useState(config?.activeVisits?.pageSize ?? 10);
   const [searchString, setSearchString] = useState('');
 
-  const currentPathName: string = window.location.pathname;
-  const fromPage: string = getOriginFromPathName(currentPathName);
+  const currentPathName = window.location.pathname;
+  const fromPage = getOriginFromPathName(currentPathName);
 
   const headerData = useMemo(
     () => [
@@ -147,7 +149,7 @@ const ActiveVisitsTable = () => {
     return (
       <div className={styles.activeVisitsContainer}>
         <div className={styles.activeVisitsDetailHeaderContainer}>
-          <div className={!desktopView ? styles.tabletHeading : styles.desktopHeading}>
+          <div className={!isDesktop(layout) ? styles.tabletHeading : styles.desktopHeading}>
             <h4>{t('activeVisits', 'Active Visits')}</h4>
           </div>
           <div className={styles.backgroundDataFetchingIndicator}>
@@ -157,8 +159,8 @@ const ActiveVisitsTable = () => {
         <DataTable
           rows={paginatedActiveVisits}
           headers={headerData}
-          size={desktopView ? 'compact' : 'normal'}
-          useZebraStyles>
+          size={isDesktop(layout) ? 'xs' : 'md'}
+          useZebraStyles={activeVisits?.length > 1 ? true : false}>
           {({ rows, headers, getHeaderProps, getTableProps, getBatchActionProps, getRowProps }) => (
             <TableContainer className={styles.tableContainer}>
               <TableToolbar>
@@ -212,7 +214,7 @@ const ActiveVisitsTable = () => {
                           </th>
                         </TableRow>
                       ) : (
-                        <div />
+                        <TableExpandedRow className={styles.hiddenRow} colSpan={headers.length + 2} />
                       )}
                     </React.Fragment>
                   ))}
@@ -220,9 +222,12 @@ const ActiveVisitsTable = () => {
               </Table>
               {rows.length === 0 && (
                 <p
-                  style={{ height: desktopView ? '2rem' : '3rem', marginLeft: desktopView ? '2rem' : '3rem' }}
+                  style={{
+                    height: isDesktop(layout) ? '2rem' : '3rem',
+                    margin: '1rem 1.5rem',
+                  }}
                   className={`${styles.emptyRow} ${styles.bodyLong01}`}>
-                  {t('noVisitsFound', 'No visits found')}
+                  {t('noVisitsFound', 'No matching visits found')}
                 </p>
               )}
               <Pagination
@@ -250,15 +255,17 @@ const ActiveVisitsTable = () => {
   }
   return (
     <div className={styles.activeVisitsContainer}>
-      <Tile light className={styles.tile}>
-        <div className={!desktopView ? styles.tabletHeading : styles.desktopHeading}>
-          <h4>{t('activeVisits', 'Active Visits')}</h4>
-        </div>
-        <EmptyDataIllustration />
-        <p className={styles.content}>
-          {t('noActiveVisitsForLocation', 'There are no active visits to display for this location.')}
-        </p>
-      </Tile>
+      <Layer>
+        <Tile className={styles.tile}>
+          <div className={!isDesktop(layout) ? styles.tabletHeading : styles.desktopHeading}>
+            <h4>{t('activeVisits', 'Active Visits')}</h4>
+          </div>
+          <EmptyDataIllustration />
+          <p className={styles.content}>
+            {t('noActiveVisitsForLocation', 'There are no active visits to display for this location.')}
+          </p>
+        </Tile>
+      </Layer>
     </div>
   );
 };

package/src/active-visits-widget/active-visits.resource.tsx

@@ -1,7 +1,7 @@
 import useSWR from 'swr';
 import dayjs from 'dayjs';
 import isToday from 'dayjs/plugin/isToday';
-import { last } from 'lodash';
+import last from 'lodash-es/last';
 import { openmrsFetch, Visit, useSession } from '@openmrs/esm-framework';
 
 dayjs.extend(isToday);

package/src/active-visits-widget/active-visits.scss

@@ -1,3 +1,5 @@
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/styles/scss/type';
 @import '../root.scss';
 
 .activeVisitsContainer {
@@ -12,7 +14,7 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: $spacing-04 0 $spacing-04 $spacing-05;
+  padding: spacing.$spacing-04 0 spacing.$spacing-04 spacing.$spacing-05;
   background-color: $ui-background;
 }
 
@@ -35,6 +37,10 @@
   overflow: hidden;
 }
 
+.hiddenRow {
+  display: none;
+}
+
 .emptyRow {
   padding: 0 1rem;
   display: flex;
@@ -60,43 +66,34 @@
 }
 
 .action {
-  margin-bottom: $spacing-03;
+  margin-bottom: spacing.$spacing-03;
 }
 
 .content {
-  @include carbon--type-style('productive-heading-01');
+  @include type.type-style('heading-compact-01');
   color: $text-02;
-  margin-top: $spacing-05;
-  margin-bottom: $spacing-03;
-}
-
-.desktopHeading {
-  h4 {
-    @include carbon--type-style('productive-heading-02');
-    color: $text-02;
-  }
-}
-
-.tabletHeading {
-  h4 {
-    @include carbon--type-style('productive-heading-03');
-    color: $text-02;
-  }
+  margin-top: spacing.$spacing-05;
+  margin-bottom: spacing.$spacing-03;
 }
 
 .desktopHeading,
 .tabletHeading {
   text-align: left;
   text-transform: capitalize;
-  margin-bottom: $spacing-05;
-
-  h4:after {
-    content: '';
-    display: block;
-    width: 2rem;
-    padding-top: 3px;
-    border-bottom: 0.375rem solid;
-    @include brand-03(border-bottom-color);
+  margin-bottom: spacing.$spacing-05;
+
+  h4 {
+    @include type.type-style('heading-compact-02');
+    color: $text-02;
+
+    &:after {
+      content: '';
+      display: block;
+      width: 2rem;
+      padding-top: 3px;
+      border-bottom: 0.375rem solid;
+      @include brand-03(border-bottom-color);
+    }
   }
 }
 

package/src/active-visits-widget/empty-data-illustration.component.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 
-export const EmptyDataIllustration = ({ width = '61', height = '59' }) => {
+export const EmptyDataIllustration = ({ width = '64', height = '64' }) => {
   return (
-    <svg width={width} height={height} viewBox="0 0 61 59">
+    <svg width={width} height={height} viewBox="0 0 64 64">
       <title>Empty data illustration</title>
       <g fill="none" fillRule="evenodd">
         <path

package/src/root.scss

@@ -1,30 +1,30 @@
-@import 'carbon-components/scss/globals/scss/typography.scss';
+@use '@carbon/styles/scss/type';
 @import '~@openmrs/esm-styleguide/src/vars';
 
 .productiveHeading01 {
-  @include carbon--type-style('productive-heading-01');
+  @include type.type-style('heading-compact-01');
 }
 
 .productiveHeading02 {
-  @include carbon--type-style('productive-heading-02');
+  @include type.type-style('heading-compact-02');
 }
 
 .bodyLong01 {
-  @include carbon--type-style('body-long-01');
+  @include type.type-style('body-01');
 }
 
 .caption01 {
-  @include carbon--type-style('caption-01');
+  @include type.type-style('legal-01');
 }
 
 .bodyShort02 {
-  @include carbon--type-style('body-short-02');
+  @include type.type-style('body-compact-02');
 }
 
 .text02 {
-  color: #525252;
+  color: $text-02;
 }
 
 .text01 {
-  color: #161616;
+  color: $ui-05;
 }

package/src/visits-summary/visit-detail-overview.scss

@@ -1,6 +1,6 @@
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/styles/scss/type';
 @import '~@openmrs/esm-styleguide/src/vars';
-@import '~carbon-components/src/globals/scss/vars';
-@import '~carbon-components/src/globals/scss/mixins';
 @import '../root.scss';
 
 .container {
@@ -13,21 +13,21 @@
 .encounterHeading {
   text-align: left;
   width: 100%;
-  margin: 0 1rem 1.3125rem 1rem;
-  color: #161616;
+  margin: 0 1rem 1.3125rem;
+  color: $ui-05;
 }
 
 .visitsDetailWidgetContainer {
   background-color: $ui-background;
   width: 100%;
-  border: 1px solid #e0e0e0;
+  border: 1px solid $ui-03;
 }
 
 .visitsDetailHeaderContainer {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: $spacing-04 0 $spacing-04 $spacing-05;
+  padding: spacing.$spacing-04 0 spacing.$spacing-04 spacing.$spacing-05;
   background-color: $ui-background;
 }
 
@@ -39,51 +39,16 @@
   border-bottom: 0.375rem solid $brand-teal-01;
 }
 
-.toggleButtons {
-  margin: 0 1rem;
-  height: 2.5rem;
-}
-
-.toggle {
-  border: 1px solid #a6c8ff;
-}
-
-.toggle:hover {
-  background-color: #edf5ff;
-}
-
-.toggle:active,
-.toggle:focus {
-  box-shadow: none;
-  background-color: #edf5ff;
-}
-
-.toggleActive {
-  background-color: #edf5ff;
-  border: 1px solid $link-01;
-}
-
-.toggleActive:active,
-.toggleActive:focus {
-  box-shadow: none;
-  border: 1px solid $link-01;
-  background-color: #edf5ff;
-}
-
-.toggle:first-of-type {
-  border-radius: $spacing-02 0 0 $spacing-02;
-}
-
-.toggle:last-of-type {
-  border-radius: 0 $spacing-02 $spacing-02 0;
+.contentSwitcher :global(.cds--content-switcher-btn) {
+  width: 10rem;
 }
 
 .customTable tr[data-parent-row]:nth-child(odd) td {
-  background-color: #fff;
+  background-color: $ui-02;
 }
 
 .customTable tbody tr[data-parent-row]:nth-child(even) td {
-  background-color: #f4f4f4;
+  background-color: $ui-01;
 }
 
 .encounterEmptyState {
@@ -111,9 +76,15 @@
 }
 
 .summaryContainer {
-  margin-left: 1rem;
+  background-color: $ui-background;
   display: grid;
   grid-template-columns: max-content auto;
+  padding: 1rem 0rem;
+  margin: 0 1rem;
+
+  :global(.cds--tabs) {
+    max-height: fit-content;
+  }
 }
 
 .flexSections {
@@ -122,42 +93,59 @@
 
 .verticalTabs {
   margin: 1rem 0;
-}
+  scroll-behavior: smooth;
+
+  > ul {
+    flex-direction: column !important;
+  }
+
+  :global(.cds--tabs--scrollable .cds--tabs--scrollable__nav-item + .cds--tabs--scrollable__nav-item) {
+    margin-left: 0rem;
+  }
 
-.verticalTabs > ul {
-  flex-direction: column !important;
+  :global(.cds--tabs--scrollable .cds--tabs--scrollable__nav-link) {
+    border-bottom: 0 !important;
+    border-left: 2px solid $color-gray-30;
+  }
 }
 
 .tab {
-  margin-left: 0 !important;
-}
+  outline: 0;
+  outline-offset: 0;
 
-.tab > button {
-  border-bottom: 0 !important;
-  border-left: 3px solid #e0e0e0 !important;
-}
+  &:active,
+  &:focus {
+    outline: 2px solid var(--brand-03) !important;
+  }
 
-.tab > button,
-.tab > button:focus,
-.tab > button:active {
-  outline: 0 !important;
-  outline-offset: 0 !important;
-}
+  &[aria-selected='true'] {
+    border-left: 3px solid var(--brand-03);
+    border-bottom: none;
+    font-weight: 600;
+    margin-left: 0rem !important;
+  }
 
-.selectedTab > button {
-  border-left: 3px solid #007d79 !important;
-  border-bottom: 0 !important;
-  font-weight: 600 !important;
+  &[aria-selected='false'] {
+    border-bottom: none;
+    border-left: 2px solid $ui-03;
+    margin-left: 0rem !important;
+  }
 }
 
-.tabContent {
-  border-top: 1px solid #e0e0e0;
-  padding: 1rem 0;
-  width: 70%;
+.tablist {
+  :global(.cds--tab--list) {
+    flex-direction: column;
+    max-height: fit-content;
+    overflow-x: visible;
+  }
+
+  > button :global(.cds--tabs .cds--tabs__nav-link) {
+    border-bottom: none;
+  }
 }
 
 .medicationBlock {
-  background-color: #f4f4f4;
+  background-color: $ui-01;
   padding: 0.625rem 6.75rem 0.75rem 1.063rem;
   margin-top: 1.5rem;
   width: 100% !important;
@@ -167,33 +155,21 @@
   margin-top: 0;
 }
 
+.diagnosisLabel {
+  @include type.type-style('heading-compact-01');
+  color: $text-02;
+  margin-top: 5px;
+}
+
 .diagnosesList {
   display: flex;
+  flex-flow: row wrap;
   padding-bottom: 0.5rem;
   margin: 0 1rem;
-  border-bottom: 1px solid #e0e0e0;
-}
-
-.diagnosis {
-  border-radius: 12px;
-  height: 1.5rem;
-  display: flex;
-  align-items: center;
-  padding: 0 0.5rem;
-  margin: 0 0.5rem 0.5rem 0;
-}
-
-.primaryDiagnose {
-  background-color: #d0e2ff;
-  color: #0043ce;
-}
-
-.secondaryDiagnose {
-  background-color: #ffd7d9;
-  color: #a2191f;
+  border-bottom: 1px solid $ui-03;
 }
 
 .testSummaryExtension p {
-  @include carbon--type-style('body-long-01');
+  @include type.type-style('body-01');
   color: #525252;
 }

package/src/visits-summary/visit-detail.component.tsx

@@ -1,11 +1,11 @@
-import React, { useState, useMemo } from 'react';
-import { Button, DataTableSkeleton } from 'carbon-components-react';
+import React, { useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import { ContentSwitcher, DataTableSkeleton, Switch } from '@carbon/react';
 import { Encounter, useVisit } from './visit.resource';
-import styles from './visit-detail-overview.scss';
+import { formatTime, formatDatetime, parseDate } from '@openmrs/esm-framework';
 import EncounterList from './visits-components/encounter-list.component';
 import VisitSummary from './visits-components/visit-summary.component';
-import { formatTime, formatDatetime, parseDate } from '@openmrs/esm-framework';
+import styles from './visit-detail-overview.scss';
 
 interface VisitDetailComponentProps {
   visitUuid: string;
@@ -14,8 +14,8 @@ interface VisitDetailComponentProps {
 
 const VisitDetailComponent: React.FC<VisitDetailComponentProps> = ({ visitUuid, patientUuid }) => {
   const { t } = useTranslation();
-  const [listView, setView] = useState(true);
-  const { visit, isError, isLoading, isValidating } = useVisit(visitUuid);
+  const [contentSwitcherIndex, setContentSwitcherIndex] = useState(0);
+  const { visit, isLoading } = useVisit(visitUuid);
 
   const encounters = useMemo(
     () =>
@@ -43,25 +43,20 @@ const VisitDetailComponent: React.FC<VisitDetailComponentProps> = ({ visitUuid,
             <br />
             <p className={`${styles.bodyLong01} ${styles.text02}`}>{formatDatetime(parseDate(visit?.startDatetime))}</p>
           </h4>
-          <div className={styles.toggleButtons}>
-            <Button
-              className={`${styles.toggle} ${listView ? styles.toggleActive : ''}`}
-              size="small"
-              kind="ghost"
-              onClick={() => setView(true)}>
-              {t('allEncounters', 'All Encounters')}
-            </Button>
-            <Button
-              className={`${styles.toggle} ${!listView ? styles.toggleActive : ''}`}
-              size="small"
-              kind="ghost"
-              onClick={() => setView(false)}>
-              {t('visitSummary', 'Visit Summary')}
-            </Button>
+          <div style={{ margin: '0 1rem' }}>
+            <ContentSwitcher
+              className={styles.contentSwitcher}
+              selectedIndex={contentSwitcherIndex}
+              onChange={({ index }) => setContentSwitcherIndex(index)}>
+              <Switch name="allEncounters" text={t('allEncounters', 'All Encounters')} />
+              <Switch name="visitSummary" text={t('visitSummary', 'Visit Summary')} />
+            </ContentSwitcher>
           </div>
         </div>
-        {listView && visit?.encounters && <EncounterList visitUuid={visit.uuid} encounters={encounters} />}
-        {!listView && <VisitSummary encounters={visit.encounters} patientUuid={patientUuid} />}
+        {contentSwitcherIndex === 0 && visit?.encounters && (
+          <EncounterList visitUuid={visit.uuid} encounters={encounters} />
+        )}
+        {contentSwitcherIndex === 1 && <VisitSummary encounters={visit.encounters} patientUuid={patientUuid} />}
       </div>
     );
   } else {