Merge branch 'moh-kenya:dev' into dev

moh-kenya · May 2, 2024 · cd5a805 · cd5a805
2 parents 92147d7 + 70254f9
commit cd5a805
Show file tree

Hide file tree

Showing 98 changed files with 7,263 additions and 443 deletions.
diff --git a/.env.example b/.env.example
@@ -0,0 +1,3 @@
+NEXT_PUBLIC_API_URL=http://41.89.92.186:8000
+APP_DEBUG=true
+USE_MOCK_API=false
diff --git a/.github/workflows/node.js.yml b/.github/workflows/node.js.yml
@@ -10,7 +10,7 @@ on:
     branches: [ "dev" ]
 
 jobs:
-  build_and_deploy:
+  build:
 
     runs-on: ubuntu-latest
 
@@ -19,21 +19,27 @@ jobs:
     - name: Use Node.js 18
       uses: actions/setup-node@v4
       with:
-        node-version: '18'
-        cache: 'npm'
+        node-version: '18.17.0'
 
     - name: Install dependencies
       run: yarn install
 
     - name: Build
       run: yarn build
-
-    - name: copy file via ssh password
-      uses: appleboy/[email protected]
+
+  deploy:
+
+    runs-on: ubuntu-latest
+
+    needs: build
+
+    steps:
+    - name: executing remote ssh commands using password
+      uses: appleboy/[email protected]
       with:
         host: ${{ secrets.HOST }}
         username: ${{ secrets.USERNAME }}
         key: ${{ secrets.KEY }}
         port: ${{ secrets.PORT }}
