From 3243e7d8ebbcb486c06f716a9ea35859527e61aa Mon Sep 17 00:00:00 2001 From: X Date: Mon, 22 May 2023 11:58:18 -0700 Subject: [PATCH] move footer to bottom of the page --- src/App.css | 4 +- src/Pages/Dashboard/Dashboard.js | 729 ++++++++++++++++++------------- 2 files changed, 418 insertions(+), 315 deletions(-) diff --git a/src/App.css b/src/App.css index a46d992..58f2206 100644 --- a/src/App.css +++ b/src/App.css @@ -1,6 +1,8 @@ - .App { text-align: center; + display: flex; + flex-direction: column; + min-height: 100vh; } .App-logo { diff --git a/src/Pages/Dashboard/Dashboard.js b/src/Pages/Dashboard/Dashboard.js index c587cad..4f20974 100644 --- a/src/Pages/Dashboard/Dashboard.js +++ b/src/Pages/Dashboard/Dashboard.js @@ -1,261 +1,333 @@ -import * as React from 'react'; -import { styled } from '@mui/material/styles'; -import Box from '@mui/material/Box'; -import Drawer from '@mui/material/Drawer'; -import CssBaseline from '@mui/material/CssBaseline'; -import MuiAppBar from '@mui/material/AppBar'; -import Toolbar from '@mui/material/Toolbar'; -import List from '@mui/material/List'; -import Typography from '@mui/material/Typography'; -import Divider from '@mui/material/Divider'; -import IconButton from '@mui/material/IconButton'; -import MenuIcon from '@mui/icons-material/Menu'; -import ChevronLeftIcon from '@mui/icons-material/ChevronLeft'; -import ListItem from '@mui/material/ListItem'; -import ListItemButton from '@mui/material/ListItemButton'; -import ListItemIcon from '@mui/material/ListItemIcon'; -import ListItemText from '@mui/material/ListItemText'; -import { NavLink } from 'react-router-dom'; +import * as React from "react"; +import { styled } from "@mui/material/styles"; +import Box from "@mui/material/Box"; +import Drawer from "@mui/material/Drawer"; +import CssBaseline from "@mui/material/CssBaseline"; +import MuiAppBar from "@mui/material/AppBar"; +import Toolbar from "@mui/material/Toolbar"; +import List from "@mui/material/List"; +import Typography from "@mui/material/Typography"; +import Divider from "@mui/material/Divider"; +import IconButton from "@mui/material/IconButton"; +import MenuIcon from "@mui/icons-material/Menu"; +import ChevronLeftIcon from "@mui/icons-material/ChevronLeft"; +import ListItem from "@mui/material/ListItem"; +import ListItemButton from "@mui/material/ListItemButton"; +import ListItemIcon from "@mui/material/ListItemIcon"; +import ListItemText from "@mui/material/ListItemText"; +import { NavLink } from "react-router-dom"; import { FaMandalorian, FaRunning, FaUserNurse } from "react-icons/fa"; import { AiOutlineFieldTime } from "react-icons/ai"; -import { MdOutlinePersonAddAlt, MdOutlinePersonRemoveAlt1, MdOutlinePersonSearch } from 'react-icons/md'; +import { + MdOutlinePersonAddAlt, + MdOutlinePersonRemoveAlt1, + MdOutlinePersonSearch, +} from "react-icons/md"; import { TbBed } from "react-icons/tb"; import { FcApproval, FcHome } from "react-icons/fc"; import { Outlet } from "react-router-dom"; -import { Container } from '@mui/material'; -import { BsCardChecklist, BsPersonCheck, BsPersonLinesFill } from "react-icons/bs"; -import TreeView from '@mui/lab/TreeView'; -import TreeItem from '@mui/lab/TreeItem'; +import { Container } from "@mui/material"; +import { + BsCardChecklist, + BsPersonCheck, + BsPersonLinesFill, +} from "react-icons/bs"; +import TreeView from "@mui/lab/TreeView"; +import TreeItem from "@mui/lab/TreeItem"; -import LoginIcon from '@mui/icons-material/Login'; +import LoginIcon from "@mui/icons-material/Login"; const drawerWidth = 240; -const Main = styled('main', { shouldForwardProp: (prop) => prop !== 'open' })( - ({ theme, open }) => ({ - flexGrow: 1, - padding: theme.spacing(3), - transition: theme.transitions.create('margin', { - easing: theme.transitions.easing.sharp, - duration: theme.transitions.duration.leavingScreen, - }), - marginLeft: `-${drawerWidth}px`, - ...(open && { - transition: theme.transitions.create('margin', { - easing: theme.transitions.easing.easeOut, - duration: theme.transitions.duration.enteringScreen, - }), - marginLeft: 0, - }), +const Main = styled("main", { shouldForwardProp: (prop) => prop !== "open" })( + ({ theme, open }) => ({ + flexGrow: 1, + padding: theme.spacing(3), + transition: theme.transitions.create("margin", { + easing: theme.transitions.easing.sharp, + duration: theme.transitions.duration.leavingScreen, }), + marginLeft: `-${drawerWidth}px`, + ...(open && { + transition: theme.transitions.create("margin", { + easing: theme.transitions.easing.easeOut, + duration: theme.transitions.duration.enteringScreen, + }), + marginLeft: 0, + }), + }) ); const AppBar = styled(MuiAppBar, { - shouldForwardProp: (prop) => prop !== 'open', + shouldForwardProp: (prop) => prop !== "open", })(({ theme, open }) => ({ - transition: theme.transitions.create(['margin', 'width'], { - easing: theme.transitions.easing.sharp, - duration: theme.transitions.duration.leavingScreen, - }), - ...(open && { - width: `calc(100% - ${drawerWidth}px)`, - marginLeft: `${drawerWidth}px`, - transition: theme.transitions.create(['margin', 'width'], { - easing: theme.transitions.easing.easeOut, - duration: theme.transitions.duration.enteringScreen, - }), + transition: theme.transitions.create(["margin", "width"], { + easing: theme.transitions.easing.sharp, + duration: theme.transitions.duration.leavingScreen, + }), + ...(open && { + width: `calc(100% - ${drawerWidth}px)`, + marginLeft: `${drawerWidth}px`, + transition: theme.transitions.create(["margin", "width"], { + easing: theme.transitions.easing.easeOut, + duration: theme.transitions.duration.enteringScreen, }), + }), })); -const DrawerHeader = styled('div')(({ theme }) => ({ - display: 'flex', - alignItems: 'center', - padding: theme.spacing(0, 1), - // necessary for content to be below app bar - ...theme.mixins.toolbar, - justifyContent: 'flex-end', +const DrawerHeader = styled("div")(({ theme }) => ({ + display: "flex", + alignItems: "center", + padding: theme.spacing(0, 1), + // necessary for content to be below app bar + ...theme.mixins.toolbar, + justifyContent: "flex-end", })); export default function NewHeader() { - const [open, setOpen] = React.useState(true); + const [open, setOpen] = React.useState(true); - const handleDrawerOpen = () => { - setOpen(true); - }; + const handleDrawerOpen = () => { + setOpen(true); + }; - const handleDrawerClose = () => { - setOpen(false); - }; - // User login check - // const {user} = useAuth(); - // const getTv = () => { - // fetch("https://iptv-org.github.io/iptv/countries/br.m3u") - // .then(response => response.text()) - // .then(data => { - // let channels = []; - // let lines = data.split("\n"); - // let currentChannel = {}; - // for (let i = 0; i < lines.length; i++) { - // let line = lines[i].trim(); + const handleDrawerClose = () => { + setOpen(false); + }; + // User login check + // const {user} = useAuth(); + // const getTv = () => { + // fetch("https://iptv-org.github.io/iptv/countries/br.m3u") + // .then(response => response.text()) + // .then(data => { + // let channels = []; + // let lines = data.split("\n"); + // let currentChannel = {}; + // for (let i = 0; i < lines.length; i++) { + // let line = lines[i].trim(); - // if (line.startsWith("#EXTINF:")) { - // let info = line.split(/,(.+)/); - // currentChannel["name"] = info[1]; - // currentChannel["logo"] = info[0].match(/tvg-logo="(.*?)"/)[1]; - // } else if (line.startsWith("http")) { - // currentChannel["url"] = line; - // channels.push(currentChannel); - // currentChannel = {}; - // } - // } + // if (line.startsWith("#EXTINF:")) { + // let info = line.split(/,(.+)/); + // currentChannel["name"] = info[1]; + // currentChannel["logo"] = info[0].match(/tvg-logo="(.*?)"/)[1]; + // } else if (line.startsWith("http")) { + // currentChannel["url"] = line; + // channels.push(currentChannel); + // currentChannel = {}; + // } + // } - // console.log(channels); - // }) - // .catch(error => { - // console.error('Error:', error); - // }); - // } - // getTv(); + // console.log(channels); + // }) + // .catch(error => { + // console.error('Error:', error); + // }); + // } + // getTv(); - return ( - - - - - - - - - Hospital Management System - - - - + + + + + + + + Hospital Management System + + + + + + + + {" "} + SmartCare{" "} + + + + + + + + + {/* Links for routing */} + + + + + + + + + + + + {/* Doctor view for admin */} + + + + + + + + + + + } + defaultExpandIcon={ +
+ +
+ } + sx={{ height: 300, flexGrow: 1, maxWidth: 420, overflowY: "auto" }} + > + - - - SmartCare - - - - - - - - {/* Links for routing */} - - - - - - - - - - - - {/* Doctor view for admin */} - - - - - - - - - - } - defaultExpandIcon={
- -
} - sx={{ height: 300, flexGrow: 1, maxWidth: 420, overflowY: 'auto' }} - > - - - - - - - - - - - - - - - - {/* */} - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - {/* Only for patients */} - {/* + + + + + + + + + + + + + + + {/* */} + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + {/* Only for patients */} + {/* @@ -266,57 +338,81 @@ export default function NewHeader() { */} - {/* Patient for Admin view */} - - - - - - - - - - } - defaultExpandIcon={
- -
} - sx={{ height: 140, flexGrow: 1, maxWidth: 400, overflowY: 'auto' }} - > - - - - - - - - - - - - - - - - - - - - - - - - {/* Time and date selection */} - {/* + {/* Patient for Admin view */} + + + + + + + + + + + } + defaultExpandIcon={ +
+ +
+ } + sx={{ height: 140, flexGrow: 1, maxWidth: 400, overflowY: "auto" }} + > + + + + + + + + + + + + + + + + + + + + + + + + {/* Time and date selection */} + {/* @@ -327,35 +423,40 @@ export default function NewHeader() { */} - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - ); + + + + + + + + + + + + + + + + + + + + + + +
+ + + + +
+ + ); }