diff --git a/src/constants.js b/src/constants.js
index 49295a42..33c149c9 100644
--- a/src/constants.js
+++ b/src/constants.js
@@ -8,6 +8,7 @@ export const HOME_TABS = {
export const RR_TABS = {
ct: 'CARE & TREATMENT',
hts: 'HIV TESTING SERVICES',
+ his: 'HIS Deployments'
};
export const HTS_TABS = {
diff --git a/src/views/RR/HisDeployments.js b/src/views/RR/HisDeployments.js
new file mode 100644
index 00000000..0bfc582d
--- /dev/null
+++ b/src/views/RR/HisDeployments.js
@@ -0,0 +1,41 @@
+import HisDeploymentsOverview from './HisDeploymentsOverview';
+import HisDeploymentsEMRStatusByPartner from './HisDeploymentsEMRStatusByPartner';
+import HisDeploymentsFacilityLevelByOwnershipPartner from './HisDeploymentsFacilityLevelByOwnershipPartner';
+import HisDeploymentsFacilityLevelByOwnershipCounty from './HisDeploymentsFacilityLevelByOwnershipCounty';
+import HisDeploymentsFacilityByInfrastructure from './HisDeploymentsFacilityByInfrastructure';
+import HisDeploymentsLinelist from './HisDeploymentsLinelist';
+import SectionHeader from '../Shared/SectionHeader';
+import React from 'react';
+import moment from 'moment';
+import VisibilitySensor from 'react-visibility-sensor';
+import UniversalFilter from '../Shared/UniversalFilter';
+import { disableStickyFilter, enableStickyFilter } from '../../actions/Shared/uiActions';
+import { useDispatch } from 'react-redux';
+
+const HisDeployments = () =>{
+ const dispatch = useDispatch();
+ const onVisibilityChange = (isVisible) => {
+ if (isVisible) {
+ dispatch(disableStickyFilter());
+ } else {
+ dispatch(enableStickyFilter());
+ }
+ };
+ return (
+ <>
+
+
+
+
+
+
+
+
+
+
+
+ )
+}
+
+
+export default HisDeployments
diff --git a/src/views/RR/HisDeploymentsEMRStatusByPartner.js b/src/views/RR/HisDeploymentsEMRStatusByPartner.js
new file mode 100644
index 00000000..243ba9e8
--- /dev/null
+++ b/src/views/RR/HisDeploymentsEMRStatusByPartner.js
@@ -0,0 +1,109 @@
+import React, { useEffect, useState, useCallback } from 'react';
+import Highcharts from 'highcharts';
+import { Card, CardBody, CardHeader } from 'reactstrap';
+import HighchartsReact from 'highcharts-react-official';;
+
+const HISDeploymentsByPartner = () => {
+ const [hisDeployments, setHisDeployments] = useState({});
+
+ const loadNewOnArtBySex = useCallback(async () => {
+ setHisDeployments({
+ chart: {
+ type: 'column',
+ },
+ title: {
+ text: '',
+ align: 'left',
+ },
+ xAxis: {
+ title: {
+ text: 'SERVICE DELIVERY PARTNER',
+ },
+ categories: ['ampath', 'afh', 'edarp', 'wrp', 'CHAK', 'AFYA NYOTA', 'AMREF'],
+ },
+ yAxis: {
+ min: 0,
+ title: {
+ text: 'NUMBER OF FACILITIES',
+ },
+ reversedStacks: false,
+ stackLabels: {
+ enabled: false,
+ style: {
+ fontWeight: 'bold',
+ color:
+ // theme
+ (Highcharts.defaultOptions.title.style &&
+ Highcharts.defaultOptions.title.style.color) ||
+ 'gray',
+ textOutline: 'none',
+ },
+ },
+ },
+ legend: {
+ align: 'left',
+ verticalAlign: 'top',
+ floating: false,
+ shadow: false,
+ y: 0,
+ x: 80,
+ },
+ tooltip: {
+ headerFormat: '{point.x}
',
+ pointFormat:
+ '{series.name}: {point.y}
Total: {point.stackTotal}',
+ },
+ plotOptions: {
+ column: {
+ stacking: 'percent',
+ dataLabels: {
+ enabled: false,
+ },
+ },
+ },
+ series: [
+ {
+ name: 'ACTIVE',
+ data: [10, 70, 34, 90, 43,324,210],
+ color: '#00AD30',
+ },
+ {
+ name: 'DISCONTINUED',
+ data: [90,23,54,77,2, 60,63],
+ color: '#152459',
+ },
+ {
+ name: 'STALLED/INACTIVE',
+ data: [10,3,1,18,2, 0,6],
+ color: '#F6941C',
+ }
+ ],
+ });
+ }, []);
+
+ useEffect(() => {
+ loadNewOnArtBySex();
+ }, [loadNewOnArtBySex]);
+
+ return (
+
+
+
+
+ EMR STATUS BY PARTNER
+
+
+
+
+
+
+
+
+
',
+ pointFormat:
+ '{series.name}: {point.y}
Total: {point.stackTotal}',
+ },
+ plotOptions: {
+ column: {
+ stacking: 'percent',
+ dataLabels: {
+ enabled: false,
+ },
+ },
+ },
+ series: [
+ {
+ name: 'ON PREMISES',
+ data: [80, 70, 34, 90, 43,24,110],
+ color: '#00AD30',
+ },
+ {
+ name: 'ON CLOUD',
+ data: [9,23,54,77,2, 60,63],
+ color: '#152459',
+ }
+ ],
+ });
+ }, []);
+
+ useEffect(() => {
+ loadNewOnArtBySex();
+ }, [loadNewOnArtBySex]);
+
+ return (
+
+
+
+
+ FACILITY BY INFRASTRUCTURE DEPLOYMENT
+
+
+
+
+
+
+
+
+
',
+ pointFormat:
+ '{series.name}: {point.y}
Total: {point.stackTotal}',
+ },
+ plotOptions: {
+ column: {
+ stacking: 'percent',
+ dataLabels: {
+ enabled: false,
+ },
+ },
+ },
+ series: [
+ {
+ name: 'LEVEL 1',
+ data: [10, 70, 34, 90, 43,324,210],
+ color: '#00AD30',
+ },
+ {
+ name: 'LEVEL 2',
+ data: [90,23,54,77,2, 60,63],
+ color: '#152459',
+ },
+ {
+ name: 'LEVEL 3',
+ data: [10,3,1,18,2, 0,6],
+ color: '#F6941C',
+ },
+ {
+ name: 'LEVEL 4',
+ data: [0,3,4,27,7, 0,6],
+ color: '#D21D7F',
+ },
+ {
+ name: 'LEVEL 5',
+ data: [9,3,0,7,2, 0,3],
+ color: '#8E2C16',
+ },
+ {
+ name: 'LEVEL 6',
+ data: [1,2,1,3, 1, 0, 3],
+ color: '#5FA5E6',
+ },
+ ],
+ });
+ }, []);
+
+ useEffect(() => {
+ loadNewOnArtBySex();
+ }, [loadNewOnArtBySex]);
+
+ return (
+
+
+
+
+ FACILITY LEVEL BY OWNERSHIP (COUNTY)
+
+
+
+
+
+
+
+
+
',
+ pointFormat:
+ '{series.name}: {point.y}
Total: {point.stackTotal}',
+ },
+ plotOptions: {
+ column: {
+ stacking: 'percent',
+ dataLabels: {
+ enabled: false,
+ },
+ },
+ },
+ series: [
+ {
+ name: 'LEVEL 1',
+ data: [10, 70, 34, 90, 43,324,210],
+ color: '#00AD30',
+ },
+ {
+ name: 'LEVEL 2',
+ data: [90,23,54,77,2, 60,63],
+ color: '#152459',
+ },
+ {
+ name: 'LEVEL 3',
+ data: [10,3,1,18,2, 0,6],
+ color: '#F6941C',
+ },
+ {
+ name: 'LEVEL 4',
+ data: [0,3,4,27,7, 0,6],
+ color: '#D21D7F',
+ },
+ {
+ name: 'LEVEL 5',
+ data: [9,3,0,7,2, 0,3],
+ color: '#8E2C16',
+ },
+ {
+ name: 'LEVEL 6',
+ data: [1,2,1,3, 1, 0, 3],
+ color: '#5FA5E6',
+ },
+ ],
+ });
+ }, []);
+
+ useEffect(() => {
+ loadNewOnArtBySex();
+ }, [loadNewOnArtBySex]);
+
+ return (
+
+
+
+
+ FACILITY LEVEL BY OWNERSHIP (PARTNER)
+
+
+
+
+
+
+
+
+
+
+
+
+ {`HIS DEPLOYMENT LINELIST`}
+ {/*{loading === true ? (*/}
+ {/* */}
+ {/*) : (*/}
+ {/* */}
+ {/* */}
+ {/* */}
+ {/*)}*/}
+
+
+
+
+
+
+
+
+ );
+}
+
+
+export default HisDeploymentsLinelist
diff --git a/src/views/RR/HisDeploymentsOverview.js b/src/views/RR/HisDeploymentsOverview.js
new file mode 100644
index 00000000..035230af
--- /dev/null
+++ b/src/views/RR/HisDeploymentsOverview.js
@@ -0,0 +1,61 @@
+import { Card, CardBody, CardHeader, Col, Row } from 'reactstrap';
+import { formatNumber } from '../../utils/utils';
+import React from 'react';
+
+const HisDeploymentsOverview = () =>{
+
+ return (
+ <>
+
+
+
+
+ ACTIVE
+
+
+
+ {formatNumber(100)}
+
+
+
+
+
+
+
+ DISCONTINUED
+
+
+
+ {formatNumber(100)}
+
+
+
+
+
+
+
+ STALLED/INACTIVE
+
+
+
+ {formatNumber(100)}
+
+
+
+
+
+
+ )
+}
+
+
+export default HisDeploymentsOverview
diff --git a/src/views/RR/RR.js b/src/views/RR/RR.js
index 12ff6a20..8dfcec97 100644
--- a/src/views/RR/RR.js
+++ b/src/views/RR/RR.js
@@ -20,15 +20,11 @@ import { LOADING_DELAY, RR_TABS, PAGES } from "../../constants";
import Loading from './../Shared/Loading';
import UniversalFilter from '../Shared/UniversalFilter';
import SectionHeader from './../Shared/SectionHeader';
-import SectionFooter from './../Shared/SectionFooter';
-import moment from 'moment';
import { useHistory, useParams } from 'react-router-dom';
-const RROverview = Loadable({ loader: () => import('./RROverview'), loading: Loading, delay: LOADING_DELAY });
-const RROverviewTrends = Loadable({ loader: () => import('./RROverviewTrends'), loading: Loading, delay: LOADING_DELAY });
-const RRCounty = Loadable({ loader: () => import('./RRCounty'), loading: Loading, delay: LOADING_DELAY });
-const RRPartner = Loadable({ loader: () => import('./RRPartner'), loading: Loading, delay: LOADING_DELAY });
-const RRIndicatorDefinition = Loadable({ loader: () => import('./RRIndicatorDefinition'), loading: Loading, delay: LOADING_DELAY });
+
+const RRTab = Loadable({ loader: () => import('./RRTab'), loading: Loading, delay: LOADING_DELAY });
+const HisDeployments = Loadable({ loader: () => import('./HisDeployments'), loading: Loading, delay: LOADING_DELAY });
const RR = () => {
const dispatch = useDispatch();
@@ -126,25 +122,24 @@ const RR = () => {
{renderTabNavItems()}
-
+
-
-
-
-
- {/**/}
-
-
- {/**/}
-
-
+
+
+
+
+
+
+
+
+
+
+ {active_tab === 'his' ? (
+
+ ) : null}