Skip to content

Commit

Permalink
Dashboard fully responsive now!
Browse files Browse the repository at this point in the history
  • Loading branch information
@theknowledgepro
theknowledgepro committed Mar 14, 2023
1 parent 49e18fc commit 14e795a
Show file tree
Hide file tree
Showing 7 changed files with 162 additions and 63 deletions.
2 changes: 1 addition & 1 deletion src/App.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ import { loader as dashboardLoader } from "./util/dashboard";
// For example, I imported it in the ErrorPage.js file
// And to change the color, we only have to change this constant value here...
export const THEME_COLOR = "#7F56D9";
export const SITE_NAME = "FAST TRASH";
export const SITE_NAME = "FASTRASH";
export const useColors = {
appYellow: "#ffa800",
appGreen: "#2a8d00",
Expand Down
4 changes: 2 additions & 2 deletions src/Components/WebFooter.js
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
import { Box, Flex, UnorderedList, ListItem, Input, Button, Text } from '@chakra-ui/react'
import { Link as ReachLink } from "react-router-dom";
import { useColors } from "../App";
import { useColors, SITE_NAME } from "../App";
import React from 'react'

const WebFooter = () => {
return (
<Box w='100%' bg='#111210' flexDirection={{ base: 'column', md: 'row', lg: 'row' }} color='#fff' mt='50px' p={{ base: '10px', md: '20px', lg: '50px' }} display='flex' alignItems='center' justifyContent='center'>
<Box width={{ base: '100%', md: '50%', lg: '25%' }} fontSize='2xl' fontWeight='bold' pt={{ base: '20px', md: '0px', lg: '0px' }}>
<Box fontSize={{ base: "1xl", md: '18px', lg: '20px' }} fontWeight={700} bgGradient='linear(to-l, #FAB20F, #2A8D00)' bgClip='text'>
<ReachLink to="/">FAST TRASH</ReachLink>
<ReachLink to="/">{SITE_NAME}</ReachLink>
</Box>
</Box>
<Box width={{ base: '100%', md: '50%', lg: '25%' }} style={{ color: useColors.appWhite }}>
Expand Down
70 changes: 59 additions & 11 deletions src/index.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,14 +71,6 @@ body.grey {
transition: top 0.4s;
}

.dashboard-header {
width: calc(100vw - (var(--side-panel-width) + 35px)) !important;
top: 5px;
right: 5px;
border-radius: var(--border-radius);
transition: all 0.5s ease;
}

.nav-wrapper {
color: #0009;
font-weight: 600;
Expand Down Expand Up @@ -143,6 +135,14 @@ body.grey {
transition: all 0.5s ease;
}

.dashboard-header {
width: calc(100vw - (var(--side-panel-width) + 35px)) !important;
top: 5px;
right: 5px;
border-radius: var(--border-radius);
transition: all 0.5s ease;
}

.toggle-open-sidepanel {
flex-flow: column;
align-items: flex-end;
Expand All @@ -165,12 +165,10 @@ body.grey {
margin-top: 12px;
margin-right: 5px;
margin-bottom: 5px;
box-shadow: 1px 1px 2px 0 rgba(0, 0, 0, 0.3);
border-radius: var(--border-radius);
background-color: #fff;
border: 1px solid #eee;
padding: 20px;
transition: all 0.5s ease;
overflow-x: hidden;
}

.side-panel[class*='collapse'] {
Expand All @@ -186,11 +184,23 @@ body.grey {
margin-left: calc(60px + 7px) !important;
}


.side-panel[class*='collapse'] .nav-logo {
opacity: 0 !important;
transition: all 0.1s ease;
}

.side-panel[class*='collapse'] .nav-item {
display:none !important;
transition: all 0.1s ease;
}

@media only screen and (max-width: 768px) {
.side-panel {
border-radius: 0px;
top: 0;
left: 0;
padding: 0;
height: 100vh;
width: 0px;
}
Expand All @@ -199,6 +209,42 @@ body.grey {
width: var(--side-panel-width);
z-index: 2000;
}

.dashboard-header,
.dashboard-header[class*='collapse'] {
position: fixed !important;
width: 100vw !important;
top: 0;
border-radius: 0;
right: 0;
left: 0;
}

.main,
.main[class*='collapse'] {
width: calc(100vw - 5px) !important;
margin: auto 0;
border-radius: 0;
}

.dashboard_navbar_side_overlay_bg[class*='collapse'] {
height: 100%;
width: 100%;
position: fixed;
top: 0;
right: 0;
left: 0;
background: rgba(0, 0, 0, .6);
z-index: 100;
}

.side-panel[class*='collapse'] .nav-logo {
opacity: 1 !important
}
.side-panel[class*='collapse'] .nav-item {
display:flex !important
}

}

.details-summary {
Expand All @@ -219,6 +265,8 @@ body.grey {
font-weight: 600;
font-size: 16px;
display: flex;
align-items: center;
justify-content: center;
}

table {
Expand Down
46 changes: 31 additions & 15 deletions src/pages/Dashboard/Dashboard.js
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,18 @@
import React, { useEffect } from "react";
import { Box, Text } from "@chakra-ui/react";
import { useColors } from "../../App";
import { useColors, SITE_NAME } from "../../App";
import { useDispatch, useSelector } from "react-redux";
import { addToState } from "../../store/alerts";
import { useLoaderData } from "react-router-dom";
import { Link, useLoaderData, useLocation, useParams } from "react-router-dom";
import History from "./history";
import { handleCloseNavbar, handleToggleNavbar } from "../MainNavigation";
import { FaHistory, FaHome } from 'react-icons/fa'

const Dashboard = () => {
// ** GET CURRENT ROUTE FROM REACT ROUTER DOM
const { pathname } = useLocation();
const { profile } = useParams()

const dispatch = useDispatch();
const data = useLoaderData();
const { businessName } = data.user;
Expand Down Expand Up @@ -40,16 +47,25 @@ const Dashboard = () => {
return (
<React.Fragment>
{/** DASHBOARD SIDEPANEL SECTION */}
<Box className='dashboard_navbar_side_overlay_bg' id='overlay' onClick={handleToggleNavbar}></Box>
<Box id='collapse-sidebar' className="side-panel">
<Box
className="center"
className="center nav-logo"
h="55px"
fontSize={{ base: "1xl", md: "18px", lg: "20px" }}
fontSize={{ base: "22px", md: "20px", lg: "23px" }}
fontWeight={700}
bgGradient="linear(to-l, #FAB20F, #2A8D00)"
bgClip="text"
>
FAST TRASH
{SITE_NAME}
</Box>
<Box mt={0} py={1} width='100%' borderBottom='1px solid rgba(0, 0, 0, 30%)' borderTop='1px solid rgba(0, 0, 0, 30%)'>
<Link onClick={handleCloseNavbar} to={`/dashboard/${profile}`}>
<Box bg={pathname.includes('/dashboard') ? '#eee' : 'inherit'} display='flex' p={2} cursor='pointer' fontWeight={600} borderRadius='sm' my={1.5} _hover={{ bg: '#eee' }}><FaHome style={{ fontSize: '20px', margin: 'auto 5px' }} /><span className='nav-item'>Dashboard</span></Box>
</Link>
<Link onClick={handleCloseNavbar} to={`/history/${profile}`}>
<Box bg={pathname.includes('/history') ? '#eee' : 'inherit'} display='flex' p={2} cursor='pointer' fontWeight={600} borderRadius='sm' my={1.5} _hover={{ bg: '#eee' }}><FaHistory style={{ fontSize: '20px', margin: 'auto 5px' }} /><span className='nav-item'>View History</span></Box>
</Link>
</Box>
</Box>

Expand All @@ -61,28 +77,28 @@ const Dashboard = () => {
{businessName}
</Text>
</Box>
<Box className="details-summary center">
<Box className="card danger">
<Box flexFlow={{ base: 'column', md: 'row' }} className="details-summary center">
<Box w={{ base: '100%', md: '100%' }} className="card danger">
<Box className="title">Pending Alerts</Box>
<Box fontWeight={600} fontSize={{ md: "28px" }} mt="5px">
<Box textAlign='center' fontWeight={600} fontSize={{ base: '25px', md: "32px" }} mt="5px">
{pend}
</Box>
</Box>
<Box className="card warning">
<Box w={{ base: '100%', md: '100%' }} className="card warning">
<Box className="title">Accepted</Box>
<Box fontWeight={600} fontSize={{ md: "28px" }} mt="5px">
<Box textAlign='center' fontWeight={600} fontSize={{ base: '25px', md: "32px" }} mt="5px">
{accepted}
</Box>
</Box>
<Box className="card success">
<Box w={{ base: '100%', md: '100%' }} className="card success">
<Box className="title">Completed Alerts</Box>
<Box fontWeight={600} fontSize={{ md: "28px" }} mt="5px">
<Box textAlign='center' fontWeight={600} fontSize={{ base: '25px', md: "32px" }} mt="5px">
{complete}
</Box>
</Box>
<Box className="card info">
<Box w={{ base: '100%', md: '100%' }} className="card info">
<Box className="title">Total Alerts Created</Box>
<Box fontWeight={600} fontSize={{ md: "28px" }} mt="5px">
<Box textAlign='center' fontWeight={600} fontSize={{ base: '25px', md: "32px" }} mt="5px">
{items.length}
</Box>
</Box>
Expand All @@ -99,7 +115,7 @@ const Dashboard = () => {
<Box w="100%" fontWeight={600} p="10px" fontSize="15px">
Recent Transactions
</Box>
<History items={items} />
<History businessName={businessName} items={items} />
</Box>
</Box>
</React.Fragment>
Expand Down
71 changes: 47 additions & 24 deletions src/pages/Dashboard/history.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,17 @@
import { Avatar } from "@chakra-ui/react";
import Buttons from "../../Components/Buttons/AcceptButton";
export default function History({ items }) {
import {
Table,
Thead,
Tbody,
Tfoot,
Tr,
Th,
Td,
TableCaption,
TableContainer,
} from '@chakra-ui/react'
export default function History({ businessName, items }) {
let buttonClass = {
pending: "#fc270bbd",
accepted: "#ffc400",
Expand All @@ -9,41 +20,53 @@ export default function History({ items }) {
return (
<>
{" "}
<table>
<thead>
<tr>
<th>#</th>
<th>Alert Created By</th>
<th>Alert Status</th>
<th>Quantity in Kg</th>
<th>Location</th>
</tr>
</thead>
<tbody>
{items?.map((item, index) => {
<TableContainer>
<Table variant='striped' colorScheme='grey'>
<TableCaption>Transactions for {businessName} </TableCaption>
<Thead>
<Tr>
<Th>#</Th>
<Th>Alert Created By</Th>
<Th>Alert Status</Th>
<Th>Quantity in Kg</Th>
<Th>Location</Th>
</Tr>
</Thead>
<Tbody>
{items?.map((item, index) => {
return (
<tr key={item._id}>
<td>{index + 1}</td>
<td className="text-bold">
<Tr key={item._id}>
<Td>{index + 1}</Td>
<Td className="text-bold">
<div className="flex">
<Avatar src={item.image} mr="5px" size="sm" />
Alex Chima
</div>
</td>
<td className="center">
</Td>
<Td className="center">
<Buttons
color={buttonClass[item.status]}
id={item._id}
name={item.status}
/>
</td>
<td className="text-bold text-center">{item.quantity}kg</td>
{/* <td className="center">{item.location}</td> */}
</tr>
</Td>
<Td isNumeric className="text-bold text-center">{item.quantity}kg</Td>
{/* <Td className="center">{item.location}</Td> */}
</Tr>
);
})}
</tbody>
</table>
</Tbody>
<Tfoot>
<Tr>
<Th>#</Th>
<Th>Alert Created By</Th>
<Th>Alert Status</Th>
<Th>Quantity in Kg</Th>
<Th>Location</Th>
</Tr>
</Tfoot>
</Table>
</TableContainer>
</>
);
}
31 changes: 21 additions & 10 deletions src/pages/MainNavigation.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,19 @@ import React, { useRef, useEffect } from 'react'
import { useAppContext } from "../context";
import { FaTimes } from 'react-icons/fa'

export const handleToggleNavbar = () => {
document.getElementById('collapse-sidebar').classList.toggle('collapse')
document.getElementById('header').classList.toggle('collapse')
document.getElementById('main-section').classList.toggle('collapse')
document.getElementById('overlay').classList.toggle('collapse')
}
export const handleCloseNavbar = () => {
document.getElementById('collapse-sidebar').classList.remove('collapse')
document.getElementById('header').classList.remove('collapse')
document.getElementById('main-section').classList.remove('collapse')
document.getElementById('overlay').classList.remove('collapse')
}

function MainNavigation() {
const token = useRouteLoaderData("root");

Expand Down Expand Up @@ -59,11 +72,7 @@ function MainNavigation() {
);
}

const handleToggleNavbar = () => {
document.getElementById('collapse-sidebar').classList.toggle('collapse')
document.getElementById('header').classList.toggle('collapse')
document.getElementById('main-section').classList.toggle('collapse')
}

return (
<Box id='header' className={`${pathname.includes('/dashboard') && 'dashboard-header'} header`}>
{/** WEBSITE LOGO SECTION */}
Expand All @@ -80,11 +89,13 @@ function MainNavigation() {
</Box>
}
{/** MOBILE MENU BUTTON/SWITCH */}
<Box onClick={toggleNavbar} className='toggle-open'>
<Box w='30px'></Box>
<Box w='25px'></Box>
<Box w='30px'></Box>
</Box>
{!pathname.includes('/dashboard') &&
<Box onClick={toggleNavbar} className='toggle-open'>
<Box w='30px'></Box>
<Box w='25px'></Box>
<Box w='30px'></Box>
</Box>
}
{/** WEB NAVIGATION SECTION */}
<Box className="nav-wrapper" w={!pathname.includes('/dashboard') && '80%'} ref={navRef}>
{!pathname.includes('/dashboard') &&
Expand Down
1 change: 1 addition & 0 deletions src/pages/Rootlayout.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ export default function Rootlayout() {
w="100%"
h="100%"
mt='56px'
overflowX='hidden'
>
{<Outlet />}
</Box>
Expand Down

0 comments on commit 14e795a

Please sign in to comment.