-        source: .next/*
-        target: /usr/knhts/moh-knhts-web
+        script: cd /usr/knhts/moh-knhts-web && sh deploy.sh &>/dev/null
+
diff --git a/.gitignore b/.gitignore
@@ -27,6 +27,7 @@ yarn-error.log*
 
 # local env files
 .env*.local
+.env
 
 # vercel
 .vercel

diff --git a/components/Copyright.js b/components/Copyright.js
@@ -0,0 +1,12 @@
+import { Typography, Link } from "@mui/material"
+function Copyright(props) {
+    return(
+        <Typography variant='body2' color="text.secondary" align='center' {...props}>
+            {'Copyright © '}{' '}{new Date().getFullYear()}{'. '}
+            <Link color="inherit" href="https://www.health.go.ke/">
+            Ministry of Health
+            </Link>
+        </Typography>
+    )
+}
+export default Copyright
diff --git a/components/Navbar.js b/components/Navbar.js
@@ -14,21 +14,20 @@ import MenuItem from '@mui/material/MenuItem';
 import AdbIcon from '@mui/icons-material/Adb';
 import PersonTwoTone from '@mui/icons-material/PersonTwoTone';
 import Link from 'next/link';
+import { ArrowDropDown, SearchRounded, SearchTwoTone } from '@mui/icons-material';
+import { TextField } from '@mui/material';
+import { useRouter } from 'next/router';
+import { doLogout } from '@/utilities';
 
-const pages = [
-    'Concepts', 
-    'Collections', 
-    'Domains', 
-    'Institutions', 
-    'Announcements', 
-    'Resources'
-];
-const settings = ['Profile', 'Help & FAQ', 'Logout'];
 
-function NavBar() {
+function NavBar({ session, loggedIn, user, pages }) {
+
+    const settings = ['Profile', 'Help & FAQ', 'Logout'];
+    const router = useRouter();
     const [anchorElNav, setAnchorElNav] = React.useState(null);
-    const [loggedIn, setLoggedIn] = React.useState(false);
     const [anchorElUser, setAnchorElUser] = React.useState(null);
+    const [searchQuery, setSearchQuery] = React.useState('');
+    const pathname = router.pathname;
 
     const handleOpenNavMenu = (event) => {
         setAnchorElNav(event.currentTarget);
@@ -44,14 +43,13 @@ function NavBar() {
     const handleCloseUserMenu = () => {
         setAnchorElUser(null);
     };
-
     return (
-        <AppBar position="static" color="default" variant="outlined">
-            <Container maxWidth="xl">
+        <AppBar position="static" color="default" variant="outlined" elevation={0}>
+            <Container maxWidth="2xl">
                 <Toolbar disableGutters>
                     <Box sx={{ flexGrow: 1, display: { xs: 'none', md: 'flex' }, mr: 1 }}>
                         <Link href={'/'}>
-                            <img src="/assets/images/knhdd.png" alt="MoH KNHTS" width={'auto'} height={50} />
+                            <img src="/assets/images/logo.png" alt="MoH KNHTS" width={'auto'} height={65} />
                         </Link>
                     </Box>
 
@@ -61,37 +59,80 @@ function NavBar() {
                         </IconButton>
                         <Menu id="menu-appbar" anchorEl={anchorElNav} anchorOrigin={{ vertical: 'bottom', horizontal: 'left' }} keepMounted transformOrigin={{ vertical: 'top', horizontal: 'left' }} open={Boolean(anchorElNav)} onClose={handleCloseNavMenu} sx={{ display: { xs: 'block', md: 'none' } }}>
                             {pages.map((page) => (
-                                <MenuItem key={page} onClick={handleCloseNavMenu}>
-                                    <Link style={{ textDecoration: 'none', color: '#1651B6' }} href={'/'+page.toLocaleLowerCase()}>{page}</Link>
+                                <MenuItem key={page.name} onClick={handleCloseNavMenu}>
+                                    <Link style={{ textDecoration: 'none', color: '#1651B6' }} href={page.link}>{page.name}</Link>
                                 </MenuItem>
                             ))}
                         </Menu>
                     </Box>
                     <Box sx={{ flexGrow: 1 }}>
                         <Box sx={{ flexGrow: 1, display: { xs: 'flex', md: 'none' } }}>
                             <Link href={'/'}>
-                                <img src="/assets/images/knhdd.png" alt="MoH KNHTS" width={'auto'} height={50} />
+                                <img src="/assets/images/logo.png" alt="MoH KNHTS" width={'auto'} height={40} />
                             </Link>
                         </Box>
-                        <Box sx={{ flexGrow: 1, display: { xs: 'none', md: 'flex' }, flexDirection: 'row', gap: 3 }}>
-                            {pages.map((page) => (
-                                <Link style={{ textDecoration: 'none', color: '#1651B6', fontSize: '1.1em' }} key={page} href={'/'+page.toLocaleLowerCase()}>{page}</Link>
-                            ))}
+                        <Box sx={{ flexGrow: 1, display: { xs: 'none', md: 'flex' }, flexDirection: 'row', gap: {md: 1, lg: 3} }}>
+                            {pages.map((page) => {
+                                let active = (page.link.toLocaleLowerCase() == router.asPath?.toLocaleLowerCase())// || router.asPath?.toLocaleLowerCase().includes(page.link?.toLocaleLowerCase())
+                                return (
+                                <Link style={{ textDecoration: 'none', color: (active ? '#333' : '#1651B6'), fontSize: {md: '0.7em', lg: '0.9em'}, borderBottom: `2px solid ${(active ? '#333': 'transparent')}` }} key={page.name} href={page.link}>{page.name}</Link>
+                            )})}
                         </Box>
                     </Box>
+                    {!['/'].includes(pathname) && <Box sx={{ display: 'flex', flexGrow: 1 }}>
+                        <Box sx={{ display: { xs: 'flex', lg: 'none' }, alignItems: 'center' }}>
+                            <Link href={'/search'} style={{ color: '#667' }}> <SearchRounded /> </Link>
+                        </Box>
+                            <Box variant="outlined" sx={{ display: { md: 'none', lg: 'flex' }, alignItems: 'center', px: 2 }}>
+                                <TextField variant="outlined" color="primary" id="search" label="Global Search" name='q' size="small" sx={{ display: { xs: 'none', md: 'flex' }, width: 'auto' }} value={searchQuery} onChange={(e) => setSearchQuery(e.target.value)} />
+                                <Button variant="outlined" size='small' sx={{ display: { xs: 'none', md: 'flex' }, p: 1 }} onClick={ev=>{
+                                    router.push('/search?q='+searchQuery)
+                                }}><SearchRounded m={4} /></Button>
+                            </Box>
+                    </Box>}
 
-                    {loggedIn ? (
-                        <Box sx={{ flexGrow: 0 }}>
-                            <Tooltip title="Open settings">
-                                <IconButton onClick={handleOpenUserMenu} sx={{ p: 0 }}> <PersonTwoTone /> </IconButton>
-                            </Tooltip>
-                            <Menu sx={{ mt: '45px' }} id="menu-appbar" anchorEl={anchorElUser} anchorOrigin={{ vertical: 'top', horizontal: 'right' }} keepMounted transformOrigin={{ vertical: 'top', horizontal: 'right' }} open={Boolean(anchorElUser)} onClose={handleCloseUserMenu}>
-                                {settings.map((setting) => (
-                                    <MenuItem key={setting} onClick={handleCloseUserMenu}>
-                                        <Link href={'/'+setting.toLocaleLowerCase()}>{setting}</Link>
-                                    </MenuItem>
-                                ))}
-                            </Menu>
+                    {(loggedIn && user) ? (
+                        <Box sx={{ flexGrow: 0, display: 'flex', alignItems: 'center', gap: {xs: 0, md: 1}, border: '1px solid #ccc', color: 'black', py: 1, px: 1, borderRadius: '8px' }}>
+                            <Button onClick={ev => {
+                                if (anchorElUser) {
+                                    handleCloseUserMenu()
+                                } else {
+                                    handleOpenUserMenu(ev)
+                                }
+                            }} sx={{ display: 'flex', color: 'black', justifyContent: 'space-between', py: 0, px: {xs: 0, md: 1} }}>
+                                <Box sx={{ display: 'flex' }}>
+                                    <PersonTwoTone />
+                                    <Typography variant="p" sx={{ display: { xs: 'none', md: 'block', lineHeight: 'inherit' } }}>{user.username}</Typography>
+
+                                    <Menu sx={{ mt: '45px' }} id="menu-appbar" anchorEl={anchorElUser} anchorOrigin={{ vertical: 'top', horizontal: 'right' }} keepMounted transformOrigin={{ vertical: 'top', horizontal: 'right' }} open={Boolean(anchorElUser)} onClose={handleCloseUserMenu}>
+                                        <MenuItem onClick={ev => {
+                                            handleCloseUserMenu()
+                                            router.push('/user')
+                                        }}>
+                                            Dashboard
+                                        </MenuItem>
+                                        <MenuItem onClick={ev => {
+                                            handleCloseUserMenu()
+                                            router.push('/auth/profile')
+                                        }}>
+                                            Profile
+                                        </MenuItem>
+                                        <MenuItem onClick={ev => {
+                                            handleCloseUserMenu()
+                                            router.push('/help')
+                                        }}>
+                                            Help & FAQ
+                                        </MenuItem>
+                                        <MenuItem onClick={ev => {
+                                            handleCloseUserMenu()
+                                            doLogout()
+                                        }}>
+                                            Logout
+                                        </MenuItem>
+                                    </Menu>
+                                </Box>
+                                <ArrowDropDown />
+                            </Button>
                         </Box>
                     ) : (
                         <Box sx={{ flexGrow: 0 }}>
@@ -104,13 +145,13 @@ function NavBar() {
                                         <Typography textAlign="center">Login</Typography>
                                     </MenuItem>
                                     <MenuItem onClick={handleCloseUserMenu}>
-                                        <Typography textAlign="center">Register</Typography>
+                                        <Typography textAlign="center">Request Account</Typography>
                                     </MenuItem>
                                 </Menu>
                             </Box>
                             <Box sx={{ flexGrow: 0, display: { xs: 'none', md: 'flex' } }}>
                                 <Button sx={{ borderRadius: '3em', mr: 2, backgroundColor: '#1651B6' }} size='large' variant="contained" color="primary" href="/auth/login">Login</Button>
-                                <Button sx={{ borderRadius: '3em' }} variant="outline" size='small' color="primary" href="/auth/register">Register</Button>
+                                <Button sx={{ borderRadius: '3em' }} variant="outline" size='small' color="primary" href="/auth/register">Request Account</Button>
                             </Box>
                         </Box>
                     )}

diff --git a/components/Title.js b/components/Title.js
@@ -0,0 +1,17 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import Typography from '@mui/material/Typography';
+
+function Title(props) {
+  return (
+    <Typography component="h2" variant="h6" color="primary" gutterBottom>
+      {props.children}
+    </Typography>
+  );
+}
+
+Title.propTypes = {
+  children: PropTypes.node,
+};
+
+export default Title;
diff --git a/components/footer.js b/components/footer.js
@@ -0,0 +1,75 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import Link from 'next/link';
+
+export default function Footer() {
+    return (
+        <Box
+            component="footer"
+            sx={{
+                backgroundColor: "#fcfcfc",
+                width: "100%",
+                height: "80px",
+                position: "absolute",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                zIndex: 1000,
+            }}
+        >
+            <Box
+                sx={{
+                    display: "flex",
+                    flexDirection: "row",
+                    justifyContent: "center",
+                    gap: 2,
+                }}
+            >
+                <Link
+                    style={{
+                        fontWeight: "500",
+                        textDecoration: "none",
+                        color: "#334",
+                        fontSize: "1.1em",
+                    }}
+                    href={"/about"}
+                >
+                    About
+                </Link>
+                <Link
+                    style={{
+                        fontWeight: "500",
+                        textDecoration: "none",
+                        color: "#334",
+                        fontSize: "1.1em",
+                    }}
+                    href={"/resources"}
+                >
+                    Resources
+                </Link>
+                <Link
+                    style={{
+                        fontWeight: "500",
+                        textDecoration: "none",
+                        color: "#334",
+                        fontSize: "1.1em",
+                    }}
+                    href={"/knowledgebase"}
+                >
+                    Knowledge base
+                </Link>
+                <Link
+                    style={{
+                        fontWeight: "500",
+                        textDecoration: "none",
+                        color: "#334",
+                        fontSize: "1.1em",
+                    }}
+                    href={"/help"}
+                >
+                    Help &amp; guides
+                </Link>
+            </Box>
+        </Box>
+    );
+}
-Original file line number
+Diff line change
@@ Expand Up / @@ -27,6 +27,7 @@ yarn-error.log* @@
     # local env files
     .env*.local
+    .env
     # vercel
     .vercel
@@ Expand Down @@