Doble/ShiftSync
1
0
Fork 0
Code Issues Pull requests 1 Projects Releases Packages Wiki Activity Actions

Footer Changes | Nav Bar Changes | Cell Adds | Local Store Add

Browse source
This commit is contained in:
Matt DiMeglio 2025-05-27 14:19:40 -04:00
parent da84f5d399
commit 54621e55ec
6 changed files with 151 additions and 42 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
components/core/Shell/Footer/Footer.jsx
View file

@ -1,24 +1,27 @@
import React from 'react';
import styled from '@emotion/styled';
import { useLocalStore } from '@components';
const FooterContainer = styled('div')`
padding-left: 10px;
position: absolute;
left: 0;
bottom: 0;
right: 0;
flex-shrink: 0;
display: flex;
justify-content: space-between;
align-items: center;
padding: 6px 20px;
height: 30px;
padding-top: 6px;
background: #585858;
`;
const FooterText = styled('p')`
color: white;
font-family: "WDXL Lubrifont TC";
`;
export const Footer = () => {
const { department } = useLocalStore();
return (
<FooterContainer>
<p>{`© ${new Date().getFullYear()} ShiftSync`}</p>
<FooterText>{`© ${new Date().getFullYear()} ShiftSync`}</FooterText>
<FooterText>{department?.name}</FooterText>
</FooterContainer>
)
}

1
components/core/Shell/NavBar/NavBar.jsx
View file

@ -186,7 +186,6 @@ export const NavBar = ({ notifications, disableNav, settings }) => {
ref={(el) => { tabRefs.current['profile'] = el; }}
>
<Avatar
style={{paddingTop: '3px'}}
onClick={() => onUserIconClick()}
>
{`${user?.firstName[0]}${user?.lastName[0]}`}

17
components/core/Shell/Shell.jsx
View file

@ -2,6 +2,8 @@ import React, { useEffect, useState, useRef } from 'react';
import styled from '@emotion/styled';
import { NavBar } from './NavBar';
import { Footer } from './Footer';
import { CircularProgress } from '@mui/material';
import { useLocalStore } from '@components';
const minHeight = 'calc(100vh - 30px)';
@ -43,12 +45,25 @@ export const Shell = ({ children }) => {
const bannerRef = useRef();
const nonContentHeight = 92 + (bannerRef?.current?.offsetHeight || 0);
const minHeightMain = `calc(100vh - ${nonContentHeight}px)`;
const { user, department } = useLocalStore();
useEffect(() => {
window.scrollTo(0,0);
}, []);
return (
<div>
{!user || !department ? (
<Body
style={{
justifyContent: 'center',
alignItems: 'center',
color: 'grey',
}}
>
<CircularProgress color="inherit" />
</Body>
) : (
<Body>
<MainContainer id="main-container">
<Main id="main">
@ -66,5 +81,7 @@ export const Shell = ({ children }) => {
</MainContainer>
<Footer />
</Body>
)}
</div>
)
}

2
components/stores/useLocalStore.js
View file

@ -3,4 +3,6 @@ import { create } from 'zustand';
export const useLocalStore = create((set) => ({
user: null,
setUser: (user) => set({ user }),
department: null,
setDepartment: (department) => set({ department }),
}));

60
src/pages/Settings/Settings.jsx
View file

@ -2,25 +2,64 @@ import React, { useEffect, useState } from 'react';
import styled from '@emotion/styled';
import { Link } from 'react-router-dom';
import { Stack } from '@mui/material';
import { ToggleTabs } from '@components';
import { ToggleTabs, useLocalStore } from '@components';
const OuterContainer = styled(Stack)`
display: flex;
align-items: center;
flex-direction: row;
justify-content: flex-end;
justify-content: center;
padding: 10px 10px 0px 0px;
`;
const fields = {
departmentInformation: {
title: 'Information',
tab: 'department',
fields: []
},
departmentPermissions: {
title: 'Permissions',
tab: 'department',
fields: []
},
departmentManagers: {
title: 'Managers',
tab: 'department',
fields: []
},
departmentSubscriptions: {
title: 'Subscriptions',
tab: 'department',
fields: []
},
myInformation: {
title: 'Information',
tab: 'personal',
fields: []
},
myNotifications: {
title: 'Notifications',
tab: 'personal',
fields: []
},
departmentNotifications: {
title: 'Notifications',
tab: 'department',
fields: []
},
}
export const Settings = () => {
const { user } = useLocalStore();
const tabs = [
{
label: 'Personal',
value: 'personal'
},
{
label: 'Organization',
value: 'org'
label: 'Department',
value: 'department'
}
];
@ -32,6 +71,7 @@ export const Settings = () => {
return (
<div>
{user?.administrator ? (
<OuterContainer>
<ToggleTabs
tabs={tabs}
@ -40,8 +80,18 @@ export const Settings = () => {
tabColor='#4D79FF'
/>
</OuterContainer>
<h1>Settings Page</h1>
) : null }
{tabValue?.value === 'personal' ? (
<div>
<h1>{`Settings Page${user?.administrator ? ` - ${tabValue?.label}` : ''}`}</h1>
<Link to="/">Go to Home</Link>
</div>
) : (
<div>
<h1>Settings Page - Organization</h1>
<Link to="/">Go to Home</Link>
</div>
)}
</div>
);
};

50
src/router/AppRouter.jsx
View file

@ -1,24 +1,62 @@
import React, { useEffect } from 'react';
import React, { useEffect, useState } from 'react';
import { Routes, Route } from 'react-router-dom';
import { Home, Profile, Schedule, Settings } from '@src/pages';
import { Shell } from '@components';
import { useLocalStore } from '@components';
const dept = {
id: 1,
name: 'Darien EMS - Post 53',
Abv: 'DEMS',
schedulers: [],
managers: [],
administrators: [1]
};
const AppRouter = () => {
const { setUser } = useLocalStore();
const { user, setUser, setDepartment } = useLocalStore();
const [userChanged, setUserChanged] = useState(false);
useEffect(() => {
setDepartment(dept);
setUser({
id: 1,
firstName: 'ShiftSync-Manager',
lastName: 'Test-User',
email: 'testuser@shift-sync.com',
scheduler: false,
manager: true,
isAdmin: false
})
scheduler: dept?.schedulers?.includes(1),
manager: dept?.managers?.includes(1),
administrator: dept?.administrators?.includes(1),
isSSAdmin: false
});
}, []);
useEffect(() => {
if (!userChanged && user) {
if (user?.isSSAdmin) {
setUser({
...user,
scheduler: true,
manager: true,
administrator: true,
});
} else if (user?.administrator) {
setUser({
...user,
scheduler: true,
manager: true,
});
} else if (user?.manager) {
setUser({
...user,
scheduler: true,
});
}
setUserChanged(true);
}
}, [user]);
return (
<Shell>
<Routes>